界面截圖

點擊“新增菜單”，在父頁面彈出對話框，選擇父菜單為“==根節點==”，這里模擬樹的下拉列表是不是很酷（這也是ExtAspNet的一個特色）：


點擊“保存并繼續”，首先會AJAX回發到服務器并新增菜單到數據庫，然后重新綁定下拉列表并彈出對話框：


新增另外一個菜單，并設置此菜單的父菜單為剛剛添加的：?


點擊“保存并關閉”，首先會AJAX回發到服務器并新增菜單到數據庫，然后彈出對話框，當你點擊對話框的“確認”按鈕，會關閉當前彈出窗口并且讓父頁面回發，并在回發時重新綁定Grid控件：?


可以看到父頁面的Grid已經更新了：?


如果表單不完整就想保存數據，會得到客戶端提示：?


如果正在輸入數據，不小心點擊了關閉按鈕，也會有提示（是不是很酷，這個是ExtAspNet默認支持的不需要編碼的）：?




為父頁面的Window控件添加OnClose事件處理函數

在新增菜單，關閉當前彈出窗口之后，需要回發父頁面（AJAX POST）并更新Grid的內容，所以我們需要給父頁面的Window控件添加OnClose事件（在~/admin/menu.aspx）：

<ext:Window ID="Window1" runat="server" Height="350px" IsModal="true" Popup="false"Target="_parent" EnableIFrame="true" IFrameUrl="about:blank" Width="500px" OnClose="Window1_Close"></ext:Window>
protected void Window1_Close(object sender, EventArgs e){BindGrid();}


ASPX標簽定義

<ext:PageManager ID="PageManager1" AutoSizePanelID="SimpleForm1" runat="server" /><ext:SimpleForm ID="SimpleForm1" ShowBorder="false" ShowHeader="false" runat="server"BodyPadding="5px" EnableBackgroundColor="true" Title="SimpleForm"><Toolbars><ext:Toolbar ID="Toolbar1" runat="server"><Items><ext:Button ID="btnClose" SystemIcon="Close" EnablePostBack="false" runat="server"Text="關閉"></ext:Button><ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server"></ext:ToolbarSeparator><ext:Button ID="btnSaveContinue" ValidateForms="SimpleForm1" SystemIcon="SaveNew"OnClick="btnSaveContinue_Click" runat="server" Text="保存并繼續"></ext:Button><ext:Button ID="btnSaveClose" ValidateForms="SimpleForm1" SystemIcon="SaveClose"OnClick="btnSaveClose_Click" runat="server" Text="保存并關閉"></ext:Button></Items></ext:Toolbar></Toolbars><Items><ext:TextBox ID="tbxName" runat="server" Label="名稱" Required="true" ShowRedStar="true"></ext:TextBox><ext:TextBox ID="tbxUrl" runat="server" Label="鏈接" Required="true" ShowRedStar="true"></ext:TextBox><ext:CheckBox ID="cbxShow" runat="server" Label="顯示"></ext:CheckBox><ext:NumberBox ID="tbxSortIndex" Label="排序" Required="true" ShowRedStar="true" runat="server"></ext:NumberBox><ext:DropDownList ID="ddlParentMenu" Label="父菜單" Required="true" ShowRedStar="true"runat="server"></ext:DropDownList></Items></ext:SimpleForm>

1. 首先可以看到SimpleForm擁有的Toolbars和Items屬性，其實在ExtAspNet中很多控件都是從Panel繼承下來的，包括SimpleForm, Form, Tab, AccordionPane, Window 等。
2. btnClose用于關閉當前窗口，因為點擊后的動作是在客戶端完成的不會發回發到服務器，所以設置EnablePostBack="false"。
3. btnSaveContinue和btnSaveClose都需要保存表單數據，為了保證表單數據的完整性，需要在回發服務器之前對表單字段進行有效性驗證，這里不要忘記設置ValidateForms="SimpleForm1"。
4. btnSaveContinue和btnSaveClose的區別，一個是添加了本條菜單然后繼續添加（不關閉彈出窗口），一個是添加了本條菜單后關閉彈出窗口并回發父頁面（也就是更新父頁面中的Grid控件）。


頁面初始化代碼

在Page_Load中初始化頁面控件：
protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){LoadData();}}private void LoadData(){btnClose.OnClientClick = ExtAspNet.ActiveWindow.GetConfirmFormModifiedClosePostBackReference();BindDDL();}

為btnClose的OnClientClick設置一段腳本，這段腳本是用來關閉彈出窗體并回發父頁面的（同時注意在關閉之前會首先驗證表單中控件是否已經改變，如果改變的話需要給出提示，這也正是你在最后一張截圖中看到的）。

ExtAspNet.ActiveWindow 表示當前彈出的窗口，也就是父頁面中的Window1控件，有人可能要問為什么不直接用Window1呢，還要弄個ActiveWindow靜態類？ ----不要忘記哦，我們目前是在IFrame中的，無法取得父頁面的Window1控件實例。

GetConfirmFormModifiedClosePostBackReference 這個函數雖然長了點，不過意思很明顯：
獲取(Get)表單改變的提示消息(ConfirmFormModified)然后關閉彈出窗體(Close)之后回發父頁面(PostBack)的腳本(Reference)


再來看下綁定下拉列表的代碼：
private void BindDDL(){// 綁定下拉列表XMenuCollection menus = new Select().From<XMenu>().OrderAsc(XMenu.SortIndexColumn.ColumnName).ExecuteAsCollection<XMenuCollection>();List<MyMenu> newMenus = XMenuHelper.GetMyMenuCollection(menus);// 所有節點的TreeLevel加一，然后添加根節點foreach (MyMenu myMenu in newMenus){myMenu.TreeLevel += 1;}MyMenu rootMenu = new MyMenu();rootMenu.Name = "==根節點==";rootMenu.Id = 0;rootMenu.TreeLevel = 0;newMenus.Insert(0, rootMenu);// 綁定到下拉列表（啟用模擬樹功能）ddlParentMenu.EnableSimulateTree = true;ddlParentMenu.DataTextField = "Name";ddlParentMenu.DataValueField = "Id";ddlParentMenu.DataSimulateTreeLevelField = "TreeLevel";ddlParentMenu.DataSource = newMenus;ddlParentMenu.DataBind();// 選中根節點ddlParentMenu.SelectedValue = "0";}

注意：這個下拉列表被設置了EnableSimulateTree = true，也就是啟用模擬樹的功能，因此除了設置我們所熟知的DataTextField和DataValueField之外，還要設置DataSimulateTreeLevelField。

DataSimulateTreeLevelField字段用來記錄本項記錄在樹中的層級，從零開始。

因此這段代碼中一個亮點就是如何為newMenus集合添加根節點，這需要兩步走：

• newMenus中的所有項的TreeLevel加一，這是為根節點讓步
• 在newMenus的第0個位置插入根節點（TreeLevel=0）

頁面事件處理

private void SaveMenu(){XMenu menu = new XMenu();menu.Name = tbxName.Text.Trim();menu.NavigateUrl = tbxUrl.Text.Trim();menu.SortIndex = Convert.ToInt32(tbxSortIndex.Text.Trim());menu.Show = cbxShow.Checked;menu.ParentMenuId = Convert.ToInt32(ddlParentMenu.SelectedValue);menu.Save(User.Identity.Name);}protected void btnSaveClose_Click(object sender, EventArgs e){SaveMenu();ExtAspNet.Alert.Show("添加成功！", String.Empty, ExtAspNet.ActiveWindow.GetClosePostBackReference());}protected void btnSaveContinue_Click(object sender, EventArgs e){SaveMenu();// 繼續添加新紀錄，需要重新綁定下拉列表BindDDL();ExtAspNet.Alert.Show("添加成功！<br /><br />請繼續添加新菜單。");}

其中比較有意思的是btnSaveClose_Click中的代碼，在保存并關閉的邏輯中，我們為ExtAspNet.Alert.Show添加了一個關閉彈出對話框后的回調JavaScript函數（ExtAspNet.ActiveWindow.GetClosePostBackReference()），用來關閉彈出窗口并回發父頁面。



下一章，我們將會介紹如何在彈出的新窗口中編輯菜單。


下載全部源代碼

總結

以上是生活随笔為你收集整理的ExtAspNet应用技巧（十七） - 新增菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。