HTML to ASP.net web form page

Question

i have this page ASP.Net Web Forms Page

<!-- 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>

want to implement this

<!-- 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 -->

How can i insert the <li> and <i> in the Asp.net Web Form? Thanks in advance

Jon P · Accepted Answer · 2015-09-23 23:10:46Z

1

At you interacting with the elements server side? If not just add the HTML as is. ASPX pages work fine with HTML elements.

If you want to interact with the elements server side, give them an ID and add runat="server". E.g:

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

You can then access server side with sidebar-menu.

answered Sep 23, 2015 at 23:10

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prashanth Thurairatnam · Accepted Answer · 2015-09-23 23:36:19Z

0

I believe you want to populate the unordered list from code behind. One option would be to make use of HtmlGenericControl class.

Your list item mark up looks like this

<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 believe the text should be within the <i></i> tags. So it should look like this.

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

Based on this you can just have a placeholder in the aspx page and set it from code behind. Here in the example I am just populating a list item. Based on your needs you can loop/ create additional list items.

place holder in aspx

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

code behind

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

namespace

using System.Web.UI.HtmlControls;

Generated markup

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

answered Sep 23, 2015 at 23:36

Prashanth Thurairatnam

4,3592 gold badges17 silver badges17 bronze badges

3 Comments

John Paul Cirilos Over a year ago

where should i input these?

Prashanth Thurairatnam Over a year ago

@JohnPaulCirilos put the place holder in the aspx page. C# code in aspx.cs

Prashanth Thurairatnam Over a year ago

@JohnPaulCirilos the code behind is the C# code that will go in the aspx.cs file. for example under Page_Load event. Also make sure to add the namespace in the aspx.cs file

Collectives™ on Stack Overflow

HTML to ASP.net web form page

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related