无刷新实现页面跳转

最新推荐文章于 2021-07-17 08:31:12 发布

原创最新推荐文章于 2021-07-17 08:31:12 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#asp #menu #triggers #server #object #ajax

ASP.NET 专栏收录该内容

21 篇文章

订阅专栏

利用微软的ajax控件，实现无刷新的页面跳转。要实现整个页面跳转，大家用的最多可能是利用框架，我要的是的web用户控件。将一个PlaceHolder放在UpdatePanel中，作为更新的内容。有一个菜单控件切换界面。并将会传事件定义为菜单控件的单击事件
<asp:Menu ID="Menu1" runat="server" OnMenuItemClick="Menu1_MenuItemClick" Orientation="Horizontal" BackColor="#B5C7DE" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" StaticSubMenuIndent="10px">
            <Items>
                <asp:MenuItem Text="Page1" Value="Page1"></asp:MenuItem>
                <asp:MenuItem Text="Page2" Value="Page2"></asp:MenuItem>
                <asp:MenuItem Text="Page3" Value="Page3"></asp:MenuItem>
            </Items>
</asp:Menu>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Menu1" EventName="MenuItemClick" />
            </Triggers>
</asp:UpdatePanel>
在后台代码中出来菜单项单击事件，动态创建用户控件,并添加到占位控件PlaceHolder中
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
    {
        PlaceHolder1.Controls.Clear();
        switch (e.Item.Value)
        {
            case "Page1":
                PlaceHolder1.Controls.Add(Page.LoadControl("UserControl1.ascx"));
                break;
            case "Page2":
                PlaceHolder1.Controls.Add(Page.LoadControl("UserControl2.ascx"));
                break;
            case "Page3":
                PlaceHolder1.Controls.Add(Page.LoadControl("UserControl3.ascx"));
                break;
        }
    }