HTML到ASP.net Web表單頁面

Question

我有此頁面ASP.Net Web表單頁面

<!-- Sidebar menu -->               
    <div id="sidebar-menu ">

    <div id="topPanel"
    <asp:Table runat="server" ID="table_PageHeader">
        <asp:TableHeaderRow>
            <asp:TableHeaderCell>
                <asp:HyperLink ID="hyperlink_TruckList" runat="server" Text="Truck List" NavigateUrl="~/View/Trucklist.aspx" Font-Underline="false"></asp:HyperLink>
            </asp:TableHeaderCell>
            <asp:TableHeaderCell>
                <asp:HyperLink ID="hyperlink_Reports" runat="server" Text="Reports" NavigateUrl="~/View/Reports.aspx" Font-Underline="false"></asp:HyperLink>
            </asp:TableHeaderCell>
            <asp:TableHeaderCell>
                <asp:HyperLink ID="hyperlink_Profile" runat="server" Text="Profile" NavigateUrl="~/View/Profile.aspx" Font-Underline="false"></asp:HyperLink>
            </asp:TableHeaderCell>
        </asp:TableHeaderRow>
    </asp:Table>
</div>

想要實現這個

<!-- Sidebar menu -->               
                <div id="sidebar-menu">
                    <ul>
                        <li><a href="index.html" style="font-size: 18px; color: black"><i class="glyphicon glyphicon-info-sign" style="color:black"></i> Truck Data </a></li>
                        <li><a href="#fakelink" style="font-size: 18px; color: black"><i class="glyphicon glyphicon-folder-close" style="color:black"></i> Maintenance Record </a></li>
                        <li><a href="#fakelink" style="font-size: 18px; color: black"><i class="glyphicon glyphicon-calendar" style="color:black"></i> Maintenance Schedule </a></li>
                    </ul>
                </div><!-- End div #sidebar-menu -->
        </div><!-- End div .body .rows .scroll-y -->
    </div>
    <!-- END SIDEBAR -->

如何在Asp.net Web表單中插入<li>和<i> ？ 提前致謝

Answer 1

在與元素服務器端進行交互時？ 如果不是，則僅添加HTML。 ASPX頁面可以很好地與HTML元素一起使用。

如果要與元素服務器端進行交互，請給它們一個ID並添加runat="server" 。 例如：

<div id="sidebar-menu" runat="server">

然后，您可以使用sidebar-menu訪問服務器端。

Answer 2

我相信您想從后面的代碼中填充無序列表。 一種選擇是利用HtmlGenericControl類。

您的清單項目標記看起來像這樣

<li><a href="index.html" style="font-size: 18px; color: black"><i class="glyphicon glyphicon-info-sign" style="color:black"></i> Truck Data </a></li>

我認為文字應在<i></i>標記內。 所以它應該看起來像這樣。

<li><a href="index.html" style="font-size: 18px; color: black"><i class="glyphicon glyphicon-info-sign" style="color:black">Truck Data</i></a></li>

基於此，您可以在aspx頁面中僅包含一個占位符，並通過后面的代碼對其進行設置。 在此示例中，我只是填充一個列表項。 根據您的需要，您可以循環/創建其他列表項。

aspx中的占位符

<asp:PlaceHolder ID="sidemenu" runat="server" />

背后的代碼

HtmlGenericControl list = new HtmlGenericControl("ul");

HtmlGenericControl li = new HtmlGenericControl("li");

HyperLink a = new HyperLink();
a.NavigateUrl = "index.html";
a.Attributes.Add("style", "font-size: 18px; color: black");

HtmlGenericControl i = new HtmlGenericControl("i");
i.Attributes.Add("class", "glyphicon glyphicon-info-sign");
i.Attributes.Add("style", "color:black");
i.InnerText = "Truck Data";

a.Controls.Add(i);

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

sidemenu.Controls.Add(list);

命名空間

using System.Web.UI.HtmlControls;

生成的標記

<ul>
<li>
    <a href="index.html" style="font-size: 18px; color: black">
        <i class="glyphicon glyphicon-info-sign" style="color:black">Truck Data</i>
    </a>
<li>
</ul>