如何在 ASPX 中使用标准 HTML 标记

Question

我在 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>

如何使用代码隐藏在我的页面中的ulSpecialty_selector UL 中添加三个已注释掉的LI？

我在想只要runat="server" 存在，我就应该能够从代码隐藏中访问它？

Answer 1

要从您后面的代码中添加<li> 给您<ul runat="server">，您可以这样做：

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

比串联字符串更简洁！

更新： 如何使用 for 循环实现这种方法：

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

您是对的，通过添加 runat="server"，您可以将 UL 用作服务器端通用 HTML 控件。

最简单直接的方法是直接在你的服务器端代码中分配innerHTML属性：

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

或者您可以在服务器端代码中创建单独的 LI 元素（同样通过创建 HtmlGenericControl 控件并为其指定标签名称“LI”），指定新创建的控件的所有属性并将其添加到 .Controls上面的 UL 元素的集合。

Answer 3

回答您问题的最快（也是最丑陋）的方法是：

解决方案 1

.ASPX 文件

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

.ASPX.cs 文件（代码隐藏）

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

到目前为止，上述方法是解决问题的最糟糕的方法。即使它有效，代码也不符合 .NET 编写 Web 应用程序的“方式”，它是不可维护的，而且......只是丑陋:)。

还有更好的方法，这里有一个使用Repeater控件的方法：

解决方案 2

.ASPX 文件

<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 文件（代码隐藏）

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

当然，使用第二种解决方案，您可以使用数据绑定表达式将代码中的数据插入到 li 标记中