Showing Data in a specific format inside asp repeater - c#

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>

Related

Customize HTML output of DataList control of ASP.NET

How can I generate output of DataList control in the following format?
<ul id="container">
<li data-genre="cricket"> Cricket Sport </li>
<li data-genre="boxing"> Boxing Sport </li>
<li data-genre="Swimming"> Swimming Sport </li>
<li data-genre="Kite"> Kite Sport </li>
</ul>
Why I need to generates like this because of I need to apply following JQuery plugin
https://luis-almeida.github.io/filtrify/music.html
Following is DataList code. I am biding this List object on server side
<asp:DataList ID="dlSports" runat="server" RepeatColumns="6" CellSpacing="5" RepeatLayout="Table" >
<ItemTemplate>
<image> Image will display here</image>
<span><%# Eval("SportName") %></span>
</ItemTemplate>
</asp:DataList>
I am using DataList because I need to display data in tabular form like showed in https://luis-almeida.github.io/filtrify/music.html.
------- EDITED -----------
HTML output like this.
<table id="MainContent_dlSports" cellspacing="5" class="text-center" style="height:100%;width:100%;">
<tr>
<td>
<li>
<image> ....</image>
<span>Cricket Sport</span>
</li>
</td>
<td>
<li>
<image> ....</image>
<span>Boxing Sport</span>
</li>
</td>
<td>
<li>
<image> ....</image>
<span>Swimming Sport</span>
</li>
</td>
</tr>
.......
.......
.......
</table>

label does not exist in current context in asp.net

<div class="col-xs-12 col-sm-6">
<h4 class="text-center a_z_search">Registered Office</h4>
<ul class="a_cmppro_add">
<li>
<asp:Label ID="lblAddres" runat="server" Text=""></asp:Label></li>
<li>
<asp:Label ID="lblState" runat="server" Text=""></asp:Label></li>
<li>
<asp:Label ID="lblPhone" runat="server" Text=""></asp:Label></li>
<li>
<asp:Label ID="lblURL" runat="server" Text=""></asp:Label></li>
<li>
<asp:Label ID="lblEmail" runat="server" Text=""></asp:Label></li>
</ul>
</div>
In above code I used label controls when I build it giving errors label does not exist in current context in asp.net I analyse and removed designer also but doesn't solved this error please help me thank you in advance...

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?

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

Categories

Resources