How to use a standard HTML tag in ASPX

Question

I have the following code in HTML:

<ul class="ulSpecialty" id="ulSpecialty_selector" runat="server">
    <!--<li class="liSubSpecialty active" data-trait-id="9">
        <a href="test.htm" class="premote trait-link large btn" data-trait-id="9">
            <span class="check"><i class="icon icon-ok"></i></span>
            <span class="name">Cardiology</span>
            <span class="count">6</span>
        </a>
    </li>-->
</ul>

How can I use the code-behind to add three of the commented out LI inside the ulSpecialty_selector UL in my page?

I am thinking as long as the runat="server" is there, I should be able to access it from the codebehind?

Answer 1

To add <li> to you <ul runat="server"> from your code behind you can do this:

using System.Web.UI.HtmlControls;  

HtmlGenericControl span = new HtmlGenericControl("span");
        span.Attributes.Add("class", "name");
        span.InnerText = "Cardiology";
        //make more spans

        HtmlAnchor a = new HtmlAnchor();
        a.HRef = "test.htm";
        a.Attributes.Add("class", "premote trait-link large btn");
        a.Attributes.Add("data-trait-id", "9");

        HtmlGenericControl li = new HtmlGenericControl("li");
        //add attributes

        a.Controls.Add(span);
        li.Controls.Add(a);

        ulSpecialty_selector.Controls.Add(li);

Cleaner than making a concatenated string!

UPDATE: How to implement this approach with a for loop:

using (var da = new SqlDataAdapter("SELECT * FROM mytable", "connection string"))
{
    var table = new DataTable();
    da.Fill(table);
}

    foreach(DataRow row in table.Rows){
        HtmlGenericControl li = new HtmlGenericControl("li");
        li.Attributes.Add("data-trait-id", row["TraitID"].ToString());

        HtmlAnchor a = new HtmlAnchor();
        a.Attributes.Add("data-trait-id", row["TraitID"].ToString());

        HtmlGenericControl span1 = new HtmlGenericControl("span");
        span1.Attributes.Add("class", "name");
        span1.InnerText = row["Name"].ToString();
        a.Controls.Add(span1);

        HtmlGenericControl span2 = new HtmlGenericControl("span");
        span2.Attributes.Add("class", "count");
        span2.InnerText = row["Count"].ToString();
        a.Controls.Add(span2);

        li.Controls.Add(a);
        ulSpecialty_selector.Controls.Add(li);
    }

Answer 2

The fastest (and the most ugliest) way that answers your question is this:

Solution 1

.ASPX file

<ul class="ulSpecialty" id="ulSpecialty_selector" runat="server">
</ul>

.ASPX.cs file (code behind)

protected void Page_Load(object sender, EventArgs e)
{
    //the ugly way, fastest that answers your question
    TheUglyWay();            
}


private void TheUglyWay()
{
    StringBuilder innerHtml = new StringBuilder();
    for(var i = 0; i < 3; i++){
        string li = @"
    <li class=""liSubSpecialty active"" data-trait-id=""9"">
        <a href=""test.htm"" class=""premote trait-link large btn"" data-trait-id=""9"">
            <span class=""check""><i class=""icon icon-ok""></i></span>
            <span class=""name"">Cardiology</span>
            <span class=""count"">6</span>
        </a>
    </li>";
        innerHtml.AppendLine(li);
    }

    ulSpecialty_selector.InnerHtml = innerHtml.ToString();
}

The above method is by far the baddest thing you can do to solve your problem. Even if it works, the code does not comply with the .NET "way" of writing web applications, it is unmaintainable and ... just ugly :).

There are better ways, here's one of them that uses the Repeater control:

Solution 2

.ASPX file

<asp:Repeater runat="server" ID="rptSpeciality">
    <HeaderTemplate>
        <ul class="ulSpecialty" id="ulSpecialty_selector">
    </HeaderTemplate>
    <ItemTemplate>
        <li class="liSubSpecialty active" data-trait-id="9">
            <a href="test.htm" class="premote trait-link large btn" data-trait-id="9">
                <span class="check"><i class="icon icon-ok"></i></span>
                <span class="name">Cardiology</span>
                <span class="count">6</span>
            </a>
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

.ASPX.cs file (code behind)

protected void Page_Load(object sender, EventArgs e)
{
    //the better way, using a repeater
    TheBetterWay();
}

private void TheBetterWay()
{
    //bind the repeater to an array of three elements
    rptSpeciality.DataSource = new object[] { null, null, null };
    rptSpeciality.DataBind();
}

And of course, using this second solution you can insert data from code behind into the li tags using databinding expressions

Answer 3

You're correct, by adding runat="server" you make the UL available as server-side generic HTML control.

The easiest and most direct way is to assign innerHTML property directly in your server-side code:

 ulSpecialty_selector.InnerHtml = @"<li class='liSubSpecialty active' data-trait-id='9'>
        <a href='test.htm' class='premote trait-link large btn' data-trait-id='9'>
            <span class='check'><i class='icon icon-ok'></i></span>
            <span class='name'>Cardiology</span>
            <span class='count'>6</span>
        </a>
    </li>";

Or you can create individual LI elements in your server-side code (again by creating an HtmlGenericControl control and giving it a tag name of "LI"), specifying all properties of the newly created control and adding it to .Controls collection of the UL element above.