I am hoping that someone can help shed some light on this issue I've been struggling over for the last couple of days. I have been using the AJAX Toolkit ModalPopupExtender outside of ListViews perfectly fine, but for some reason I can't seem to wrap my head around why this code is not working inside of a ListView item template.
Basically, what I am trying to achive is: a user is presented with some rows of data via the ListView in which each row displays a LinkButton with the text "Remove". I want the user to be able to click on this link, and a modal dialog box pop up and ask them if they are sure they want to do this. If they click the okay button, it should fire off an event and do the necessary database work and reload the page... if not, cancel the postback request and clear the dialog box.
With the code below, I have successuflly hooked into the link button via the targetid property of the ModalPopupExtender so the dialog does popup. However, the okay button does not fire off the event I've written (I've placed a breakpoint in the codebehind within the event, and it does not get touched). Also, the cancel button does not work as it normally would outside of the listview control.
I must be missing something fairly fundamental here, but I'm at a loss - any help would greatly be appreciated. I'm certainly open to alternative methods if this just isn't viable.
<ItemTemplate>
<tr>
<td align="center">
<asp:Label runat="server" ID="lblUserID" Text='<%# Eval("USERID") %>' Visible="false" />
<asp:LinkButton runat="server" ID="lnkRemoveUser" Text="Remove" />
<asp:Panel ID="removeUserModalPanel" runat="server">
<div class="popup">
<div class="loginTitleBar" id="Div1">
Remove User
</div>
<div class="popupBody">
<p>
Are you sure you want to remove this user?
</p>
</div>
<div class="popupControls">
<asp:Button id="btnRemoveUserOkay" runat="server" type="button" Text="Remove User"
onclick="btnRemoveUserOkay_Click" />
<input id="btnRemoveUserCancel" type="button" value="Cancel" />
</div>
</div>
</asp:Panel>
<asp:ModalPopupExtender
ID="removeUserModalPopupExtender"
runat="server"
BackgroundCssClass="ModalPopupBG"
CancelControlID="btnRemoveUserCancel"
TargetControlID="lnkRemoveUser"
PopupControlID="removeUserModalPanel"
drag="false" >
</asp:ModalPopupExtender>
</td>
<td>
<asp:LinkButton ID="lnkUserName" runat="server" Text='<%# Eval("USERNAME") %>' />
</td>
<td>
<asp:Label ID="lblFirstName" runat="server" Text='<%# Eval("FIRSTNAME") %>' />
</td>
<td>
<asp:Label ID="lblLastName" runat="server" Text='<%# Eval("LASTNAME") %>' />
</td>
<td>
<asp:Label ID="lblEmailAddress" runat="server" Text='<%# Eval("EMAILADDRESS") %>' />
</td>
</tr>
</ItemTemplate>
Finally I can make this works. It's a little tricky though. Here are the steps:
Move the panel, the button close and the modalpopupextender outside the listview
Create a HiddenField or whatever control and associate this with the TargetControlID of the ModalPopupExtender control.
In the button on the ListView handle the Click event, and in the code behind call directly to the ModalPopupExtender.Show() method, and voilá.
It is a little dirty indeed, but the ModalPopupExtender seems to override the click event of the listview button when it's associated with the control.
Seems like a problem with having the ModalPopupExtender on a databound repeated row.
Stupid idea #1 : Could you try hiding lnkRemoveUser until the row is selected - then, in the SelectionChanged event, highlight the row, display the button, and hook the button to the ModalPopupExtender?
Stupid idea #2 : Have a hidden button outside the ListView, and hook up your ModalPopupExtender to that. Then have your linkbutton call that button's onclick ().
Related
I am making some web app using ASP.net and for look of the site I am using Bootstrap. But I have this problem that I can't solve by googling
So this is the deal .. I have panel and inside I have simple textbox and button
<asp:Panel runat="server" ID="pnlCompany">
<div style="display: inline-flex; overflow: hidden; float: left">
<asp:TextBox ID="txtClient" runat="server" CssClass="text-primary"
Wrap="true" Width="300px" required=""></asp:TextBox>
<asp:Button ID="btnInsertClient" runat="server" OnClick="btnInsertClient_Click"
CssClass="btn btn-primary" data-target="#MainContent_pnlCompany_txtClient"
Text="Dodaj klijenta" />
</div>
</asp:Panel>
But my problem show up here ... Under that panel I have another panel, with Button (that works fine, it collapsing table at end of page), then I have FileUpload button and Button (btnUploadUsers) that is giving me hard time, idea of this button is to go with upload of file, but once i click it, it keeps validating textbox (txtClient) from above panel ... I am sure this button fire it's event "btn_UploadUsers_click" because once i enter data in textbox, program stop on my break point
<asp:Panel runat="server" ID="pnlImportUsers">
<div style="display: inline-flex; overflow: hidden; float: left">
<asp:Button ID="btnCompanyList" runat="server" class="btn btn-lg btn-primary"
data-target="#MainContent_pnlCompanyList" Text="Lista klijenata" />
<asp:FileUpload ID="fuUsersUpload" runat="server" Enabled="false"
CssClass="btn-group-vertical" />
<asp:Button ID="btnUploadUsers" runat="server" class="btn btn-lg btn-primary"
Text="Upload" OnClick="btnUploadUsers_Click" data-target="#MainContent_UsersId"
ValidationGroup="fuUsersUpload" />
</div>
</asp:Panel>
Let me know if I can do anything to describe this problem better, thank you
Thank you #Benni_mac_b for advice, but i figured out what was a problem, so I'll post answer in case anyone else be in this situation.
So with using Bootstrap css and js, as you can see 'required' on the form, it will always be check if has value on every post_back
<asp:TextBox ID="txtClient" runat="server" CssClass="text-primary"
Wrap="true" Width="300px" required=""></asp:TextBox>
So, as I didn't wanted my btnUploadUsers to do PostBack, simply adding
UseSubmitBehavior="false"
In my code snippet fixed my problem
I have an ASP.NET website and I have a forgot password page where the user enters their email address in a text box and when they click the button to retrieve password, the event runs as fine.
Only problem is if the user types in their email address and presses ENTER instead, it runs a search (I have a search bar at the top of the page) and so the result comes back as 'search query not found'. But this search bar at the top is on a different ASP.NET page.
So anyway, I want the event onclick to run when the user presses enter and not run a search query. Does anyone have any ideas? I've searched on this site but not really found the answer I need.
There are couple ways you can do this. If it is a webform and you have your textbox wrapped with an asp:panel you can do as below:
<asp:Panel ID="p" runat="server" DefaultButton="myButton">
<%-- Text boxes here --%>
<asp:Button ID="myButton" runat="server" />
</asp:Panel>
If its not a webform or you want to move away from that try below:
<asp:TextBox ID="TextBox1" runat="server" onkeypress="return EnterEvent(event)"></asp:TextBox>
<asp:Button ID="Button1" runat="server" style="display:none" Text="Button" />
function EnterEvent(e) {
if (e.keyCode == 13) {
__doPostBack('<%=Button1.UniqueId%>', "");
}
}
And in the codebehind fire your button click in the page load based on the parameters of the postback.
Specify the "defaultbutton" property to the ID of (event you want to fire).
You can specify the "defaultbutton" property at the Form level (in the form tag)
Or else you can define them at panel level in the tag.
The form level setting is overridden at the panel level setting.
The Event Handler for the specified button gets fired simulating a true submit button functionality.
<form id="sampleform" runat="server" defaultbutton="button1">
<div>
<asp:TextBox ID="textBox1" runat="server"></asp:TextBox>
<asp:Button ID="button2" runat="server" Text="Cancel" OnClick="Button2_Click" />
<asp:Button ID="button1" runat="server" Text="Ok" OnClick="button1_Click" />
<asp:Panel ID="panel1" runat="server" defaultbutton="Button5">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<asp:Button ID="Button5" runat="server" Text="Button5" OnClick="Button5_Click" />
</asp:Panel>
</div>
</form>
In this example, Button1 is the default button for the form (Type something in Textbox 1 and hit enter, button1_Click gets fired). But for "Panel 1", default button will be Button 5 (Type in Textbox3 or Textbox 5 and hit enter).
You can have any number of panels with different default button for each panel.
Adding an ASP Panel around the text box and button with the id of the button name as the property for DefaultButton was the best way to do this.
<asp:Panel ID="p" runat="server" DefaultButton="myButton">
<%-- Text boxes here --%>
<asp:Button ID="myButton" runat="server" />
</asp:Panel>
We using Ajax Accordion pane. We dynamically binding ajax accordion from data set. So we not sure how much pane wil be bind.
Now we added few textbox and 1 button in each accordion pane which is mandotory so we used required field validator.
The problem is when i click buton in first pane textbox in first pane showing "It is required" which is fine but even if i typed textbox in first pane. I am not able to save since textbox in remaining pane showing "It is required". Please guide me.
<cc1:Accordion ID="accRcvDetails" runat="server" SelectedIndex="-1" ContentCssClass="accordion-content" RequireOpenedPane="false" HeaderCssClass="accordion-header"
HeaderSelectedCssClass="accordionSelected" OnItemCommand="accRcvDetails_ItemCommand" OnItemDataBound="accRcvDetails_ItemDataBound">
<HeaderTemplate>
</HeaderTemplate>
<ContentTemplate>
<td class="searchlabel">
<asp:Label ID="lblNotes" runat="server" Text="Notes:"></asp:Label>
</td>
<td class="searchtext" colspan="3">
<asp:TextBox runat="server" ID="txtNotes" Width="100%" TextMode="MultiLine" Height="35px" />
<asp:RequiredFieldValidator ControlToValidate="txtNotes" Text="Note Field is Required" runat="server" />
</td>
<td>
<td style="text-align: right" colspan="8">
<asp:Button ID="btnSave" CssClass="searchbutton Accbtnsave" runat="server" CommandName="Save" Text="Save" />
</td>
</ContentTemplate>
</cc1:Accordion>
You need to mention ValidationGroup for every textbox and button, as you are binding the accordion at runtime, so need to bind ValidationGroup at runtime with some property that has unique/different value for every accordian. Lets say you are binding accordion with rows of Groups, you can mention groupId in ValidationGroup then. Your updated code must looks alike:
<asp:RequiredFieldValidator ControlToValidate="txtNotes" Text="Note Field is Required" runat="server" ValidationGroup='<%# Eval("GroupId") %>'/>
<asp:Button ID="btnSave" CssClass="searchbutton Accbtnsave" runat="server" CommandName="Save" Text="Save" ValidationGroup='<%# Eval("GroupId") %>'/>
This way each accordion has its own ValidationGroup and clicking on button will not fire the validators in other accordions
Master Page
<div id="header" style="height: 150px; width: 750px;">
<asp:Label ID="Label3" runat="server" Text="LoggedInUser:"></asp:Label>
<asp:Label ID="lblLoggedInUser" runat="server" Text=""></asp:Label>
</div>
<div id="leftMenu" class="leftmenu">
<br />
<asp:DropDownList ID="ddlFamilyMembers" runat="server"
style="height: 25px; width: 125px" DataTextField="FullName"
DataValueField="MembershipGen"
onselectedindexchanged="ddlFamilyMembers_SelectedIndexChanged"
AutoPostBack="True" >
</asp:DropDownList>
<br /><br />
<asp:Image ID="imageMember" class="space" runat="server" Height="150px" Width="125px" />
<br /><br /><br />
<asp:Label ID="Label1" runat="server" class="space" Text="MembershipID:"></asp:Label>
<asp:Label ID="lblMembershipID" runat="server" Text=""></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" class="space" Text="Name:"></asp:Label>
<asp:Label ID="lblMemberName" runat="server" Text=""></asp:Label>
<br /><br /><br />
<asp:LinkButton ID="lbInformation" class="space" runat="server" onclick="lbInformation_Click">Member Information</asp:LinkButton><br />
<asp:LinkButton ID="lbAddress" class="space" runat="server"
onclick="lbAddress_Click">Member Address</asp:LinkButton>
</div>
<div id="divRight" class="divright">
<asp:ContentPlaceHolder ID="CPHMain" runat="server">
</asp:ContentPlaceHolder>
</div>
I posted my masterpage code so you can better understand my issue. Since these controls are in my master page I needed to create public properties for all the controls in my masterpage to databind my content pages. Maybe I am approaching this wrong but this is how I was planning on achieving this.
ContentPage
Default.aspx page_load event would call my method to retrieve the data and set the dropdownlist, image, 2 label fields. On selected index change of dropdownlist it would grab the new values from another method and populate those controls accordingly.
To access these controls in my master page i read you can do it a couple of different ways one is to <%#MasterType VirtualPath="~/Member.Master" %> and then create a strongly typed connection. Or you could create a loosely type connection.
My problem with these ways as I am going to have over 15 content pages and I would hate to have to rebind the DropDownList every time one of the content pages is called. Also I would have to reinstantiate the controls in every method of my content pages which I assume I am doing this wrong.
Can someone give me some advice on what is the proper way to achieve this without so much repetitive code?
You've got the right idea, trying to decouple the parent from the child, but I think the way you want to do it may be clunky.
Assuming you can do this, what I'd do is as follows:
Make a public method BindFamilyMembers(string parameter) on the Master page's code-behind.
From the child page, pass necessary unique parameters to this BindFamilyMembers Master method.
This way you don't need to expose the controls themselves, you expose a method that modifies those controls based on parameters.
edit
You want to notify the child page that the DDL SelectedIndex has changed. This is a great case for custom events.
You can configure an event on the Master page that the child page listens for. When DDL.SelectedIndex changes, you can fire the custom event (and pass the selected information) via the custom event, and any child page that is listening can handle that event.
There are a lot of examples of custom events online. Here's one you can start with: http://www.marten-online.com/csharp/simple-custom-event-handling.html
I have several ImageButtons on the top of my page, then I have a textbox and button in the middle. If you type in the textbox then hit enter on the keyboard the browser follows the link of the first ImageButton instead of the submit button next to the textbox. I have ran into this in the pase and had to put the imagebuttons on the bottom of the page for it to work correctly, that is not an ok fix in this case. I tried setting UseSubmitBehavior="true" , but that does nothing. I tried putting the textbox and button in a separate DIV and a separate panel, didn't work either
TOP of the page
<div style="position:absolute; left: 70% ; top: 5%;">
<asp:ImageButton ID="imgFB" runat="server" ImageUrl="Images/facebook_icon.jpg" PostBackUrl="http://www.facebook.com/832586561" />
<asp:ImageButton ID="imgLI" runat="server" ImageUrl="Images/linkedin_logo.jpg" PostBackUrl="http://www.linkedin.com/pub/scott-selby/33/304/44a" />
<asp:ImageButton ID="imgCB" runat="server" ImageUrl="Images/careerbuilder_logo.jpg" PostBackUrl="http://www.careerbuilder.com" />
<asp:ImageButton ID="imgCP" runat="server" ImageUrl="Images/codeplex_logo.jpg" PostBackUrl="http://www.codeplex.com" />
</div>
Middle of Page
<div ID="formPanel" runat="server" style="position:absolute; top:235px;">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" UseSubmitBehavior="true" />
</div>
You may set the default button via <form/> attribute.
<form defaultbutton="btnChangeCity" id="form1" runat="server">
...
</form>
Or use Panel control to set default button.
<asp:Panel ID="Panel1" runat="server" DefaultButton="btnChangeCity">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" />
</asp:Panel>
You surround your controls with <div> which is a good idea, but to have it run at all you also need <form>. In case you just didn't include it, the submit button also has to have OnClick="sub" attribute.
Read more here.