This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
change repeater li item class if first or last
Im working on a .net website which I've never worked with before.
I have the following that outputs 4 divs...
<asp:Repeater ID="RT_Ranges" runat="server">
<ItemTemplate>
<div class="item">
<h4>
<%# Eval("Category_Name")%></h4>
<asp:Image ID="Image1" ImageUrl='<%# Eval("Img") %>' runat="server" Height="92" Width="79" />
<p>
<%# Eval("des") %></p>
<asp:HyperLink ID="HL_More" NavigateUrl='<%# Eval("nav") %>' runat="server">View More</asp:HyperLink>
</div>
</ItemTemplate>
</asp:Repeater>
I want to add a class to the last DIV outputted from the above, is this possible and if so how would I do it?
You have your answer here
Make it like:
<asp:Repeater ID="RT_Ranges" runat="server">
<ItemTemplate>
<div class="<%# GetItemClass(Container.ItemIndex) %>">
<h4>
<%# Eval("Category_Name")%></h4>
<asp:Image ID="Image1" ImageUrl='<%# Eval("Img") %>' runat="server" Height="92" Width="79" />
<p>
<%# Eval("des") %></p>
<asp:HyperLink ID="HL_More" NavigateUrl='<%# Eval("nav") %>' runat="server">View More</asp:HyperLink>
</div>
</ItemTemplate>
</asp:Repeater>
and on your code-behind:
protected string GetItemClass(int itemIndex)
{
if (itemIndex == this.ItemCount - 1)
return "CSS_for_last_item";
}
You can do it on the server:
in code behind after data is bound
or on the client:
using pure CSS (see :last-child selector)
using script (see jQuery :last-child selector)
You can't do it. At least this is not easy.
If you need this class for styling reasons then use the :last-child pseudoclass instead and if you need this in javascript then there are other methods of getting the last child.
You could use a Panel instead (which is rendered as div). Then you can use this code to get the last item and find the panel:
RepeaterItem lastRepeaterItem = RT_Ranges.Items[RT_Ranges.Items.Count - 1];
Panel lastPanel = (Panel)lastRepeaterItem.FindControl("PanelID");
lastPanel.CssClass = "yourclass";
Change class attribute value as follows,
<div class="<%# GetItemClass(Container.ItemIndex) %>">
And create GetItemClass method in code behid,
protected string GetItemClass(int itemIndex)
{
if (itemIndex == this.ItemCount - 1)
return "last";
else
return "other";
}
Also refer
Change repeater li item class if first or last
<asp:Repeater ID="RT_Ranges" runat="server">
<ItemTemplate>
<div <%# (Container.DataItemIndex != 0 && (Container.DataItemIndex+1) % 4 == 0) ? #"class='myClass'" : #"class='item'" %>>
<h4>
<%# Eval("Category_Name")%></h4>
<asp:Image ID="Image1" ImageUrl='<%# Eval("Img") %>' runat="server" Height="92" Width="79" />
<p>
<%# Eval("des") %></p>
<asp:HyperLink ID="HL_More" NavigateUrl='<%# Eval("nav") %>' runat="server">View More</asp:HyperLink>
</div>
</ItemTemplate>
</asp:Repeater>
Or using jQuery:
$("table.RT_Ranges div:last").attr("class", "last");
Related
As you can see I have TextBox in the ItemTemplate. What I want to do is: I want to use TxtUrunID in database code in default.aspx.cs but I can not find TxtUrunID. What can I do?
<asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource2">
<ItemTemplate>
<li class="<%#Eval("urunkategoriadi") %>">
<figure>
<div class="gallery-img"><asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"><img src="<%#Eval("urunresmi") %>" alt="" /></asp:LinkButton></div>
<figcaption>
<asp:TextBox ID="TxtUrunID" runat="server" CssClass="form-control" Text='<%#Eval("urunid") %>' Visible="false"></asp:TextBox>
<h3><%#Eval("urunadi") %></h3>
<p>Ürün hakkında detaylı bilgi için tıklayınız.</p>
</figcaption>
</figure>
</li>
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:aytasarimConnectionString %>" SelectCommand="SELECT [urunid], [urunadi], [urunkategoriadi], [urunresmi] FROM [urun]"></asp:SqlDataSource>
default.aspx.cs page and my SQL code (SELECT code) is here:
I guess you can't access the textbox because it's inside the repeater. That means you have more than one textbox.
You may be able to access it with code like this:
foreach (RepeaterItem item in Repeater2.Items)
{
TextBox txtName= (TextBox)item.FindControl("TxtUrunID");
if(txtName!=null)
{
//do something with txtName.Text
}
}
I have a aspx page called bookscategory.aspx with this markup:
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<p>Books list</p>
</HeaderTemplate>
<ItemTemplate>
<h3><asp:Literal ID="Literal1" runat="server" Text='<%# Eval("Category") %>'></asp:Literal></h3>
<asp:Repeater ID="Repeater1" runat="server" DataSource='<%# Eval("Reviews") %>' ItemType="ELibraryModel.Review">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" Text='<%# Item.Title%>' NavigateUrl='<%# "../books/bookdetails.aspx?bookId=" + Item.Id.ToString() %>'>
</asp:HyperLink><br />
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
Code behind:
using (ELibraryEntities entities = new ELibraryEntities())
{
var allbooks = from books in entities.Books.Include("Reviews")
orderby books.Category
select new { books.Category, books.Reviews};
Repeater1.DataSource = allbooks;
Repeater1.DataBind();
}
Now on my Default.aspx page I have a book image:
<div class="prod_img">
<img src="../Images/asp.net_image.jpg" alt="" title="" border="0" /></a>
</div>
<div class="box_center">
<div class="prod_title">ASP.NET Book</div>
<p class="details">ASP.NET Book.</p>
- read more -
<div class="clear"></div>
</div>
Finally, when I click on this image I want to navigate to that exact review:
NavigateUrl='<%# "../books/bookdetails.aspx?ReviewId=" + Item.Id.ToString()
Everything works fine with asp:HyperLink-s but instead I want to use images.
I'm reading Beginning ASP.NET 4.5 in C# and VB and here you can see all reviews http://aspnet45.planetwrox.com/Reviews/All.aspx. I want to use Images instead HyperLinks.
HyperLink control already provides this capabilty - it has ImageUrl property, and when this is set, HyperLink appears as an image:
<asp:HyperLink runat="server" ID="HyperLink1"
NavigateUrl='<%# "../books/bookdetails.aspx?ReviewId=" + Item.Id.ToString() %>'
ImageUrl="~/url/to/image" />
I have a webform that contains a listview like this:
<asp:ListView ID="SlidesListView" runat="server" OnItemCommand="SlidesListView_ItemCommand">
<LayoutTemplate>
<span runat="server" id="itemPlaceholder" style="display: inline-block" />
</LayoutTemplate>
<ItemTemplate>
<div class="SlideDiv">
<div>
<asp:ImageButton ID="ChangeDescriptionImageButton" runat="server" ImageUrl="~/Image/Change.png" CommandArgument="<%# Eval("ID") %>" CommandName="Change" AlternateText="Change" ToolTip="Change" />
<asp:Image ID="Image1" runat="server" CssClass="MiniSliderPic" ImageUrl='<%#Eval("ImagePath") %>' AlternateText='<%#Eval("Description") %>' ToolTip='<%#Eval("Description") %>' />
<p><%#Eval("Description").ToString().Replace(Environment.NewLine, "<br/>").Replace("\n", "<br />") %></p>
</div>
</div>
</span>
</ItemTemplate>
</asp:ListView>
and codebehind:
protected void SlidesListView_ItemCommand(object sender, ListViewCommandEventArgs e)
{
int ID = 0;
switch (e.CommandName)
{
case "Change":
ID = Convert.ToInt32(e.CommandArgument.ToString());
break;
}
}
but when I try to open this webform , I face this error:
An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.
the server tag is not well formed
and asp:ImageButton tag get red.why?
Change this:
CommandArgument="<%# Eval("ID") %>"
To this:
CommandArgument='<%# Eval("ID") %>'
BTW, I don't think you can use imagebutton this way. It will fire it's won OnCommand rather than ListView's ItemCommand. Consider using a linkbutton with image inside it.
<asp:LinkButton ID="ChangeDescriptionLinkButton" runat="server"
CommandName="Change"
CommandArgument='<%# Eval("ID") %>' >
<img src="~/Image/Change.png" alt="Change" />Change
</asp:LinkButton>
In an asp.net application, I have the follow code in the aspx page:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<% foreach (var questionPaper in QuestionPapers) { %>
<div style="border-bottom: 1px solid; padding-bottom:20px">
<%= questionPaper.University %><br/>
<%= questionPaper.CourseName %>: <%= questionPaper.CourseCode %><br/>
<%= questionPaper.Type %><br/>
<%= questionPaper.Year %><br/>
<asp:Button ID="View_Paper" runat="server" OnClick="ViewPaper" Text="View Paper"/>
</div>
<% } %>
</asp:Content>
I want to pass questionPaper.ID back to the ViewPaper() event handler on the server side, how do I do that?
public void ViewPaper(object sender, EventArgs e)
{
}
My recommendation is to use a Repeater or a ListView control
Use a Repeater if the data will be used as read-only
Use a ListView if you want to page your results and/or allow the end user to perform CRUD operation over your data
For example, your code would look like this when using a Repeater and an ObjectDataSource controls:
ASPX
<asp:ObjectDataSource ID="ods" runat="server"
SelectMethod="GetQuestionPapers"
TypeName="Your_Namespace.PapersRepository">
</asp:ObjectDataSource>
<asp:Repeater runat="server" DataSourceID="ods" ID="r" OnItemCommand="r_ItemCommand">
<ItemTemplate>
<div style="border-bottom: 1px solid; padding-bottom:20px">
<asp:HiddenField runat="server" ID="paperID" Value='<%# Eval("PaperID") %>'/>
<asp:Label runat="server" ID="university" Text='<%# Eval("University") %>'/><br />
<asp:Label runat="server" ID="courseName" Text='<%# Eval("CourseName") %>'/>:<asp:Label runat="server" ID="courseCode " Text='<%# Eval("CourseCode ") %>'/><br />
<asp:Label runat="server" ID="paperType" Text='<%# Eval("Type") %>' /><br />
<asp:Label runat="server" ID="year" Text='<%# Eval("Year") %>' /><br />
<asp:Button ID="View_Paper" runat="server" Text="View Paper" CommandName="ViewPaperCommand"
/>
</div>
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:Repeater>
ASPX code behind
protected void r_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
switch (e.CommandName)
{
case "ViewPaperCommand":
var hidden = e.Item.FindControl("paperID") as HiddenField;
var myPaperID = hidden.Value;
break;
}
}
Papers repository class
namespace Your_Namespace
{
public class PapersRepository
{
public IEnumerable < QuestionPaper > GetQuestionPapers()
{
return QuestionPapers.AsEnumerable();
}
}
}
You could bind it to a control and then reference that control directly?
I know you have multiple questions papers being output, so that in itself is the issue. It's been a while since I have used webforms, but could you not use a repeater control which would give you a row context within which you could get the specific question paper id you are looking for?
Use a repeater. That kind of old skool ASP classic code has no place in ASP.Net projects. Here's an example: http://www.dotnetcurry.com/ShowArticle.aspx?ID=663
It is possible to customise a repeater to make a lightweight DataGrid or ListView equivalent too.
i to get the clientid of the control which is placed inside the Edit item template of the gridview in javascript without going to the server side code..
<asp:TemplateField HeaderText="FromDate" SortExpression="FromDate">
<ItemTemplate>
<asp:Label ID="FromDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"FromDate")).ToShortDateString()%>'></asp:Label>
<asp:HiddenField ID="ID" runat="server" Value='<%#Eval("ID") %>' />
<asp:HiddenField ID="ApproveLeaveID" runat="server" Value='<%#Eval("ApproveLeaveID") %>' />
<asp:HiddenField ID="hidLevel3" runat="server" Value='<%#Eval("Level3ManagerACENumber") %>' />
</ItemTemplate>
<EditItemTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="txtFDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"FromDate")).ToShortDateString()%>'>
</asp:TextBox>
<asp:HiddenField ID="ID" runat="server" Value='<%#Eval("ID") %>' />
<asp:HiddenField ID="ApproveLeaveID" runat="server" Value='<%#Eval("ApproveLeaveID") %>' />
<asp:HiddenField ID="hidLevel3" runat="server" Value='<%#Eval("Level3ManagerACENumber") %>' />
</td>
<td>
<a onclick="showCalendarControl(3,<%# Container.ItemIndex %>)">
<img id="img3" runat="server" alt="Clock" src="../Images/clock_add.png" style="border: none" /></a>
</td>
</tr>
</table>
</EditItemTemplate>
<ItemStyle HorizontalAlign="Left" />
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="ToDate" SortExpression="ToDate">
<ItemTemplate>
<asp:Label ID="ToDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"ToDate")).ToShortDateString()%>'>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="txtTDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"ToDate")).ToShortDateString()%>'>
</asp:TextBox>
</td>
<td>
<a onclick="showCalendarControl(4,<%# Container.ItemIndex %>)">
<img id="img4" runat="server" alt="Clock" src="../Images/clock_add.png" style="border: none" /></a>
</td>
</tr>
</table>
</EditItemTemplate>
<ItemStyle HorizontalAlign="Left" />
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
This is my java script:
function showCalendarControl(ControlNo,index) {
var textField;
if(ControlNo==1)
{
textField=document.getElementById('<%=txtFromDate.ClientID%>');
}
else
{
textField=document.getElementById('<%=txtToDate.ClientID%>');
}
if(ControlNo==3)
{
textField=document.getElementsByClassName('txtFDate')[index];
}
if(ControlNo==4)
{
textField=document.getElementsByClassName('txtTDate')[index];
}
calendarControl.show(textField);
}
first two textbox(txtFromDate,txtToDate) is for the not in the grid control...
You can fetch the elements in the ItemDataBound event of the grid (using FindControl), and then pass the ClientID of the textbox as a parameter to showCalendarControl:
TextBox txtFDate = e.Item.FindControl("txtFDate") as TextBox;
TextBox txtTDate = e.Item.FindControl("txtTDate") as TextBox;
HtmlAnchor link = e.Item.FindControl("aLink") as HtmlAnchor;
if (txtTDate != null && txtFDate != null && link != null)
{
link.Attributes.Add("onclick", String.Format("showCalendarControl({0}, '{1}', '{2}')", 4, txtFDate.ClientID, txtTDate.ClientID);
}
(you'll also need to add an ID and a runat="server" to your link. I'm also assuming txtFDate is declared in your EditTemplate although it's not there. The ControlNo parameter could be a data key instead of a constant as in the example, it's not really clear what it is)
Then, in your function, use the clientID parameters to get the textboxes:
function showCalendarControl(ControlNo, txtFDateClientID, txtTDateClientID) {
var textField;
if(ControlNo==3)
{
textField=document.getElementById(txtFDateClientID);
}
if(ControlNo==4)
{
textField=document.getElementById(txtTDateClientID);
}
calendarControl.show(textField);
}
The problem is that every control should have unique server ID. So server side controls which are placed inside template are rendered multiple times with different auto generated ids based on ID you've specified in the template. You can easily see it if you will have a look on the generated html. Therefore your js code is accessing only the html element with hardcoded id. As I guess it is placed in the first row.
Simple solution is to describe your text box in a following way
<asp:TextBox ID="txtTDate" runat="server" CssClass="txtTDate" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"ToDate")).ToShortDateString()%>'>
</asp:TextBox>
Then modify the js function in the following way :
function showCalendarControl(ControlNo, index) {
var textField;
if(ControlNo==3)
{
textField=document.getElementsByClassName('txtFDate')[index];
}
if(ControlNo==4)
{
textField=document.getElementsByClassName('txtTDate')[index];
}
calendarControl.show(textField);
}
And modify your link as the following :
<a onclick="showCalendarControl(4, <%# Container.DataItemIndex %>)">
Updated the answer
DataItemContainer has DataItemIndex property which has to be used in this case.