HTML 到 ASP.net 网页表单页面答案

【问题标题】：HTML to ASP.net web form pageHTML 到 ASP.net 网页表单页面
【发布时间】：2015-12-21 09:49:21
【问题描述】：

我有这个页面 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>？提前致谢

【问题讨论】：

标签： c# html asp.net webforms

【解决方案1】：

我相信您想从后面的代码中填充无序列表。一种选择是使用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>

【讨论】：

我应该在哪里输入这些？
@JohnPaulCirilos 将占位符放在 aspx 页面中。 aspx.cs 中的 C# 代码
@JohnPaulCirilos 后面的代码是将进入 aspx.cs 文件的 C# 代码。例如在 Page_Load 事件下。还要确保在 aspx.cs 文件中添加命名空间

【解决方案2】：

在您与元素服务器端交互？如果不是按原样添加 HTML。 ASPX 页面适用于 HTML 元素。

如果您想与元素服务器端交互，请给它们一个 ID 并添加 runat="server"。例如：

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

然后您可以使用sidebar-menu 访问服务器端。

【讨论】：