1

See below image first.

enter image description here

we have one sidebar navigation(ajax accordion control asp.net)

now when ever user click on link inside side bar related page(content) should display in Content goes here region.

As per given instruction entire page should not be refreshed or in other word in Back Button should not work(In Internet Explorer).

what should be the way to achieve this functionality?

what should be the best suggestion for that?

EDIT: navigation tree is inside MasterPage and Content goes region is in side content page of master page

please suggest me..... thank you so much....

4

3 回答 3

1

根据:

根据给定的说明,不应刷新整个页面,或者换句话说,后退按钮不应该工作(在 Internet Explorer 中)。

侧边栏树视图在母版页中,内容在此处区域是内容页

如果我的理解是正确的,我认为您不需要将TreeView控件放在母版页中,因为您只希望一个页面根据树视图的选择动态加载内容。所以...为什么这很重要?好吧,如果您将树视图放在页面中,则可以使用 anUpdatePanel来避免完整的帖子。

以下代码的输出

在此处输入图像描述

以下代码涵盖了以下几点:

  • 一个TreeView控件嵌入在UserControl一个 ASPX 页面中(左侧)

  • 菜单控件公开了一个事件,该事件在所选节点更改时引发,此事件在 ASPX 页面中处理,以根据页面右侧的用户选择动态加载用户控件,一次仅加载一个内容。

  • 控件嵌入其中,UpdatePanel因此您不会更改页面,并且浏览器中的后退按钮不会受到影响

注意:用户控件在回发中保持其状态

(我不确定这是否是最好的方法,也许您可​​以尝试仅使用 ajax 找到解决方案,并避免使用邪恶的更新面板,但当然这是一种方法)

我将尝试简化代码以减小帖子的大小,我将仅发布一个用户控件的代码,另一个完全相同我只是更改其标题以在页面上区分它们

ASCX 菜单

<asp:TreeView ID="TreeView1" runat="server" onselectednodechanged="Unnamed2_SelectedNodeChanged">
    <Nodes>
        <asp:TreeNode Text="link1" />
        <asp:TreeNode Text="link2" />
    </Nodes>
    <SelectedNodeStyle Font-Bold="True" Font-Italic="True" />
</asp:TreeView>

背后的 ASCX 菜单代码

    public event Action<string> MenuChanged = delegate { };

    protected void Unnamed2_SelectedNodeChanged(object sender, EventArgs e)
    {
        this.MenuChanged(this.TreeView1.SelectedNode.Text);
    }

ASPX

    <asp:ScriptManager runat="server" ID="sm" />
    <asp:UpdatePanel runat="server" ChildrenAsTriggers="true">
        <ContentTemplate>
            <asp:HiddenField runat="server" ID="currentControl" />
            <table border="0" cellpadding="0" cellspacing="0" width="90%" align="center">
                <tr>
                    <td style="width:50%; background-color: Silver">
                        <menu:TreeViewMenu runat="server" ID="myTreeViewMenu" OnMenuChanged="myTreeViewMenu_MenuChanged" />
                    </td>
                    <td style="width:50%; background-color: Aqua">
                        <p>Result:</p>
                        <asp:Panel runat="server" ID="myPanel">
                        </asp:Panel>
                        <asp:Label ID="lblMessage" runat="server" />
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>

ASPX 代码背后

    protected void Page_Init(object sender, EventArgs e)
    {
        if (this.IsPostBack)
        {
            var cc = this.Request.Form["currentControl"];

            if (!string.IsNullOrWhiteSpace(cc))
            {
                var uc = this.LoadControl(this.Server.HtmlDecode(cc));
                this.myPanel.Controls.Add(uc);
            }
        }
    }
    protected void myTreeViewMenu_MenuChanged(string e)
    {
        this.myPanel.Controls.Clear();

        switch (e)
        {
            case "link1":
                var cc1 = "~/Content1.ascx";
                this.currentControl.Value = this.Server.HtmlEncode(cc1);
                var uc1 = this.LoadControl(cc1);
                this.myPanel.Controls.Add(uc1);
                this.lblMessage.Text = "Updated from: link1";
                break;
            case "link2":
                var cc2 = "~/Content2.ascx";
                this.currentControl.Value = this.Server.HtmlEncode(cc2);
                var uc2 = this.LoadControl(cc2);
                this.myPanel.Controls.Add(uc2);
                this.lblMessage.Text = "Updated from: link2";
                break;
            default:
                this.lblMessage.Text = "Updated from default: " + e;
                break;
        }
    }

澳交所

<h1>Content 1</h1>

<asp:TextBox runat="server" ID="txt" />
<asp:Button Text="Process data..." runat="server" OnClick="button_Click" />
<asp:Button Text="Just post" runat="server" />

<asp:Label ID="lblMessage" runat="server" />

背后的 ASCX 代码

    protected void button_Click(object sender, EventArgs e)
    {
        this.lblMessage.Text = this.txt.Text;
    }

您可以简单地复制粘贴此代码以自己测试,这应该可以

于 2012-07-13T08:48:58.310 回答
1

Jupaol 的答案很好,但有一点需要提一下,我在实现 Jupaol 的想法后遇到了这个问题,我第一次点击菜单后立即调用用户控件,ascx 中的按钮工作正常,但是如果我切换到第二个第一,第一次单击第二个控件上的按钮不会在第一次单击时触发,这是因为我们没有控件的“静态”ID。我花了将近 3 天的时间才终于弄清楚为什么会发生这种情况。所以这是我要制作的代码的一部分。我留下这条消息是希望以后阅读此消息的任何人都会使用它。

if (!string.IsNullOrEmpty(controlPath))
{
    PlaceHolder1.Controls.Clear();
    UserControl uc = (UserControl)LoadControl(controlPath);

    /**note below LastLoadedControl is anything that could
     * be unique to the called control so every time when call back
     * it will not confuse the back end so the first fire of eg. a button
     * on that loaded control will work
     */
    uc.ID = LastLoadedControl;
    PlaceHolder1.Controls.Add(uc);
}

我还需要感谢 Jupaol 的巨大贡献,这样我才能让我的网站运行起来。

于 2012-08-17T01:48:57.613 回答
1

最简单的方法是将侧边导航和内容占位符包装在UpdatePanel. 将TreeView侧栏中的设置UpdateTrigger为更新面板的 。但是,这种方法效率有点低。

一个稍微好一点的方法是只需将内容占位符包装在更新面板中,以及其中的一个HiddenField。在侧边栏中进行选择后,更新 HiddenField 值,JavaScript然后刷新更新面板。

于 2012-07-13T05:31:15.380 回答