Shading every other row in a VB.net Listview? - asp.net

I have been Googling this for about a day now, and every post I find is too old and Visual Studio doesn't recognize some pieces of code that people have posted. I have a dynamically populated Listview. I would really like every other line to be shaded for readability purposes, and just can't figure it out.
Everything I try to do messes with the Modal PopupExtender that I have inside of the Listview. It trys to shade the lines inside the PopUpBox too. This is one of the Listviews that I would like shaded.
<!-- Descriptions -->
<asp:TabPanel ID="tab2" runat="server" HeaderText="Descriptions">
<HeaderTemplate>Descriptions</HeaderTemplate>
<ContentTemplate>
<ul class="info">
<asp:ListView ID="lvDescriptions" runat="server" DataSourceID="dsMarketingDescriptions" DataKeyNames="MarketingID">
<ItemTemplate>
<li>
<asp:LinkButton ID="ViewDescriptionButton" runat="server"><%#Eval("MarketingTitle")%></asp:LinkButton>
<asp:Panel ID="ViewDescriptionPanel" runat="server" CssClass="DescModalPopup"> <div class="PopupHeader" id="PopupHeader">View Description
<asp:ImageButton ID="CancelDescriptionButton" runat="server" ImageUrl="../../images/exit.png" AlternateText="" Style="float:right;"/>
</div>
<asp:Label ID="Description" runat="server" style="padding:5px;"><%# Eval("MarketingData") %></asp:Label>
</asp:Panel>
<asp:ModalPopupExtender ID="ViewDescriptionModal" runat="server" BackgroundCssClass="modalBackground" DropShadow="false" DynamicServicePath="" Enabled="true" PopupControlID="ViewDescriptionPanel" TargetControlID="ViewDescriptionButton" CancelControlID="CancelDescriptionButton"></asp:ModalPopupExtender>
</li>
</ItemTemplate>
</asp:ListView>
</ul>
</ContentTemplate>
</asp:TabPanel>

Try using the AlternatingItemTemplate to specify a different background color for alternating items.
Are you trying to do something like this with the ModalPopupExtender?:
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
Panel pnl = e.Item.FindControl("Panel1") as Panel;
if (pnl != null)
{
pnl.BackColor = ListView1.Items.IndexOf(e.Item) % 2 == 1 ? Color.PeachPuff : Color.White;
}
}

Related

how to understand which rows selected in repeater?

I have a slideshow that images load from sql server.
here is my html code:
<!-- Elastislide Carousel -->
<ul id="Ul1" class="elastislide-list">
<asp:Repeater ID="Repeater2" runat="server">
<ItemTemplate>
<li>
<asp:Label ID="lbl" runat="server" Text='<%#Eval("IDMusic") %>' Visible="True"></asp:Label>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%#Eval("ImageUrl") %>' Width="250px" Height="250px" OnClick="ImageButton1_Click" />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<!-- End Elastislide Carousel -->
<br /><br />
</div>
</div>
Now when, I run Project and user click on one of the imageButtons, I want to understand what is he/she clicked? for example he/she click on second ImageButton, Then I want to save IDMusic into a session and use this session in another page but I don't know how can i get IDmusic user clicked on?
here is my code behind :
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
foreach (RepeaterItem item in Repeater2.Items)
{
Label lbl = (Label)item.FindControl("lbl");
if (lbl != null)
{
Session["selectedmusicID"] = lbl.Text;
}
}
Response.Redirect("music.aspx");
}
There is no easy way to do so while handling click on the image itself. However you can leverage ItemCommand event here, which is a repeater event. Basically when some control is clicked inside the repeater, it generates a command in repeater which you can handle, and you can have item-specific arguments for it.
To define a command and args:
<asp:ImageButton ID="ImageButton1" ... CommandName="Select" CommandArgument='<%#Eval("IDMusic") %>' />
Command name here is custom, choose whatever you like. Now subscribe to the event of the repeater:
<asp:Repeater ID="Repeater2" runat="server"
OnItemCommand="Repeater2_ItemCommand">
And to handle:
protected void Repeater2_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Select") //just in case you have more than one
{
e.CommandArgument //here is your ID
}
}

Reaching repeater item: The Logic

Here is my design page:
<asp:MultiView ID="mvProducts" runat="server" ActiveViewIndex="0">
<asp:View runat="server" ID="mvProducts1">
<asp:Repeater ID="rptDiscount" runat="server">
<ItemTemplate>
<div class="divProduct1">
<div class="divProductHeader">
<asp:Panel ID="pnlDiscount" runat="server" CssClass="divProductHeaderDiscount" Visible="true">
<div class="menuTextTopSpacer"></div>
<asp:Label ID="lblDiscount" runat="server" Text='<%#Eval("discount") %>'></asp:Label>
</asp:Panel>`
I just want to reach pnlDiscount item but I dont know how. I made a search but it just helped to increase my confusion.
Indeed, I want to learn the logic on finding a control in a repeater.
Use ItemDataBound on your reapter then use FindContol() to get to the Panel
protected void rptDiscount_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
Panel myPanel= e.Item.FindControl("pnlDiscount") as Panel;
//Do some work
}

Saving a comment from inside an updatepanel in a repeater

(Asp.net 4)
I have a blog where i use a repeater to show all the blog-articles and the comments to each blog. I'm trying to change how the users can post comments to the blog. I want to put the comments under each blog in an UpdatePanel, and when they write a comment and click on a save-button, i want to refresh the comments, so their new comment will show. But I'm having difficulties achieving this.
I've added the UpdatePanel in the ItemTemplate of the Repeater, and added the Textboxes and Button for saving the comment. Each UpdatePanel is placed in a with the id of the blog. But I don't know how to create the code for saving the comment for the correct blog-id, and then to refresh that UpdatePanel.
Code:
<asp:Repeater ID="RepeaterBlog" runat="server">
<ItemTemplate>
<article>
<% if (repeaterCounter == 0)
{
Response.Write("<header class=\"firstArticleInBlog\">");
}
else
{
Response.Write("<header class=\"normalArticle\">");
}
%>
<h2><%# Eval("article_header") %> <span class="date">
<time datetime="<%# GetPubDate(Eval("article_date")) %>"><%# FormatDate(Eval("article_date")) %></time></span></h2></header>
<p><%# Eval("article_content") %><p><br />
<div class="comments">
<div class="showhidecomments">
<!--<a class="iframe-comments" data-fancybox-type="iframe" href='WriteComments.aspx?BlogId=<%# DataBinder.Eval(Container, "DataItem.id") %>'>Skriv kommentar</a> | -->
Vis/Skriv kommentarer (<%# CountComments (DataBinder.Eval(Container, "DataItem.id")) %>) | <a href="javascript:void(0);" title="i<%# Eval("id") %>" >Skjul kommentarer</a>
</div>
<section>
<article>
<div id="i<%# Eval("id") %>" style="display: none;">
<asp:UpdatePanel ID="upPanel" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cmdSaveComment" EventName="Click" />
</Triggers>
<ContentTemplate>
<%# GetComments (DataBinder.Eval(Container, "DataItem.id")) %>
<asp:TextBox ID="txtName" runat="server" />
<asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" />
<asp:Button ID="cmdSaveComment" runat="server" OnClick="cmdSaveComment_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</article>
</section>
</div>
<% repeaterCounter++; %>
</article>
</ItemTemplate>
</asp:Repeater>
And in the code-behind:
protected void cmdSaveComment_Click(object sender, EventArgs e)
{
//simplified code:
string name = txtName.Text;
string comment = txtComment.Text;
int blogId = (int)(Eval("DataItem.id"));
dataHandler.NewComment(name, comment, blogId);
}
Am i at least close to something here, or am i completely on the wrong track?
You need to use the ItemCommand property for the repeater and the CommandName property for your button.
First declare the event name for the repeater and the button's command name in your aspx. Note the CommandName replaces the OnClick for your button. Also you give the button a command argument, this being the ID for the article record that the comment is for.
<asp:Repeater ID="RepeaterBlog" runat="server" OnItemCommand="RepeaterBlog_ItemCommand">
<asp:Button ID="cmdSaveComment" runat="server" CommandName="SaveComment" CommandArgument='<%# Eval("id")%>' />
Now add this in the code behind
void RepeaterBlog_ItemCommand(Object Sender, RepeaterCommandEventArgs e) {
if(e.CommandName == "SaveComment") {
string name = ((TextBox)e.Item.FindControl("txtName")).Text;
string comment = ((TextBox)e.Item.FindControl("txtComment")).Text;
dataHandler.NewComment(name, comment, e.CommandArgument);
}
}
That should get you started

asp.net dropdown tool tip not shown when modal popup is opened

I have a asp.net dropdown control to which tool tip has been added. It works fine on the mouse over. I also have a Modal Popup in that page. When I open and close the Modal Popup the tool tip in the drop are no more shown.
Below is my code.
<div class="col">
<div class="labelname required">
<asp:Label ID="lblsupplier" runat="server" Text="Supplier"></asp:Label>
</div>
<div class="labelvalue">
<asp:DropDownList ID="DdlSupplier" TabIndex="11" runat="server" AutoPostBack="true"
CausesValidation="false" OnSelectedIndexChanged="DdlSupplier_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="reqSupplier" runat="server" ControlToValidate="DdlSupplier"
ValidationGroup="SubmitGroupMain" InitialValue="0" ErrorMessage="Please Select Supplier Name"
SetFocusOnError="true" Display="None"></asp:RequiredFieldValidator>
<ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender7" runat="Server"
TargetControlID="reqSupplier" HighlightCssClass="validatorCalloutHighlight">
</ajaxToolkit:ValidatorCalloutExtender>
</div>
<asp:LinkButton runat="server" ID="lnkAddSupplier" CssClass="btnadd" ToolTip="New Supplier"
OnClick="lnkAddSupplier_Click"></asp:LinkButton>
<asp:Button runat="server" ID="popupshowAccount" Style="display: none" />
</div>
</div>
Code behind
foreach (ListItem item in DdlSupplier.Items)
{
item.Attributes.Add("title", item.Text);
}
DdlSupplier.Attributes.Add("onmouseover","this.title=this.options[this.selectedIndex].title");
Clicking on lnkAddSupplier opens up a popup. After closing the popup tool tip is not visible for the dropdown.
Please help on solving this issue.
Attributes won't be saved in Viewstate and that's why they will disappear across postbacks. Similar is the case with Custom Attributes.
That's why we have to use DropDownList Pre Render event to set attributes
protected void DropDownList1_PreRender(object sender, EventArgs e)
{
foreach (ListItem item in DropDownList1.Items)
item.Attributes.Add("title", "Something to test!!!!!!");
}

asp.net ajax like reorder list

I'm trying to create a draggable list to change the order some pictures are displayed in a product page. I wan't to be able to do this in the product edit page (same place where I add the pics and their description). So, when creating I have nothing inserted on the database and since the AJAX toolkit reorderlist only works with a datasource I was specifying the list as the source of the reorderlist and calling the databind method. In the item template of the reorder list I have a textbox to edit the pic description and a img that displays the photo. I can drag the items and the list gets reordered, however when I click save I can't get the updated text on the textbox and the order property on the picture doesn't get updated. I've tried manually getting the items in the reorderlist but they're always null even though the list shows 20 items the DataItem is empty. I've enabled viewstate and didn't help either.
Here's my code:
<ajaxToolkit:ReorderList ID="rdlPhotos" runat="server" SortOrderField="PhotoOrder" AllowReorder="true" PostBackOnReorder="true" ClientIDMode="AutoID" EnableViewState="true" ViewStateMode="Enabled">
<ItemTemplate>
<div>
<%--<eva:PhotoView ID="iPV" runat="server" Photo='<%# Container.DataItem %>' />--%>
<asp:Image ID="imgPhoto" runat="server" ImageUrl='<%# string.Format("http://eva-atelier.net/sparkle{0}", Eval("Path").ToString().Substring(1)) %>' Width="150" Height="150" />
<div class="formGrid">
<label class="formLabel">Title</label>
<asp:TextBox ID="txtTitle" runat="server" Text='<%#Bind("FileTitle") %>' />
<br />
<label class="formLabel">Description</label>
<asp:TextBox ID="txtDescription" runat="server" Text='<%#Bind("FileDescription") %>' />
<br />
</div>
<p>
<asp:Button ID="btnRemove" runat="server" Text="Remover" />
</p>
</div>
</ItemTemplate>
<ReorderTemplate>
<asp:Panel ID="pnlReorder" runat="server" />
</ReorderTemplate>
<DragHandleTemplate>
<div style="width:20px;height:20px;background-color:Red"></div>
</DragHandleTemplate>
</ajaxToolkit:ReorderList>
And below the C# code:
private void AddPhotosView()
{
if (_currentProduct.Photos != null && _currentProduct.Photos.Count > 0)
{
rdlPhotos.DataSource = _currentProduct.Photos;
rdlPhotos.DataBind();
}
}
I'm new to Asp.net I come from a large WPF background, sorry if I'm making basic question :)
Thanks
For updating order of ReorderList items add your handler for it's OnItemReorder event. In this case your handler may looks like this:
protected void ReorderHandler(object sender, ReorderListItemReorderEventArgs e)
{
var movedPhoto = _currentProduct.Photos[e.OldIndex];
_currentProduct.Photos.RemoveAt(e.OldIndex);
_currentProduct.Photos.Insert(e.NewIndex, movedPhoto);
_currentProduct.Photos.Save();
}
For updating FileTitle and FileDescription of single Photo it is easy to use OnUpdateCommand event of ReorderList and a button with attribute CommandName="Update" for each Photo.
And for updating all Photos at once just iterate through rdlPhotos.Items in next manner:
protected void SaveAllHandler(object sender, EventArgs e)
{
foreach (var riItem in rdlPhotos.Items)
{
var id = ((HiddenField)riItem.FindControl("itemID")).Value;
var title = ((TextBox)riItem.FindControl("txtTitle")).Text;
var description = ((TextBox)riItem.FindControl("txtDescription")).Text;
UpdatePhoto(id, title, description);
}
}
Remember that rdlPhotos.Items here are in initial order. And for identifying which Photo should be updated add hidden field with Photo.ID-value to ReorderList's ItemTemplate like this:
<asp:HiddenField runat="server" ID="itemID" Value='<%# Eval("ID") %>' />

Resources