Develop Reference

HTML to ASP.net web form page

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><i class="glyphicon glyphicon-info-sign" style="color:black"></i> Truck Data </li>
<li><i class="glyphicon glyphicon-folder-close" style="color:black"></i> Maintenance Record </li>
<li><i class="glyphicon glyphicon-calendar" style="color:black"></i> Maintenance Schedule </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

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.

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><i class="glyphicon glyphicon-info-sign" style="color:black"></i> Truck Data </li>
I believe the text should be within the <i></i> tags. So it should look like this.
<li><i class="glyphicon glyphicon-info-sign" style="color:black">Truck Data</i></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>

How to create dynamic submenus of submenu?

<ul>
<li>HOME</li>
<li>Career
<ul>
<asp:Repeater ID="_rptSubMenu" runat="server">
<ItemTemplate>
<li><a href="#" ><%# Eval("career") %></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
<li>Contact us</li>
</ul>
This is creating dynamic submenus . I want submenus under career like asp.net php etc from database. How to do?

Showing Data in a specific format inside asp repeater

I am using a repeater control which have my data retrieved from database. I need to show them in the following format in the HTML.
<ul>
<li>
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<div>content 4</div>
</li>
<li>
<div>content 5</div>
<div>content 6</div>
<div>content 7</div>
<div>content 8</div>
</li>
</ul>
I need to put a li tag for each 4 items that are bound from the repeater.
if any of you guys know how to achieve this, please let me know. Thanks.

Try Below Code- Data-Binding Expressions - Eval()
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<div><%# Eval("content1") %></div> // content1 is DB Column Name
<div><%# Eval("content2") %></div> // content2 is DB Column Name
<div><%# Eval("content3") %></div> // as so on for all content... till 8
<div><%# Eval("content4") %></div>
</li>
<li>
<div><%# Eval("content5") %></div>
<div><%# Eval("content6") %></div>
<div><%# Eval("content7") %></div>
<div><%# Eval("content8") %></div>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>

Creating Bootstrap-Datepicker with multiple asp:Repeater TextBoxes

I am creating form using an asp:Repeater, each object of the repeater has one textbox that will need it's own unique bootstrap-datepicker linked to it. (the datepicker is a javascript addon to twitter-bootstrap 2.3.2 found here: http://www.eyecon.ro/bootstrap-datepicker -- Wanted to add that the link is safe, but there is no real need to view the page in regards to the question)
My problem is that I am not able to use the asp.net clientid to correctly target the text boxes.
aspx code:
<asp:Repeater ID="repList" runat="server">
<HeaderTemplate>
<ul class="gridul">
<li class="gridli userrole"><span class="short liheader">Jenz ID</span></li>
<li class="gridli"><span class="long liheader">Name</span></li>
<li class="gridli"><span class="short liheader">S/S/F</span></li>
<li class="gridli"><span class="short liheader">Date</span></li>
<li class="gridli"><span class="long liheader">Payment Type</span></li>
<li class="gridli"><span class="mid liheader">Sent to B.O.</span></li>
</ul>
</HeaderTemplate>
<ItemTemplate>
<ul class="gridul">
<li class="gridli userrole"><span class="short"><%# Eval("jenzabar_id") %></span></li>
<li class="gridli"><span class="long"><%# Eval("first_name") %>&nbsp<%# Eval("last_name") %></span></li>
<li class="gridli"><span class="short"><%# Eval("student_staff_faculty") %></span></li>
<li class="gridli"><span class="short"><%# Eval("reservation_date") %></span></li>
<li class="gridli"><span class="long"><asp:TextBox ID="PayType" runat="server" Text='<%# Eval("payment_type") %>' /></span></li>
<li class="gridli"><span class="mid"><asp:TextBox ID="SentBo" runat="server" Text='<%# Eval("sent_to_bo") %>' /></span></li>
</ul>
<asp:HiddenField ID="hidJenz" runat="server" Value='<%# Eval("jenzabar_id") %>' />
<asp:HiddenField ID="hidPayType" runat="server" Value='<%# Eval("payment_type") %>' />
<asp:HiddenField ID="hidSentBo" runat="server" Value='<%# Eval("sent_to_bo") %>' />
</ItemTemplate>
</asp:Repeater>
The textbox being targeted is:
<asp:TextBox ID="SentBo" runat="server" Text='<%# Eval("sent_to_bo") %>' />
In my scripts.js I can target an individual textbox by viewing the aspx source and copying in the generated id such as "ctl00_MainContent_repList_ctl01_SentBo" but I cannot figure out how to use <%# SentBo.ClientID %> with the repeater. It just doesn't work.
Example:
$(function () {
$('ctl00_MainContent_repList_ctl01_SentBo').datepicker();
})
is successful
$(function () {
$('<%#= SentBo.ClientID %>').datepicker();
})
is not

Did more digging. Found the answer, finally.
Replace:
$('ctl00_MainContent_repList_ctl01_SentBo').datepicker();
with:
$(this).find("input[type=text][id*=SentBo]").datepicker();

Can I Number a GroupTemplate or ItemTemplate?

I would like to use a GroupTemplate to separate a list of items into groups. However, I need each Group to be numbered sequentially so I can link to them and implement some JS paging. I'm binding to an IEnumerable
Here's some pseudo code. I would like the output to look like this:
<a href="#group1">Go to Group 1<a>
<a href="#group2">Go to Group 2<a>
<a href="#group3">Go to Group 3<a>
<ul id="group1">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul id="group2">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul id="group3">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Is this easy to do in a ListView, using GroupTemplate and ItemTemplate?
<asp:ListView ID="lv" runat="server" GroupPlaceholderID="groupPlaceholder">
<LayoutTemplate>
<asp:PlaceHolder ID="groupPlaceholder" runat="server"></asp:PlaceHolder>
</LayoutTemplate>
<GroupTemplate>
<ul id="<!-- group-n goes here -->">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</ul>
</GroupTemplate>
<ItemTemplate>
<li>Item</li>
</ItemTemplate>
</asp:ListView>
I can get the number of groups to do the links at the top from the Datasource and basic math, but how do I get id="groupN" number into the template?

I don't think you can DataBind the id, so I'd probably either use a hidden field, have JQuery count them up, or use the CssClass. You can use Container.DataItemIndex to get your number.
Edit: By just changing the ul to be runat="server", ASP.NET will generate a unique id for you in it's infamous INamingContainer format. That will include an index as well, though it'll be something like lv_ctrl0_group, and is an implementation detail.
You could hook a handler to the ul's Init event and append a number to it, making it something like lv_ctrl0_group1. I don't think you can get rid of the prepended INamingContainer stuff very easily, and this would probably break any IPostDataHandler controls.
<script runat="server">
void Group_Init(object sender, EventArgs e) {
((Control)sender).ID += groupId++.ToString();
}
int groupId = 0;
</script>
<asp:ListView id="lv" runat="server" GroupItemCount="3">
<LayoutTemplate>
<asp:PlaceHolder ID="groupPlaceHolder" runat="server" />
</LayoutTemplate>
<GroupTemplate>
<ul id="group" runat="server" oninit="Group_Init">
<asp:PlaceHolder ID="itemPlaceHolder" runat="server"/>
</ul>
</GroupTemplate>
<ItemTemplate>
<li>Item</li>
</ItemTemplate>
</asp:ListView>

In your aspx file:
<GroupTemplate>
<ul id='<%# "group"+GroupNumber %>'>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</ul>
</GroupTemplate>
In your code behind (assuming C#):
int _GroupNumber=0;
protected string GroupNumber
{
get { return (++_GroupNumber).ToString(); }
}

The solution from Keltex above would work with a small change; use <%= instead <%#,
<%# wouldnt work because GroupTemplate doesnt support databinding