Customized bulleted list items in ASP.NET - c#

I am just a beginner in ASP.NET. My question is simple, I wanna add list items dynamically from the code behind file and I want each item to have a text and couple of images as hyperlinks. The HTML sample should be like,
<ul>
<li>do foo <img src="some_image.png" /></li>
<li>do bar <img src="some_image.png" /></li>
...
</ul>
The number of items is dependent on the collection retrieved by the code behind file.
P.S. my code behind file is written in C#

The Repeater control is the simplest way to create a customized bulleted list, plus it gives you complete control over the HTML you generate. To use it, set up a template like this:
<ul>
<asp:Repeater runat="server" ID="ListRepeater">
<ItemTemplate>
<li>do foo <a href='#'><img src='<%# Eval("ImageSource") %>' /></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
Then in your code-behind (or declaratively in your markup, depending on your preference), set the repeater's data source and bind it:
void Page_Load(object sender, EventArgs e) {
// Some method you've defined to get your images
List<string> imageList = GetImages();
ListRepeater.DataSource = imageList;
ListRepeater.DataBind();
}
ASP.NET renders the template once for each item in your data source.
The Repeater control has more features than what I've shown here, but this should get you started. Good luck!
Edit: a year after writing this answer, I still think repeaters are the best option among server controls, but more and more I prefer foreach statements right in my .aspx templates:
<ul>
<% foreach(Image image in this.Images) { %>
<li>do foo <a href='#'><img src='<%= image.Source %>' /></a></li>
<% } %>
</ul>

Just use the Repeater control. Simply and easy. :)

ASP.Net BulletedList. MSDN

Related

where does the repeater get it data bound items?

I am having a look at databinding for the first time. I understand that the databound elements are put in the aspx file between <%# and %>. I also understand that a Repeater class is used. Like so:
<asp:Repeater ID="gvEvents" runat="server">
<ItemTemplate>
<div class="eventLogItem">
<h1><%# Eval("Event")%></h1>
<time><%# Eval("Timestamp")%></time><small><%# Eval("User")%></small>
<span class="nav">mouseover to view comments</span>
<textarea disabled="disabled"><%# Eval("Comments") %></textarea>
</div>
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:Repeater> `
But where would the aspx code get "Event", "Timestamp" and "User" and "Comments"? There does not seem to be something clear in the code-behind file. What am I missing?
In your code behind you would set the DataSource property of the repeater to some collection of object in which each of those objects contains a property named Event, Timestamp, User, and Comments. If you don't assign a data source, then there won't be anything for the repeater to display. If any of the bound items is missing one of those properties, you'll get an error at runtime.
Look in the code behind for gvEvents.DataSource = ... that is how the database is called for the databinding of the repeater class

ASP.NET WebForms C# if url is same as hyperlink add class

I have several links that look like the following:
<ul>
<li><asp:HyperLink ID="lnk1" NavigateUrl="~/section/sub-section/page1" runat="server">My Link</asp:HyperLink></li>
<li><asp:HyperLink ID="lnk2" NavigateUrl="~/section/sub-section/page2" runat="server">My Link</asp:HyperLink></li>
</ul>
What I want to do is in the code-behind is add a class of selected if the link url matches the url of the page that is currently being viewed.
How would I do this? Thanks
Place your hyperlinks in Panel like this
<asp:Panel id="pnl" runat="server">
<ul>
<li><asp:HyperLink ID="lnk1" NavigateUrl="~/section/sub-section/page1" runat="server">My Link</asp:HyperLink></li>
<li><asp:HyperLink ID="lnk2" NavigateUrl="~/section/sub-section/page2" runat="server">My Link</asp:HyperLink></li>
</ul>
</asp:Panel>
Then in your code behind iterate through each HyperLink control:
foreach (Control lnk in pnl.Controls)
{
if (lnk is HyperLink)
{
HyperLink href = (HyperLink)lnk;
if (Request.Url.AbsoluteUri.Equals(href.NavigateUrl))
href.Attributes.Add("class", "selected");
}
}
Hope this will help..
in the Page.Request object you do have properties to get the RawUrl of the current page, doing a loop in the Page.Controls you could find all your hyper links, you can then compare the NavigateUrl attributes with the page url and you are set.
Keep in mind that if you want to change an attribute of the server controls from code behind you better do it only in the Page_PreRender method because if you it before your changes could be overwritten...
You can get current file name on Master page
string currentpage = Request.FilePath;
It will be something like (you'll need to tweek the equality comparison):
if (Request.Url.AbsoluteUri == lnk1.NavigateUrl) { lnk1.Attributes.Add("class", "selected"); }

Name mangling for nested Master Pages

I use asp.net 4 and C#.
I have some nested Master Pages; I display in my Content Page a list of Links using a repeater.
This is a sample of code generated by ASP.NET as read in the Source code in the Browser.
As you can see the ID is very lengthy.
My question:
How can I have control on the ID generated, so I can chose another format much shorter?
Please keep in mind that I cannot get rid of Master Pages for my layout.
Thanks for your help on this!
<li>
<a id="ContentBody_ContentColumn2_latestArticle_uxRepeaterLatestArticles_uxLink_0" href="Category.aspx?CategoryId=8">AAAAA</a>
</li>
<li>
<a id="ContentBody_ContentColumn2_latestArticle_uxRepeaterLatestArticles_uxLink_1" href="Category.aspx?CategoryId=12">BBBBB</a>
</li>
I would like instead an ID like:
ID="CB_CC_LA_R_0"
ID="CB_CC_LA_R_1"
Useful article:
http://www.west-wind.com/weblog/posts/2009/Nov/07/ClientIDMode-in-ASPNET-40
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
http://beyondrelational.com/blogs/hima/archive/2010/07/16/all-about-client-id-mode-in-asp-net-4.aspx
Replace the asp:HyperLink with plain HTML anchor tag and use following markup for it:
<a id='CB_CC_LA_R_<%# Container.ItemIndex %>' href='<%# Eval("IndexPropertyName", "Category.aspx?CategoryId={0}") %>' >
<%# Eval("TextPopertyName") %>
</a>

ASP.NET Repeater Control linking to detailed view via QueryString parameters

I have a Repeater Control using an XMLDataSource to produce a list of movies (Movies.aspx). I need to link to a detailed page via query parameters like MovieDetails.aspx?movie=Matrix. What control do I use on the MovieDetails.aspx page to render a single movie, preferably using ItemTemplate and my own HTML.
My data source:
<asp:XmlDataSource ID="MoviesXmlDataSource" runat="server"
DataFile="~/Movies.xml" XPath="movies/movie"></asp:XmlDataSource>
I read the StackOverflow post Send string with QueryString in Repeater Control in ASP.net and list my items via a repeater like this:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="MoviesXmlDataSource">
<HeaderTemplate>
<ul class="productlist">
</HeaderTemplate>
<ItemTemplate>
<li>
<img src="Images/<%#Eval("image") %>" /><br/>
<b><%#Eval("title") %></b>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
On my MovieDetail.aspx I get the query string parameter as expected. However, I don't know how to fetch this item from my XMLDataSource and render it nicely. I figured out how to do this using GridView and then render a DetailsView depending on what you click in the grid, but it's so ugly. Repeater lets me specify my own HTML, but only for a list and not a single item.
The whole idea of the Repeater control is to display a set of data in a consistent manner. And the HTML you apply is actually for a single item in a list of items. And if i were you, i would be using a table to display the items. Title in one column, Image in another, details in another etc. Or you could use a
Title
--------
Image | Description Line 1
| Description Line 2
| Description Line 3
| Description Line 4
--------
Title
--------
Image | Description Line 1
| Description Line 2
| Description Line 3
| Description Line 4
--------
approach.
The only thing that is stopping you from getting a nice list of movies is the knowledge of HTML (which you already know) and creativity! Let your imagination run wild ;)
Lists
would
definitely
suck
in
this
scenario
:(
I just figured this out myself. I didn't realize that I could simply access my XMLDataSource from my code behind. I don't have to bind it to any control. Here is my solution:
Upon PageLoad, get the url parameter movie
Convert MoviesXMLDataSource to an XmlDocument
Fetch the single node where title matches my movie parameter
Fetch title, description and image link and store as variables
In the aspx, render normal HTML and insert <%=title %> and so on...
protected void Page_Load(object sender, EventArgs e)
{
this.movieTitle = Request["movie"];
string xpath = String.Format("/movies/movie[#title=\"{0}\"]", movieTitle);
XmlDocument doc = MoviesXmlDataSource.GetXmlDocument();
XmlNode node = doc.SelectSingleNode(xpath);
this.title = node.Attributes["title"].Value;
this.description = node.Attributes["description"].Value;
this.image = node.Attributes["image"].Value;
}
And in the aspx I render stuff as normal:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:XmlDataSource ID="MoviesXmlDataSource" runat="server"
DataFile="~/Movies.xml" XPath="movies/movie">
</asp:XmlDataSource>
<h1><%=title %></h1>
<p>
<img src="<%=image %>"/><br />
<%=description %>
</p>
</asp:Content>
In the end this was really simple. I just got confused by forcing myself to use a control.

filling <img src="?"> dynamically in asp.net c#

Hi would like to add img source path dynamically as shown in the snippet below, but giving error. I know img_src_path adding syntax is correct. Unfortunately I don't know the solution, need help.
Environment:
ASP.net, c#
<% string a[0]="image/hello.jpg;"
{
String img_src_path= a[0].ToString();%>
<li><a href='"<%#img_src_path%>"'><img src='"<%#img_src_path%>"' alt="" title=""/></a></li>
<%}%>
/Shashi
The problem is that your image tag does not have a runat="server" attribute (you will also need to add an ID in order to do this).
You also need to change your server tags like this:
FROM:
<%# ... %>
TO:
<%= ... %>
Also, the proper way to do this in ASP.Net would be to use the Image server control.
<asp:Image id="Image1" runat="server"></asp:Image>
Then, you would set the NavigateUrl property.
replace your code with this:
"=" instead of "#"
the solution
<li><a href='"<%=img_src_path%>"'><img src='"<%=img_src_path%>"' alt="" title=""/></a></li>
and if you want to edit image src form code behind
solution 2:
<li><a href='"<%=img_src_path%>"'><img src='"<%=img_src_path%>"' id="myImage" runat="server" alt="" title=""/></a></li>
edit image source form codebehind:
myImage.src = "imagePage";
The basic error we are trying to workout is Server tags cannot contain <% ... %> constructs.

Categories

Resources