Create html elements from code behind and display to front-end in ASP.NET Web Form

Question

I need to Read/Display some front-end code/elements from Code Behind. Scenario: I have a page, in which I have two (2) <div>, the top <div> and the bottom <div>.

I have two buttons inside top <div> as given below and the <div> at bottom is blank. Below is the code snippet:

Default.aspx:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="navbar">
                <asp:Button ID="btnHome" runat="server" Text="Home"
                    OnClick="btnHome_Click" />
                <asp:Button ID="btnProducts" runat="server" Text="Products"
                    OnClick="btnProducts_Click" />
            </div>
            <div id="contentArea">
            </div>
        </form>
    </body>
</html>

When I click the home button, some HTML elements should become part of the Default.aspx page inside a <div> given below:

<div id=contentArea">
</div>

The above code should look like the code below:

<div id="contentArea">
    <h1>Home</h1>
    <p>Home Elements here</p>
</div>

When I click Product button, so that the code look like:

<div id="contentArea">
    <h1>Products</h1>
    <p>Products Elements here</p>
    <asp:HyperLink ID="lnkMicrosoft" runat="server" Text="Go to Microsoft"
        NavigateUrl="http://www.microsoft.com"></asp:HyperLink>
    <asp:HyperLink ID="lnkGoogle" runat="server" Text="Go to Google"
        NavigateUrl="http://www.google.com"></asp:HyperLink>
</div>

if you want to manipulate contentArea, you should make it runat="server" — Rick Hodder
– Rick Hodder, Commented Jan 31, 2017 at 19:16

Win · Accepted Answer · 2017-01-31 20:01:38Z

11

You can use Panel to display html contents which renders as div tag.

For example,

ASPX

<div id="navbar">
    <asp:Button ID="btnHome" runat="server" Text="Home" OnClick="btnHome_Click" />
    <asp:Button ID="btnProducts" runat="server" Text="Products" 
        OnClick="btnProducts_Click" />
</div>
<asp:Panel ID="contentArea" runat="server">
</asp:Panel>

Code Behind

protected void btnHome_Click(object sender, EventArgs e)
{
    var h1 = new HtmlGenericControl("h1") {InnerText = "Home"};
    contentArea.Controls.Add(h1);

    var p = new HtmlGenericControl("p") {InnerText = "Home Elements here"};
    contentArea.Controls.Add(p);
}

protected void btnProducts_Click(object sender, EventArgs e)
{
    var h1 = new HtmlGenericControl("h1") {InnerText = "Products"};
    contentArea.Controls.Add(h1);

    var p = new HtmlGenericControl("p") {InnerText = "Products Elements here"};
    contentArea.Controls.Add(p);

    var lnkMicrosoft = new HyperLink
    {
        Text = "Go to Microsoft",
        NavigateUrl = "http://www.microsoft.com"
    };
    contentArea.Controls.Add(lnkMicrosoft);

    var lnkGoogle = new HyperLink
    {
        Text = "Go to Google",
        NavigateUrl = "http://www.google.com"
    };
    contentArea.Controls.Add(lnkGoogle);
}

answered Jan 31, 2017 at 20:01

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Shahid Khan Afridi Over a year ago

Bundle of Thanks Dear, Like it and Love it, its working and fulfill my requirements. God Bless you ever

IdusOrtus Over a year ago

This answer suited my needs a little better: stackoverflow.com/a/20855024/1415929

Collectives™ on Stack Overflow

Create html elements from code behind and display to front-end in ASP.NET Web Form

1 Answer 1

ASPX

Code Behind

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

ASPX

Code Behind

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related