界面截图

点击“新增菜单”，在父页面弹出对话框，选择父菜单为“==根节点==”，这里模拟树的下拉列表是不是很酷（这也是 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()），用来关闭弹出窗口并回发父页面。



下一章，我们将会介绍如何在弹出的新窗口中编辑菜单。


下载全部源代码