Load specific part in webpage?

Question

See below image first.

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....

Answer 1

Jupaol's answer works fine but 1 thing need to mention, I came across the problem after implemented Jupaol's idea, the first time I called the user control immediately after I click menu, the button with in the ascx works fine, but if I switch to 2nd one, first click of the button on the 2nd control will not fire on first click, this is because we do not have a "static" ID of the control. It took me almost 3 days to finally figure out why this is happening. so here's part of my code to make. I'm leaving this message in hope that anyone who read this afterwards will make the use of it.

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);
}

I'll also need to thank Jupaol's great contribution so that I can get my site running.

Answer 2

According to:

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

And

sidebar tree view is in master page and Content goes here region is content page

If my understanding is correct, I think you do not need to place your TreeView control in your master page because you only want one page loading dynamically the content based on the selection of your tree view. So...Why is this important? Well if you place your tree view in your page you can use an UpdatePanel to avoid full posts.

Output of the following code

The following code covers the next points:

• A TreeView control is embedded in a UserControl and placed in an ASPX page (left side)

• The menu contorl exposes an event that is raised whenever the selected node changes, this event is handled in the ASPX page to dynamically load user controls depending on the user selection on the right side of the page, only one content is loaded at a time.

• The controls are embedded in an UpdatePanel therefore you won't change your page and your back button in your browser won't be affected

Note: the user controls keep their state across post backs

(I'm not sure if this is the best way to do it, perhaps you could try to find a solution using only ajax, and avoid the use of the evil updata panels, but certainly this is a way to do it)

I'll try to simplify the code to reduce the size of the post, I will just post the code of one user control, the other one is exactly the same I just changed its title to difference them on the page

ASCX Menu

<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 Menu code behind

    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 code behind

    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;
        }
    }

ASCX

<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 Code Behind

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

You can simply copy-paste this code to test it yourself, this should work

Answer 3

The Easiest way is to Wrap your side navigation & the Content placeholder in an UpdatePanel. Set the TreeView in the side bar as the UpdateTrigger for the update Panel. But, this approach is a little inefficient.

A slightly better way is ti just wrap the Content Placeholder in an Update Panel, along with a HiddenField in it. Upon a selection in the sidebar, update the HiddenField Value with JavaScript and then refresh the update Panel.