Develop Reference

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

how i can change the class of my <li> using javascript

My project is an asp.net and it has a master page that contains a list
<ul id="navigation">
<li id="li1" runat="server" class="selected">Events</li>
<li id="li2" runat="server">Add Event</li>
<li id="li3" runat="server">Profile</li>
<li id="li4" runat="server">Friends</li>
<li id="li5" runat="server">Find Friends</li>
<li id="li6" runat="server">Schedual</li>
<li>
<asp:LinkButton ID="LogOutButton" runat="server" OnClick="LogOutButton_Click">Log Out</asp:LinkButton>
</li>
</ul>
The selected class (css class) has a picture this picture tells the user on which page he is. How can I change this class using javascript or C# when I navigate?
I don't have a good experience with javascript

document.getElementById("li6").className = "whatever";
Should work/

$("#li1").addClass("selected");
Will work.
Example

This is very simply in JavaScript/jQuery.
But if this is for navigation, meaning it needs to be updated when you display a new page, I would do this in the markup from the server.
You didn't say much about how you are serving this page. But both ASP.NET WebForms and MVC allow you to control the HTML served in a number of different ways.

You can set for all your li tags classes like this for example:
<li class="li">
... content of the tag
</li>
and in your javascript you can add to all elements with class "li" some other class:
$(".li").addClass("classYouWantToAdd");
and in the css file:
.li
{
... needed css for the class
}

here is another post that tells you how to get elements by classname
Selecting a div by classname

Dynamically adding menu items randomly disappear in ASP .net

I have a header control which is included in every page.
I create dynamic menu in Header control based on user rights and modules provided.
Menu is created in following string format.
Code Behind
`
string dynamicMenu =
<ul>
<li>
<a href='/User/HomePage' runat='server' id='HOME'>Home</a>
</li>
<li>
<a href='/User/Files' runat='server' id='MyFiles'>My Files</a>
</li>
</ul>;
divMenu.InnerHtml = dynamicMenu;
`
ASPX
<div id="divMenu" runat="server"></div>
Problem is that, some times menu disappears and rendered menu div has only <ul/> tag and l
looks like
<div id="divMenu" runat="server"> <ul/> </div>
How can I resolve this issue.

replace <div id="divMenu" runat="server"></div> with panel in your aspx
in code behind
string dynamicMenu = "<ul><li><a href='/User/HomePage' runat='server' id='HOME'>Home</a></li><li><a href='/User/Files' runat='server' id='MyFiles'>My Files</a></li></ul>";
Panel1.Controls.Add(new LiteralControl(dynamicMenu));

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.

How to customize the user control for only one page of the ASP.NET website?

I have two user controls (ascx); one contains some forms, and the other one contains the menu bar.
I used both of them in many pages. Now, I need to customize the one that has the menu bar for the Admin Homepage. So, is it possible to add some changes to the user control just for this page.
I mean by changes, adding two elements to the menu bar.
For instance, let us assume that the two pages are called: Admin, Settings. How will you customize the user control for them?
My code for the Menu User Control (ascx file):
<div class="topnav">
<ul class="menu" runat="server" >
<li>Home</li>
<li>Sub-Menu1
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>Sub-Menu2
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item </li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>ITEM</li>
<li>About</li>
<li>Contact Us</li>
<li>Help</li>
<li class="menuItem1ToHide">Admin</li>
</ul>
<div class="clr"></div>
</div>
And inside the Master Page, I put:
<uc1:MenuBar ID="MenuBar1" runat="server" />
As you see from above code, I added the Admin page as the last element in the list, and the code-behind class, I added the bool method mentioned below, but I don't know how to make the last element only visible for the Admin rather than the other users
By the way, I am using the ASP.NET Role-Based Security since I am using the Windows Authentication. This to define the Admin from the Normal User.

Sure,
Add the two items to the menu bar, and hide them for everything but the admin page. You can do that in several ways; check the URL of the current request, or add a property to the user control (default the menu items to false).
public bool DisplayAdminOnlyMenuItems
{
get { return menuItem1ToHide.Visible; }
set
{
menuItem1ToHide.Visible = value;
menuItem2ToHide.Visible = value;
}
}
or you can use a method to do it. The property allows you to set it in markup or code. For instance, if your UC definition was this:
<uc:Menu ID="ucMenu" runat="server" />
You can set it, for the admin page, this way:
<uc:Menu ID="ucMenu" runat="server" DisplayAdminOnlyMenuItems="True" />
And then it will make those menu items visible.
EDIT: In your case, since everything is role security, add runat="server" to the LI to show or hide:
<li id="liAdmin" runat="server" class="menuItem1ToHide">Admin</li>
In your code, on prerender of the user control, do:
protected override void OnPreRender(EventArgs e)
{
liAdmin.Visible = this.User.IsInRole("Admin");
//if visible isn't available, use style["display"] = (this.User.IsInRole("Admin") ? "" : "none";
}
Something like that.

You could check the url in the Page_Load of the ascx and do the alterations there

Add the new elements to the user control and expose a property (say bool ShowAdminMenuItems) in the control. Show/hide the new elements based on this property's value. Set this property as true in the page where you need these two menu items to show up. Rest of the pages don't know about it, so they would not set it and the default value (false) would be in affect.

Yes, you can render some elements conditionally by doing:
<% if( somecondition) { %>
<li class="yourclass"> text here </li>
<%}%>