Change text of button inside listview - asp.net

Sample ImageI have a listview in which a div has an image, a wishlist button and a add to cart button. When i click on wishlist the text does not change in listview_itemcode event. Below is code;
<asp:ListView ID="usrListShowImages" runat="server" OnItemCommand="usrListShowImages_ItemCommand">
<LayoutTemplate>
<table id="MainTablePlaceHolder" style="border:20px Orange; width:100%;" >
<tr style="border:5px orange;">
</tr>
<tr runat="server" id="itemPlaceHolder" style="border:2px Orange" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:HyperLink ID="hypLink" NavigateUrl="http://www.google.com" runat="server" >
<div class="wishlist">
<div class="growuser picUserShow">
<asp:Image ID="userShowImgz" ClientIDMode="Static"
ImageUrl='<%# ".." + Eval("ItemsPicUrl") %>' runat="server" />
</asp:HyperLink>
<div class="bottomDiv">
<asp:Button ID="btnWhishlist" Text="Wishlist" runat="server" CssClass="wishlistButton" CommandName="btnWhishlist" UseSubmitBehavior="false" />
</div>
</div>
</div>
<%-- <asp:Label ID="lblShow" runat="server" Text="Label"></asp:Label>--%>
</ContentTemplate>
</asp:UpdatePanel>
</tr>
</ItemTemplate>
Any help would be highly appreciated

Couldn't understand the question, but your tags are little messy and it might be crossing with the lines of the update panels. you should use table-tr-td-/td-/tr-/table in the correct order to create a proper HTML table.

There are two ways of changing text when button (control) is inside a listview (another control).
listview_ItemCommand event in code behind.
protected void usrListShowImages_ItemCommand(object sender, ListViewCommandEventArgs e)
{
if (e.CommandName == "btnWhishlist")
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
Button dbutton = (Button)e.Item.FindControl("btnWhishlist");
if (dbutton.Text == "Wishlist")
{
dbutton.Text = "NEW";
}
lblTest.Text = dbutton.ID.ToString() + "text = " + dbutton.Text;
}
}
}
If the text doesn't appear changed, in .aspx page, just put the button (Control) inside UpdatePanel.
JQuery
jQuery: Change button text on click
This post will also help.

Related

get the value of all the checked checkboxes on button click

I have created a table in my .aspx file that looks like this:
Here is the code that does this:
<!-- code for generating the "add selected sessions" button -->
<table>
<tr>
<td><strong>Individual Sessions</strong></td>
<td >
<div class="addButton" style="text-align: center;">
<asp:LinkButton ID="LinkButton2" runat="server" Text="Add Selected Sessions" OnClick="btnAddToCart_Click" />
</div>
</td>
</tr>
</table>
<!-- add all the sessions for the user to select -->
<asp:Repeater ID="rptFeesSession" runat="server">
<HeaderTemplate>
<table >
</HeaderTemplate>
<ItemTemplate>
<asp:HiddenField ID="hdnIsSession" runat="server" Value='<%#Eval("isSession")%>' />
<tr runat="server" visible='<%# Eval("isSession")%>'>
<td valign="top" colspan="2" style="position: relative;">
<asp:HyperLink CssClass="siteColorFG popBtn" ID="hlFeeType" runat="server" Text='<%#Eval("title")%>' NavigateUrl="javascript:;"/>
</td>
<td valign="top">
<div class="">
<asp:CheckBox ID="LinkButton3" CommandArgument='<%#Eval("id")%>'CssClass="checkB" OnClick="btnAddToCart_Click" runat="server" Text='<%#Eval("amount", "{0:C}")%>' />
</div>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
In my code behind file i want to capture all the checkboxes that have been checked and their respective CommandArgument values.
protected void btnAddToCart_Click(object sender, EventArgs e)
{
using (MyEntities db = new MyEntities())
{
//button was clicked. fetch all the check boxes from the rptFeesSession repeater into an int[]
}
}
There are several issues in your code (including conceptual / logic)
Item events in a Repeater should address item related things.
Click event handler has no access to CommandArgument attribute. Use Command instead.
Checkbox control doesn't support onclick event.
Checkbox events can run immediately only when there is AutoPostback="true".
If you want to refresh all repeater data on change of any checkbox then you can do something like this.
<asp:ScriptManager runat="server" ID="scriptMgr" /><%-- Strongly recommended --%>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Repeater ID="rptFeesSession" runat="server">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<asp:HiddenField ID="hdnIsSession" runat="server" Value='<%#Eval("isSession")%>' />
<tr runat="server" visible='<%# Eval("isSession")%>'>
<td colspan="2" style="position: relative;">
<asp:HyperLink CssClass="siteColorFG popBtn" ID="hlFeeType" runat="server" Text='<%#Eval("title")%>' NavigateUrl="javascript:;" />
</td>
<td>
<div class="">
<asp:HiddenField runat="server" ID="hidID" Value='<%#Eval("id") %>' />
<asp:CheckBox ID="LinkButton3"
AutoPostBack="true" CssClass="checkB"
OnCheckedChanged="LinkButton3_CheckedChanged" runat="server"
Text='<%#Eval("amount", "{0:C}")%>' />
</div>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
//.cs
protected void LinkButton3_CheckedChanged(object sender, EventArgs e)
{
decimal total = 0;
using (MyEntities db = new MyEntities())
{
foreach (RepeaterItem item in rptFeesSession.Items)
{
var chk = item.FindControl("LinkButton3") as CheckBox;
if(chk!=null && chk.Checked){
string id = (item.FindControl("hidID") as HiddenField).Value;
total += decimal.Parse(chk.Text);
//do stuff
}
}
}
}

Find div in repeater, and change it's style element

I have a repeater object that looks like the following
<asp:Repeater id="rptSpecialNotes" runat="server">
<headerTemplate><ol type="A"></HeaderTemplate>
<itemtemplate>
<li>
</li>
<asp:UpdatePanel ID="udpSpecialNotesRepeater" runat="server" UpdateMode="Always">
<ContentTemplate>
<div id="specialNotes" name='<%# Eval("itemId") %>' runat="server">
<asp:imagebutton runat="server" width="20" class="floatLeft" id="specialNotesItem" imageurl='<%# Eval("ImageUrl") %>' commandname="specialNotesImageChange" commandargument='<%# Eval("itemId") %>'></asp:imagebutton>
<span class="subject"><p><%# eval("Subject") %></p></span>
<br /><br />
<p><%# Eval("AgendaNote")%></p>
<br />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID ="followAlongControl" EventName ="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Repeater id="specialNotesAttachmentsRepeater" OnItemCommand="specialNotesAttachmentRepeater_ItemCommand" runat="server" datasource='<%# Container.DataItem.Row.GetChildRows("attachmentRelation") %>' >
<itemtemplate>
<br />
<a href='<%# Container.DataItem("attachmentPath") %>'><%# Container.DataItem("attachmentName") %></a>
</itemtemplate>
</asp:Repeater>
</itemtemplate>
<footerTemplate></ol></FooterTemplate>
</asp:Repeater>
I want to change the background color of the div 'specialNotes' depending on the imageurl of the image button. So if it's checked, the div would be grey, if not, then i'd leave it blank.
Is there a way to do this in the code-behind with VB?
You don't have to "Find" the div after the page has loaded, you can do this as it is getting bound. I imagine that when you say "if it's checked" that you refer to the imagebutton acting as a checkbox, and you want to change the color depending on the location(path) of the image. So I would this in the div:
<div style='<%# doColor(Eval("ImageUrl")) %>'>
Content in the div
</div>
and then this in the code behind:
Public Function doColor(img As Object) As String
If img.ToString() = "MyPath" Then
Return "background-color:red"
Else
Return "background-color:green"
End If
End Function
that way if the ImageUrl equals "MyPath" the background of your div will be red, otherwise it will be green.
Add a runat="server" to your div tag. Then your code behind, you can access that div using:
udpSpecialNotesRepeater.FindControl("div")
on your DataBound event.
It is alot easier to do it in jQuery though. You can just grab id of the div $("#specialNotes") and use the .attr function to change its background.
can use:
Control divControl=e.Item.FindControl("divControl");

showing message box on control's modal popup extender

I have a control inside a page that has the following modal popup extender:
<asp:Panel ID="pnl_Completed" runat="server">
<asp:Image ID="exit_Completed" runat="server" ImageUrl="" />
<h3 style="text-align:center;">Completed</h3>
<asp:Panel ID="pnl_inner" runat="server">
<table style="width:100%;height:100%" cellpadding="5px">
<tr style="height:40px;">
<td valign="top">Comment: </td>
<td>
<telerik:RadTextBox ID="txt_CompletedComment" runat="server" TextMode="MultiLine" Rows="6" Width="400" Height="100"></telerik:RadTextBox>
</td>
</tr>
<tr style="height:40px;">
<td colspan="2" align="center"><asp:Button id="btn_SaveCompleted" runat="server" Text="Complete" OnClick="btn_SaveCompleted_Click" /></td>
</tr>
</table>
</asp:Panel>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender_Completed" runat="server" PopupControlID="pnl_Completed" CancelControlID="exit_Completed" TargetControlID="dummy_btn_Completed" >
</cc1:ModalPopupExtender>
<asp:Button id="dummy_btn_Completed" runat="server" CssClass="display_none" />
I want to show a messagebox on btn_SaveCompleted_Click event when the textbox is empty I have tried this:
If txt_CompletedComment.Text.Trim().Length = 0 Then
ScriptManager.RegisterStartupScript(Me, Me.GetType, "key", "alert('Please enter a comment.');", True)
End If
but this doesnt work it just hides the modal popup extender, with no errors. Am I doing it wrong? Is there any other way to show it?
Just use JavaScript, there a bunch of ways to do it here is one example:
<asp:Button id="btn_SaveCompleted" runat="server" Text="Complete"
OnClientClick="return ValidateTheTextbox();"OnClick="btn_SaveCompleted_Click" />
<script>
function ValidateTheTextbox()
{
var txtbox = document.getElementById('<%= txt_CompletedComment.ClientID %>');
if(txtbox.value=="")
{
alert('Please enter a comment.');
return false; //suppress the submit button
}
return true; //let the form submit
}
</script>

ASP.NET AJAX ModalPopupExtender - opening with wrong button

I am having trouble with the AJAX ModalPopupExtender control. What I am trying to do is click a button, trigger a postcode lookup using Yahoo API with the button click event, display this in an asp panel in the ShowModalDialog box, and then close the dialog. I also need a separate button on the page to submit information using a form that is completely separate from this.
I have set the target button up as follows:
<asp:Button ID="btnStockist" runat="server" BackColor="#2C3473" OnClick="btnStockist_Click" />
The modalpopup is as follows:
<ajax:ModalPopupExtender ID="mpeStockist" runat="server" okcontrolid="btnOkay" targetcontrolid="btnStockist" popupcontrolid="pnlDisplay"
popupdraghandlecontrolid="PopupHeader" drag="true" backgroundcssclass="ModalPopupBG" ></ajax:ModalPopupExtender>
What is actually happening is that when clicking the target button, the popup opens but the event does not trigger (no postcode lookup is done). However, clicking the separate, unrelated button on the same page DOES trigger the event, and the lookup works perfectly. I am able to close the dialog as normal. I have tried hiding the target button with CSS as a quick workaround, but the problem is that any other buttons on the page seem to trigger the lookup method and modalpopup no matter what their click event is programmed to do, and I need them to work separately.
In case it's of any use, the panel code is here:
<asp:Panel ID="pnlDisplay" style="display:none" runat="server">
<div class="PopupContainer">
<div class="PopupBody">
<div align="center">Local Suppliers</div>
<br /><br />
<asp:label ID="lblError" runat="server"></asp:label>
<asp:UpdatePanel ID="upAlternatives" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DataList ID="dlStockist_Select" runat="server">
<HeaderTemplate>
<table cellpadding="5" width="680">
<tr>
<td>Name</td>
<td>Address</td>
<td>Town/City</td>
<td>Miles (Approx)</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# DataBinder.Eval(Container.DataItem, "CNAM") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "CADD1") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "CADD3")%></td>
<td align="center"><%# DataBinder.Eval(Container.DataItem, "Distance")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:LinkButton ID="btnOkay" runat="server" visible="true" Text="Close" CommandName="Update" BorderColor="#FFFFFF" BackColor="#000000"
BorderWidth="3" BorderStyle="Double" ForeColor="White" Font-Size="13pt" style="cursor: pointer; padding: 1px 15px 1px 15px;
margin-top: 10px;" Font-Underline="False"></asp:LinkButton>
</div>
</div>
</asp:Panel>
Thanks in advance for the help
Add one more button as per below
<asp:Button Text="targetbutton" ID="tgtbtn" runat="server" Style="display: none" />
Set id of this button in targetcontrolid of modulpopup (because it can not be null)
and in click event of btnStockist
open your modulapopup by code
protected void btnStockist_Click(object sender, EventArgs e)
{
mpeStockist.Show();
}

How to Recognize the CommandName of a LinkButton Inside an ItemTemplate af a RadListBox

I added an itemtemplate to my radlistbox and also added one label and two linkbutton(s) in it ...
my radlistbox is like below :
<telerik:RadListBox ID="RadlbOfImageGroup" runat="server" DataKeyField="ID" DataSortField="Title"
DataSourceID="sdsImagesGroup" DataTextField="Title" DataValueField="ID" Skin="BlackByMe"
EnableEmbeddedSkins="False" Width="260px" Height="365px" EmptyMessage="no rec!"
AutoPostBack="True" OnSelectedIndexChanged="RadlbOfImageGroup_SelectedIndexChanged"
CausesValidation="False">
<ItemTemplate>
<table style="width: 100%;">
<tr style="width: 100%;">
<td style="width: 64%;">
<asp:Label ID="lblTitleOfIG" runat="server" CssClass="lbl_ListBox_IG_Title" Text='<%# Eval("Title") %>'></asp:Label>
</td>
<td style="width: 18%; text-align: center;">
<asp:LinkButton ID="lbEditIG" runat="server" CausesValidation="False" CommandName="Edit"
CssClass="lb_ListBox_IG" OnClick="lbEditIG_Click">Edit</asp:LinkButton>
</td>
<td style="width: 18%; text-align: center;">
<asp:LinkButton ID="lbDeleteIG" runat="server" CausesValidation="False" CommandName="Delete"
CssClass="lb_ListBox_IG" OnClick="lbDeleteIG_Click">Delete</asp:LinkButton>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:RadListBox>
My Problem is how can I check the CommandName of LinkButtons in code above when I click on them?
(We don't have access to these LinkButtons in CodeBehind)
I know we do not need CommandName for those LinkButtons / I Just want to know is it possible to read them from codebehind?
I'm not sure if this is a standard way of addressing this issue but it's what I use:
For Each item In RadlbOfImageGroup.Items
Dim editbutton As HtmlGenericControl = item.findcontrol("lbEditIG")
//Do something with editbutton.CommandName
Dim deletebutton As HtmlGenericControl = item.findcontrol("lbDeleteIG")
//Do something with deletebutton.CommandName
Next
The above example is in VB.Net but should translate fairly easily to C# if that's what you're using.
here is the code that has been introduced by telerik team :
protected void lbDeleteIG_Click(object sender, EventArgs e)
{
LinkButton btn = sender as LinkButton;
if (btn.CommandName=="Delete")
{
Response.Write("Deleted");
}
}

Resources