CODEWITHSUNDEEP
c#htmlcssasp.net
Muhammad Shahid Khan Afridi
Muhammad Shahid Khan Afridi

Reputation: 101

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

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>

Upvotes: 3

Views: 16307

Answers (1)

Win
Win

Reputation: 62260

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

Upvotes: 11

Related Questions