How to retrieve a HTML element in Code Behind - c#

I use asp.net and C# 4.
I would like to know if is possible and how to retrieve a "Normal" (not asp.net) element in Code Behind.
For instance: I have a <li></li>, I would like get it from my logic and set is Visible to False.
At the moment I tried to change the MarkUp with:
<li ID="li-item" runat="server">
// Does not work I get Error: ID no identified....
I'm pretty new to Asp.Net, please give me a sample of code. Thanks for your support.
PS: I hope to do not get down votes because it is a too trivial question :)

"li-item" is not a valid identifier. And you need to close the li tag.
Try:
<li ID="li_item" runat="server"></li>
(I have used an underscore instead of -)
Now it should work

If it has an id and runat=server then you should be able to access it as a HtmlGenericControl, http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlgenericcontrol.aspx.

<ul runat="server" id="ULSlider" class="slider_bg_container">
<%-- <li>
<img src="images/Home_Main.jpg" alt="" width="704" height="312" />
</li>
<li>
<img src="images/Slde1.jpg" alt="" width="704" height="312" />
</li>
<li>
<img src="images/Slde2.jpg" alt="" width="704" height="312" />
</li>
<li>
<img src="images/Slde3.jpg" alt="" width="704" height="312" />
</li>
<li>
<img src="images/Slde4.jpg" alt="" width="704" height="312" />
</li>--%>
</ul>
and in code i use this like
protected void LoadData()
{
ImageGalleryBAL objImageBAl = new ImageGalleryBAL();
DataSet ds=objImageBAl.ImageGallery_GetALLImageForSlider();
String s="";
foreach (DataRow dr in ds.Tables[0].Rows)
{
string imgUrl =ConfigurationManager.AppSettings["SiteURL"]+ dr["ImageName"].ToString();
string AltText = dr["AltText"].ToString();
s=s+"<li><img src='"+imgUrl+"' alt='"+AltText+"' width='704' height='312' /> </li>";
}
ULSlider.InnerHtml = s;
}

Related

How to get first tag in a list?

suppose I have the following list:
<div id='page_competition_1_block_competition_left_tree_2'>
<div>
<ul>
<li>
<a href="#" />
<ul>
<li>
<a href="#">
</li>
</ul>
</li>
<li>
<a href="#" />
...
how can I get the first a tag for each li?
I tried using:
HtmlNodeCollection compsLi = doc.DocumentNode
.SelectNodes("div[#id='page_match_1_block_competition_left_tree_2']//div//ul/li[1]");
but this will return null
You need to specify a single / instead of //, so:
HtmlNodeCollection compsLi = doc.DocumentNode.SelectNodes("div[#id='page_match_1_block_competition_left_tree_2']//ul/li/a");
Essentially:
/: search for the current node.
//: search from the root document node.
You should be able to iterate through the compsLi object you retrieve. Additionally, I don't think you need the [1] in your selector. Once you get the <li> item you should be able to do something like this:
foreach(var node in compsLi)
{
var aNode = node.SelectSingleNode("./a");
...
}
You can take a look here for something similar.

Add <li> to <ul> tag from code behind C# ASP NET

well how the title says, how can I add various <li> tags to a <ul> tag from code behind. I tried this Add to List from codebehind C# Asp.net this is my example code.
ASP
<body>
<form id="form1" runat="server">
<div>
<ul id="menu" runat="server"> </ul>
</div>
</form>
And code behind.
protected void Page_Load(object sender, EventArgs e)
{
CreateMenu();
}
protected void CreateMenu()
{
HtmlGenericControl li = new HtmlGenericControl("li");
menu.Controls.Add(li);
HtmlGenericControl anchor = new HtmlGenericControl("a");
anchor.Attributes.Add("href", "login.aspx");
anchor.InnerText = "login";
li.Controls.Add(anchor);
}
Well it works perfectly but maybe this gonna be a dumb question, how can I add more than one element to the <ul> tag? I need to create an new object for each item (I think this is wrong) or exist a better way to do this?
I searched but any example satisfies my doubt, sorry if you think is a repeated question.
If your datas(menu items) are not coming from a source(something like database), you need to repeat the same process over and over again unfortunately. Or you can create a function which is taking 2 parameters, text and link. This way you can do this job with 1 line.
private void AddMenuItem(string text, string link)
{
HtmlGenericControl li = new HtmlGenericControl("li");
menu.Controls.Add(li);
HtmlGenericControl anchor = new HtmlGenericControl("a");
anchor.Attributes.Add("href", link);
anchor.InnerText = text;
li.Controls.Add(anchor);
}
AddMenuItem("text","link");
AddMenuItem("text2","link2");
AddMenuItem("text3","link3");
You can improve this for your specific needs.
You can use ListView. It's easier format. I also found a good tutorial about it (http://weblogs.asp.net/scottgu/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui)
<asp:ListView ID="ListView1" runat="server">
<LayoutTemplate>
<ul>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li>
<div>
<p class="name"><%# Eval("author") %></p>
<p class="date"><%# Eval("insertDate") %></p>
</div>
<p class="comment"><span class="<%# Eval("icon") %>"></span><%# HttpUtility.HtmlEncode(Eval("comment")) %></p>
</li>
</ItemTemplate>
</asp:ListView>

ASP.NET MVC passing a string in an ActionLink to the controller

Passing a param to the controller is null.. from examples ive seen im using correct overload.
Any help much appriceated
#{
foreach (string str in ViewBag.ServerNames)
{
<ul>
<img src="../../Content/Images/my_computer.png" alt="Computer Name"/>
<li >#Html.ActionLink(linkText: str.ToString(),actionName: "Index",controllerName:"Customer",
routeValues:new{str = str.ToString()} , htmlAttributes: null)</li>
</ul>
}
}
public ActionResult Index(string conName)
{
Response.Write("con name = " + conName);
Response.End();
string con = ConfigurationManager.ConnectionStrings[conName].ConnectionString;
trakman_Entities db = new trakman_Entities(con);
return View(db.customers.ToList());
}
browser source code
<ul>
<img src="../../Content/Images/my_computer.png" alt="Computer Name"/>
<li >DefaultConnection</li>
</ul>
<ul>
<img src="../../Content/Images/my_computer.png" alt="Computer Name"/>
<li >trakman_Entities</li>
</ul>
<ul>
<img src="../../Content/Images/my_computer.png" alt="Computer Name"/>
<li >trakman_Entities1</li>
</ul>
You should provide correct parameter name in action link and there is no need to specify parameters here :)
#{
foreach (string str in ViewBag.ServerNames)
{
<ul>
<img src="../../Content/Images/my_computer.png" alt="Computer Name"/>
<li >#Html.ActionLink(str.ToString(),"Index","Customer",
new{conName= str.ToString()} , null)</li>
</ul>
}
If you are using MVC out of the box then it is only likely to work with a parameter called id that accepts an int. To make this work you need to explicitly define the parameter in the URL as below:
trakman_Entities

Load sets of records, 4 items at once

I've a question about loading sets of records for a 'slideshow' on my homepage. I'm using ASP.NET, LINQ and C#.
This is the markup of the repeater:
<asp:Repeater ID="rptSlideShow" runat="server">
<ItemTemplate>
<div class="slide">
<nav>
<ul>
<li>
<a href="#">
<img src="Content/Images/logo-artica.gif" alt="ARTICA PRODUCTIONS" width="154" height="82" /></a>
</li>
<li>
<a href="#">
<img src="Content/Images/logo-nead.gif" alt="NEAD A GOOD STORY" width="233" height="70" /></a>
</li>
<li>
<a href="#">
<img src="Content/Images/logo-garden.gif" alt="YOUR GARDEN" width="250" height="90" /></a>
</li>
<li>
<a href="#">
<img src="Content/Images/logo-bitmap.gif" alt="Bitmap" width="48" height="54" /></a>
</li>
</ul>
</nav>
</div>
</ItemTemplate>
</asp:Repeater>
Every 'slide' should contain 4 items. So I need to build sets with records that contain max. 4 records. If for example the last set contains only 2, because there are no more records, it needs to start over and get 2 items from the beginning.
Is this doable in C#?
Can someone help me with this?
at first you can load all the images in an array. then check the reminder by 4 whether reminder becomes zero to reorganize the images in another array. finally traverse the new array to show the slide.
you may get hint from below:
int[] arr;
// load all images
arr[0]="element0";
arr[1]="element1";
arr[2]="element2";
arr[3]="element3";
arr[4]="element4";
arr[5]="element5";
arr[6]="element6";
arr[7]="element7";
arr[8]="element8";
arr[9]="element9";
int newLength=0;
int count=0;
int reminder=0;
if(arr.length%4!=0){
reminder=(arr.length%4)
newLength=arr.length+reminder
}
int[] nArr=new int[newLength];
for(int i=0;i<arr.length;i++){
count++;
nArr[i]=arr[i];
if(i==arr.length-1){
int rem=nArr.length-arr.length;
for(int j=0;j<rem;j++){
nArr[count]=arr[j];
count++;
}
}
}
Hope this helps, thanks.
Skip and Take can help you out here.
Lets say you have all the elements in a variable called listOfElements
you could do something like this -
For the first page
var firstPageItems = listOfElements.Take(4);
For the n'th page
var nthPageItems = list.Skip(n*4).Take(4);

UL toggle working in FF and not in IE 7

I have an list that toggles with no problem in FF. I need this working IE for it to be production ready.
It seems (IE) to apply the js to the first #orderItem and the first #familiy only. The rest of the items in the list are ignored.
Any help would be great.
A piece of the HTML (large list):
<div class="classificationContainer">
<ul class="classification" id="orderUL">
<li id="orderItem" class="ordrheading">
<div class="order">
<a href="?nav=search_recherche&lang=en">
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="By Classification" id="OrdListImage" />
Apodiformes (Swifts and Hummingbirds)
</a>
</div>
<ul class="classification" id="FamilyList">
<li id="familiy">
<div class="family">
<a href="?nav=search_recherche&lang=en">
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="Family" id="FamListImage" />
Apodidae (Swifts)
</a>
</div>
<ul class="classification" id="SpiecesList">
<li>
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />
Chimney Swift (Chaetura pelagica)
</li>
</ul>
</li>
<li id="familiy">
<div class="family">
<a href="?nav=search_recherche&lang=en">
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="Family" id="FamListImage" />
Trochilidae (Hummingbirds)
</a>
</div>
<ul class="classification" id="SpiecesList">
<li>
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />
Ruby throated Hummingbird (Archilochus colubris)
</li>
<li>
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />
Rufous Hummingbird (Selasphorus rufus)
</li>
</ul>
</li>
</ul>
</li></ul></div>
I have the following jquery functions:
<script type="text/javascript">
$(document).ready(function () {
// toggle action for the order to familiy
$("li#orderItem").click(function (event) {
// toggle the image
var src = ($("#OrdListImage", this).attr("src") == "/images/node_closedc.gif")
? "/images/node_openc.gif"
: "/images/node_closedc.gif";
$("img#OrdListImage", this).attr("src", src);
//toggle the ul
$('ul#FamilyList', this).toggle($('ul#FamilyList', this).css('display') == 'none');
// stop all link actions
return false;
});
//toggle action from familiy to speices
$("li#familiy").click(function () {
// toggle the image
var src = ($("#FamListImage", this).attr("src") == "/images/node_closedc.gif")
? "/images/node_openc.gif"
: "/images/node_closedc.gif";
$("img#FamListImage", this).attr("src", src);
//toggle the ul
$('ul#SpiecesList', this).toggle($('ul#SpiecesList', this).css('display') == 'none');
// stop all link actions
return false;
});
});
Also check if id's are not repeated (there is only one #orderItem, only one #familiy and etc.). "id" attribute must be unique in html document, "class" can be repeated.
The toggle function provided by jQuery is not guaranteed to work. I lost the reference where I read this (was on jQuery's homepage). I encountered the same problem and (as suggested by jQuery) implemented my own toggle function. I'd suggest trying this, as it's not much work and could provide you a solution.

Categories

Resources