I am developing a simple message board in ASP.NET Web forms and I list all posts in a ListView controller. My code looks something like this:
<ItemTemplate>
<article class="post">
<div class="postinfo">
<div class="postauthor">
Author: <strong><%# Eval("Author") %></strong>
</div>
<div class="postdate">
Date: <strong><%# Eval("PostDate", "{0:D}") %></strong>
</div>
<div class="postvotes">
<asp:Button class="postupvote" id='up<%# Eval("Id") %>' runat="server" />
<asp:Label ID="postvotescount_<%# Eval("Id") %>" class="postvotescount" runat="server" Text="<%# Eval("Votes") %> votes"></asp:Label>
<asp:Button class="postdownvote" id='down<%# Eval("Id") %>' runat="server" />
</div>
</div>
<div class="postcontent"><%# Eval("Text") %></div>
</article>
</ItemTemplate>
My problem is the voting functionality. I want to have css id properties, containing the unique database id of the post. That way I will know the Id of the post, it was voted for. So is this possible and if not, how can I achieve this?
Thanks!
You could use ClientIdMode and set it to predictable
http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode.aspx
<asp:ListView ID="ListView1"
ClientIDMode="Predictable"
ClientIDRowSuffix="ProductID"
DataSourceID="XmlDataSource1" runat="server" >
<ItemTemplate>
</ItemTemplate>
</asp:ListView>
This assumes you are using .Net 4.0 or above.
Related
I am still new in asp.net c# and want to display a listview with 2 items in a row. However, the listview is not displayed with 2 items in a row even though I use GroupItemCount. Can anyone tell me how to solve it?
Thank you in advance.
<asp:ListView ID="lvClientFacility" runat="server" DataSourceID="SqlDataSource1" DataKeyName="facility_id" GroupItemCount="2" GroupPlaceholderID="groupPlaceholder1" ItemPlaceholderID="itemPlaceholder1">
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="groupPlaceholder1" runat="server" />
</div>
</LayoutTemplate>
<GroupTemplate>
<div>
<asp:PlaceHolder ID="itemPlaceholder1" runat="server" />
</div>
</GroupTemplate>
<ItemTemplate>
<a class="facility" href="clientReservation.aspx?Id=<%# Eval("facility_id")%>">
<asp:Image ID="Image1" runat="server" Height="200px" Width="250px" ImageUrl='<%#"data:img/jpg;base64," + Convert.ToBase64String((byte[])Eval("facility_image"))%>' />
<div class="facilityName"><%# Eval("facility_name")%></div>
<asp:LinkButton ID="LinkButton1" PostBackUrl= '<%# "clientReservation.aspx?facility_id=" + Eval("facility_id") %>' runat="server" Text="Book Now"/>
<div class="ClientFacilityDescription"><%# Eval("facility_description")%></div>
</a>
</ItemTemplate>
</asp:ListView>
I am using Datalist and bind some information on it, but my Datalist is not showing my image.
Here is My Aspx Code:
<asp:DataList ID="datalistnewsrelease" runat="server" RepeatColumns="4" BorderColor="WhiteSmoke"
RepeatDirection="Vertical" RepeatLayout="Flow" Width="100%" OnItemCommand="datalistnews_ItemCommand">
<ItemTemplate>
<div class="newsbox m5">
<p class="black">
<asp:Label ID="lbldate" runat="server" class="b red" Text='<%#Eval("NewsReleaseDate") %>'></asp:Label>
<asp:Label ID="lblmonth" runat="server" class="b red" Text='<%#Eval("NesReleaseMonth") %>'></asp:Label>
<asp:Label ID="lblyear" runat="server" class="b red" Text='<%#Eval("NewsReleaseYear") %>'></asp:Label>
<br>
<asp:Label ID="lbltitle" runat="server" class="b blue" Text='<%#Eval("NewsReleaseTittle") %>'></asp:Label>
<a href="<%#Eval("NewsReleaseImage")%>" rel="gallery">
<img src="<%#Eval("NewsReleaseImage")%>" width="88" height="62" class="fr ml8" alt="">
</a>
<asp:ImageButton ID="NewsRelease" runat="server" Style="float: right;" img src="images/read.png"
CommandArgument='<%#Eval("NewReleaseId")%>' CommandName="View" />
</p>
<div class="cb pb5">
</div>
</div>
</ItemTemplate>
</asp:DataList>`
My code is similar to a Gridview I am binding the DataList to, but only that the image is not showing up.
Could you please share the value coming to "NewsReleaseImage" .
Is it plain image file name or relative path ? If it's plain file name then append relative your paths in ItemBound, if its fixed then you can append directly like below
src="/Images/<%#Eval("NewsReleaseImage")%>"
I suggest you to view the generated HTML and see the generated src attribute.
In asp.net C# webform Have a list view with one button after binding it convert to many buttons dynamically want to highlight selected button
<asp:ListView ID="ListViewCompanyServicesList" runat="server" ItemPlaceholderID="itemPlaceHolder" OnItemCommand="ListViewCompanyServicesList_ItemCommand">
<LayoutTemplate>
<div id="itemPlaceHolder" runat="server" style="margin-bottom: 0px;">
</div>
</LayoutTemplate>
<ItemTemplate>
<asp:LinkButton ID="btnTags" runat="server" Text='<%# Eval("Service") %>' CommandName="SelectService" CommandArgument='<%# Eval("ServiceId") %>' CssClass="label label-default" Style="display: inline-block" OnClick="btnTags_Click" />
</ItemTemplate>
<EmptyDataTemplate>
<div class="promote_contentBox2">
<p class="well" style="font-size: 80%;">No record Found</p>
</div>
</EmptyDataTemplate>
</asp:ListView>
You can change the css of the button that has been clicked.
btnTags.CssClass="your custom class";
I need to find a way to figure out which checkboxes are clicked, and which ones aren't. Any ideas?
I couldn't use checkbox server controls because I needed the sames to reflect the database ID number.
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate>
<asp:Label ID="lblHeader" runat="server" Text="Extra Cost Included Price Quantity" Font-Size="X-Small" Font-Bold="True"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id='cb<%# Eval("ID") %>'/> <input type="checkbox" id='cb<%# Eval("ID") %>inc'/>
<div style="display:inline-block;width:300px;"><asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' /></div>
<div style="display:inline-block;width:80px;"><asp:Label ID="PriceLabel" runat="server" Text='<%# Convert.ToDecimal(Eval("Price")).ToString("C") %>' /></div>
<select id='ddl<%# Eval("ID") %>'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
</select>
<br />
</ItemTemplate>
</asp:DataList>
You can use JQuery to do that.
$("input:checked").each(function(data){
//Do your operations over here. to push the ids into an array.
});
I suppose you can also change the selector to check checkboxes inside a parent control.
Follow this link
I have a web page that has an asp:ListView and I am trying to figure out how to programmatically scroll to a certain item. Here is my aspx markup:
<asp:ListView ID="lvGlossary" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="lvGlossary_ItemDataBound">
<LayoutTemplate>
<div class="glossaryTitle">Glossary</div>
<div id="ItemPlaceholder" runat="server"></div>
<br />
</LayoutTemplate>
<ItemTemplate>
<div class="glossaryEntry">
<span class="glossaryWord">
<asp:Label ID="lbWord" runat="server" Text='<%# Bind("Word") %>' />:
</span>
<span class="glossaryDefinition">
<asp:Label ID="lbDefinition" runat="server" Text='<%# Bind("Definition") %>' />
</span>
<br />
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div class="glossaryEntryAlternating">
<span class="glossaryWord">
<asp:Label ID="lbWord" runat="server" Text='<%# Bind("Word") %>' />:
</span>
<span class="glossaryDefinition">
<asp:Label ID="lbDefinition" runat="server" Text='<%# Bind("Definition") %>' />
</span>
<br />
</div>
</AlternatingItemTemplate>
</asp:ListView>
In my c# code behind I am populating a text box with text and when the user selects a word I want to automatically scroll to the word in the listview so it is visible. It most likely needs to be done client side, so I think I need some javascript to do this. Can anyone point me to an example of how to do this?
Any help is appreciated!!
Thank you
You could use an element's scrollIntoView javascript method:
document.getElementById('id').scrollIntoView(true);