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>

A page can only have one server-side form tag, but I need two

currently my ASP.NET web application is using a master page, nested master page and a content page. On the nested master page I have a content placeholder for navigational links, and another for the main content. The reason as to why I have two is because my main masterpage has already determined a fixed format for the rest of my pages, and I'm using nested masterpages because I need different types of navigational links for different roles used in my website. However, for the navigational links a LinkButton is used for the sign out button, thus it requires me to use a form tag with a runat="server" in order for me to be able to run the page. However, in my content page, I also need a form runat="server" tag for my main content. :-( Does anyone have an idea to propose on how to fix this problem? I want to stick to using multiple content placeholders so minor changes won't affect the entire page.
Anyways here's a snippet of my code from the masterpage
<asp:Content ID="Content1" ContentPlaceHolderID="navigationlinks" runat="server">
<form id="navForm" runat="server">
<a class="toggleMenu" href="#">
<img src="images/nav_icon.png" alt="" />
</a>
<ul class="nav" id="nav">
<li class="current">Home</li>
<li>Competition</li>
<li>Gallery</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Discussions
</a>
<ul class="dropdown-menu">
<li>Create Discussion</li>
<li>View Discussion</li>
</ul>
</li>
<li>Submission</li>
<li>Results</li>
<li>My Account</li>
<div class="clear"></div>
</ul>
<script type="text/javascript" src="js/responsive-nav.js"></script>
</form>
<asp:Content ID="Content3" ContentPlaceHolderID="Content1" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</asp:Content>
ContentPlaceHolder1 is used for the main content in the content page. So even with the form tag already in "navigationallinks" I'll need another form tag

in my content page, I also need a form runat="server" tag for my main content.
You already have it since this page have a masterpage which include server-side form tag!
When you have a masterpage with
<form runat="server">...</form>
All pages using that masterpage will have the form, and no need to add it again in the page!
Edit:
Just remove all form tags inside any page or nested masterpage, and add it the masterpage wrapping all the elements.
Inside the masterpage that has the <body> tag, right after the body add the <form runat="server"> tag and close it just before the </body>. And remove all the other form tags.

dynamically add html tag in asp.net

I need to add html tags dynamically in asp.net code behind , here is the scenario :
List<Product> products = ProductManager.GetProductList();//read data from database
Product is a class containing information I need to show in website such as product name, image,… .
For adding html code I tried this to show 5 products per page :
String finalHtmlCodeContainer="";
for(int i=0;i<=5;i++)
{
String myBox= "<div class=\"box\"> </div>";
finalHtmlCodeContainer+=mybox;
}
boxWrapper.InnerHtml=finalHtmlCodeContainer;
boxWrapper is a div that would contain our 5 product info.up to now everything is ok but problem appears when insted of "<div class=\"box\"> </div>",myBoxcontains long characters of html code , the original myBox should include this:
<div class="boxWrapper">
<div class="box">
<div class="rightHeader">rightHeader</div>
<div class="leftHeader">leftHeader</div>
<div class="article">
<img src="../Image/cinemaHeader.jpg" />
<p>
some text here <!--product.content-->
</p>
</div><!--end of article-->
<div class="rightFooter"><span>rightFooter</span>
<div class="info">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
</div><!--end of rightFooter-->
<div class="leftFooter"><span>leftFooter</span>
</div><!--end of leftFooter-->
</div><!--end of box-->
</div><!--end of boxWrapper-->
you see if i add producet.atrributes to code snippet above, it would be more messy,hard to debug , has less scalability and... . what is your solution?

It depends on the underlying product. If you are using web forms, I'd suggest using a data bound control that supports templating like the ListView or Repeater. It gives you full control over the UI, and also supports reloading the UI in ViewState. In your scenario, you'd have to build the UI on every postback. The ListView or Repeater track it in ViewState.
If you are using MVC, well using a helper method can make this easier as you can stick the item template within and then use a foreach and render out the helper.
If you are talking doing it in JavaScript, then there are templating components for doing the same thing.

I suggest you to Add repeater in your <p> tag ,
<p>
<asp:Repeater runat="server" ID="rpDetail">
<ItemTemplate>
<div class="box">
<%# Eval("YourDataField") %>
</div>
</ItemTemplate>
</asp:Repeater>
</p>
And make your products list as Repeater's datasourse in code behind .
rpDetail.DataSource = products ;
rpDetail.DataBind();

add div to page from the code behind Asp.net/C#

Hello I have a item list that shows on my asp.net page like this:
<div class="search-result-item">
<div class="image">
<img src="images/1.png"/>
</div>
<div class="logo">
<img src="images/logo.png"/>
</div>
<div class="header">
Title
</div>
<div class="message">
Message
</div>
<div class="keywords">
key1 | key2 | key3
</div>
<div class="links">
Go to
</div>
</div>
This shows a predefined layout for an item on the page.
Items are generated in the code behind.
I want for each item to create a div like the one above on the page.
How can I do that using the code behind?
Thanks a lot

You create a Control and add it to your page.
There are a large range of controls, but if you want that exact markup, and don't need any server-side processing, the LiteralControl control is probably the most appropriate.

Use a repeater control You create a control that basically connects to datasource and then repeats info based on the data. Very crude description sorry. Look at it on Google.

Having problem in puting JavaScript Menu into Asp.Net page

Before I post my problem here, please be noted that i would really like to leave javascript and css for that menu as it is.
Now to my problem.
I have a menu in JavaScript that I am having a problem putting into asp.net page, I am having problem to produce the proper html to be more correct.
I would really appreciate if someone could point me to the right direction.
the menu in html looks like:
<!-- HOME -->
<div class="menu_item" onmouseover="hide_all_panels();">
Home
</div>
<!-- ABOUT SITE -->
<div id="trigger1" onmouseover="show_panel('0');">
<div class="menu_item">
About Us
</div>
<div class="hidden_div">
<!-- ABOUT WEB SITE POPOUT -->
<div class="menu" id="popout1">
<div class="menu_item">
Frequently Asked Questions
</div>
<div class="menu_item">
Our Team
</div>
<div class="menu_item">
The Board
</div>
</div>
</div>
</div>
Blog
</div>
<!-- CONTACT US -->
<div class="menu_item" onmouseover="hide_all_panels();">
Contact Us
</div>
as you can see, the divs are not symmetric for single menu that has not children I have simply link wraped into div, but for the menu with childrens I have a menu with one trigger div and 2 more somewhat main divs inside it.
I tryed to put something like that for this menu on asp.net side (don't put atentions to link namings now, they are not important):
<asp:Repeater ID="rpt_Menu" runat="server" OnItemDataBound="rpt_Menu_DataBound">
<ItemTemplate>
<asp:Panel ID="pnl_MainSubmenuDiv" runat="server" Visible="false" Enabled="false">
<div id="trigger<%= index %>" onmouseover="show_panel('<%= index %>');">
</asp:Panel>
<div class="menu_item" onmouseover="hide_all_panels();">
<%# Eval("menu_name") %>
</div>
<asp:HiddenField ID="hdn_Id" runat="server" Value='<%# Eval("menu_id") %>' />
<asp:Repeater ID="rpt_SubMenu" runat="server">
<ItemTemplate>
<div class="menu" id="popout<%= index %>">
<div class="menu_item">
<%# Eval("menu_name") %>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<asp:Panel ID="pnl_MainSubmenuClose" runat="server" Visible="false" Enabled="false">
</div>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
and the code behind is very simple and there is nothing special, all i do is just bind second repeater that inside first repeater and make panels visible or invisible:
protected void rpt_Menu_DataBound(object obj, RepeaterItemEventArgs e)
{
int parent_id = Int32.Parse(((HiddenField)e.Item.FindControl("hdn_Id")).Value.ToString());
using (SamaraDataContext mycity = new SamaraDataContext())
{
var subMenu = from sm in mycity.tbl_menus
where (sm.menu_parent == parent_id)
select new
{
menu_id = sm.menu_id,
menu_name = sm.menu_name
};
int count = 0;
foreach (var item in subMenu)
{
count++;
}
if (count > 0)
{
((Panel)e.Item.FindControl("pnl_MainSubmenuDiv")).Visible = true;
((Panel)e.Item.FindControl("pnl_MainSubmenuClose")).Visible = true;
((Repeater)e.Item.FindControl("rpt_SubMenu")).DataSource = subMenu.ToList();
((Repeater)e.Item.FindControl("rpt_SubMenu")).DataBind();
this.index++;
}
}
}
}
However my problems is that panels produce div's even if they are hidden, which breaks out all the html structure.
I would really dislike to put the divs formating inside the code behind.

Well for one thing this section here:
<asp:Panel ID="pnl_MainSubmenuClose" runat="server" Visible="false" Enabled="false">
</div>
</asp:Panel>
Will render invalid HTML if Visible is set to true, thus potentially screwing up your JavaScript and CSS interactions.
That will come out like so:
<div id="something_something_pnl_MainSubmenuClose">
</div>
</div>
as Panel controls render a around whatever they enclose. So figure a way around that, and you'll likely solve your problem.

To supplement blesh's answer, use the PlaceHolder control instead of Panel. Placeholders do not render HTML surrounding the contents.