in my project
i have
<asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click" />
enter code here
Admin - *If Neccesery
<asp:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="Panel1" TargetControlID="btnAdd"
BackgroundCssClass="modalBackground" runat="server">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" align="center" CssClass="modalPopup" runat="server">
<div class="body-reg-left">
<div class="body-top-reg">
<div class="he-reg">
<b>Admin </b>- *If Neccesery</div>
</div>
<table>
<tr>
<td>
<asp:Label ID="lblCategoryID" runat="server" Text="" CssClass="lbF"></asp:Label>
</td>
<td>
<asp:Label ID="lblstt" runat="server" Text=""></asp:Label>
</td>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Brand Name" CssClass="lbF"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtbrdName" runat="server"></asp:TextBox>
</td>
</tr>
</tr>
<tr>
<td>
<asp:Button ID="BtnBrdName" runat="server" Text="Add" Width="70px" OnClick="Button1_Click" />
<asp:Button ID="btncancel" runat="server" Text="Cancel" OnClick="btncancel_Click" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
if i click the btnAdd the value inside category textbox should go to database and popup the window .... but in my project the btnADD button's click event is not firing and modalpopup is working.... please give me a solution..
I've had the same problem, for some reason when you set a button as the TargetControlID of the modal popup it disables the Click event.
The way I overcame this issue was by placing an invisible/dummy Label control on the page and setting the TargetControlID property of the modal to this Label.Then in your btnAdd Click event get all the necessary values from the db and simply call the ModalPopupExtender1.Show() to display the modal:
ASPX:
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="AddClick" />
<asp:Label ID="dummyLabel" runat="server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="Panel1" TargetControlID="dummyLabel"
BackgroundCssClass="modalBackground" runat="server">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" align="center" CssClass="modalPopup" runat="server">
<div class="body-reg-left">
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Brand Name" CssClass="lbF"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtbrdName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="BtnBrdName" runat="server" Text="Add" Width="70px" OnClick="Add" />
<asp:Button ID="btncancel" runat="server" Text="Cancel" OnClick="Cancel" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</div> </div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</form>
Code behind:
protected void Add(object sender, EventArgs e)
{
//Add logic
}
protected void Cancel(object sender, EventArgs e)
{
//Cancel logic
}
protected void AddClick(object sender, EventArgs e)
{
txtbrdName.Text = "Some category"; //Populate the value as required
ModalPopupExtender1.Show();
}
Related
I have two panels Panel1 and panel2 when page loads, both panels are hidden. And I have a dropdown list, when I selct dropdown values the panel shoud be visible. Now its not visible as per my dropdown selection. My page load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Panel1.Visible = false;
Panel2.Visible = false;
}
}
Dropdown click function
protected void ddmode_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddmode.SelectedItem.Value == "4")
{
Panel1.Visible = true;
Panel2.Visible = false;
}
}
But now when I select dropdown with value 4 panel1 is not visible. My UI part
<tr>
<td align="left" class="style2">
Mode</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate >
<div class="input-prepend" title="Select Machine ID" data-rel="tooltip">
<asp:DropDownList ID="ddmode" runat="server" AutoPostBack="True"
onselectedindexchanged="ddmode_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="ddmode" ForeColor="Red">*
</asp:RequiredFieldValidator>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<asp:Panel ID="Panel1" runat="server">
<tr>
<td align="left" class="style2">
<asp:Label ID="lblfromdate" runat="server" Text="From Date"></asp:Label>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txtfromdate" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender2" TargetControlID ="txtfromdate"
Format="dd/MM/yyyy" runat="server">
</ajaxToolkit:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server"
ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtfromdate" ForeColor="Red">*</asp:RequiredFieldValidator>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:Label ID="lbltodate" runat="server" Text="To Date"></asp:Label>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel11" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txttodate" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender3" TargetControlID ="txttodate"
Format="dd/MM/yyyy" runat="server">
</ajaxToolkit:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server"
ErrorMessage="RequiredFieldValidator"
ControlToValidate="txttodate" ForeColor="Red">*</asp:RequiredFieldValidator>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<tr>
<td align="left" class="style2">
<asp:UpdatePanel ID="UpdatePanel14" runat="server">
<ContentTemplate>
<asp:Label ID="lbldept" runat="server" Text="From Department" ></asp:Label>
</ContentTemplate></asp:UpdatePanel>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel12" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txtfromdept" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:UpdatePanel ID="UpdatePanel15" runat="server"><ContentTemplate>
<asp:Label ID="lbltodept" runat="server" Text="To Deprtment" ></asp:Label>
</ContentTemplate></asp:UpdatePanel>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel13" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txttodept" ClientIDMode="Static" runat="server"
TextMode="SingleLine"></asp:TextBox>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
</asp:Panel>
In this case, it looks like your dropdownlist is doing a partial postback within updatepanel4 but Panel1 is not in an updatepanel so it can't be updated in a partial postback. Either remove all the updatePanels or place Panel1 in an update panel.
You need to place your panel inside the update panel for it to work. Controls outside update panel cannot work for events of controls inside the update panel.
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate >
<div class="input-prepend" title="Select Machine ID" data-rel="tooltip">
<asp:DropDownList ID="ddmode" runat="server" AutoPostBack="True"
onselectedindexchanged="ddmode_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="ddmode" ForeColor="Red">*
</asp:RequiredFieldValidator>
<asp:Panel ID="Panel1" runat="server">
....
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I have the following three dropdownlist and a button which gives a result based on the selected criterias:
<asp:DropDownList ID="slcLocation" runat="server" ClientIDMode="Static">
</asp:DropDownList>
<br />
<br /><br />
<asp:DropDownList ID="slcSpecialty" runat="server" ClientIDMode="Static">
</asp:DropDownList>
<br /><br />
<asp:DropDownList ID="slcGender" runat="server" ClientIDMode="Static">
<asp:ListItem Text="Any Gender" Value="" Selected="True" />
<asp:ListItem Text="Male" Value="1" />
<asp:ListItem Text="Female" Value="2" />
</asp:DropDownList>
<asp:Button ID="btnGoAll" Text="Search All" OnClick="btnGoAll_Click" runat="server" ClientIDMode="Static" />
The first two dropdownlist populates using code-behind function.
How can I allow the user to select all three options and hit the search button to display the result without refreshing the page?
I tried something like this:
<div style="width: 390px; margin: 0 auto;">
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:DropDownList AutoPostBack="True" ID="slcLocation" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br /><br />
<asp:DropDownList AutoPostBack="True" ID="slcSpecialty" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br /><br />
<asp:DropDownList AutoPostBack="True" ID="slcGender" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
<asp:ListItem Text="Any Gender" Value="" Selected="True" />
<asp:ListItem Text="Male" Value="1" />
<asp:ListItem Text="Female" Value="2" />
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="slcLocation" />
</Triggers>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="slcSpecialty" />
</Triggers>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="slcGender" />
</Triggers>
</asp:UpdatePanel>
</div>
<br /><br />
<div style="width: 390px; margin: 0 auto;">
<asp:HyperLink class="loginButton" style="padding: 10px; float: right;" runat="server" ID="aSearchSubmit" ClientIDMode="Static" OnClick="btnGoAll_Click" Text="Search" />
</div>
I update my Repeater with the data retrieved from the search:
<div style="width: 100%;">
<asp:Repeater runat="server" ID="rptContent">
<HeaderTemplate>
<table border="0" ID="tblInfo" style="background: #43A79A; width: 100%;" ClientIDMode="Static">
<tr>
<td>Physician Name</td>
<td>Image</td>
<td>Gender</td>
<td>Office1</td>
<td>Office2</td>
<td>Office3</td>
<td>Office4</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("Physician Name").ToString() %></td>
<td><img src="www.site.com/<%# Eval("Image").ToString() %>" /></td>
<td><%# Eval("Gender").ToString() %></td>
<td><%# Eval("Office1").ToString() %></td>
<td><%# Eval("Office2").ToString() %></td>
<td><%# Eval("Office3").ToString() %></td>
<td><%# Eval("Office4").ToString() %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
When I click on the button, nothing happens.
How can I resolve the issue?
I think what do you want is this.
You need set how updatePanel´s trigger the button.
The part of page what do you want update need to be inside the updatepanel.
The javascript will catch DropDownList changes, and after all three DropDownList were changed the postback will be raised like if you was clicked in button
aspx
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
var slcLocationSelect = false;
var slcSpecialtySelect = false;
var slcGenderSelect = false;
$(document).ready(function () {
$("#<%=slcLocation.ClientID %>").change(function () { changeDropDown(this) });
$("#<%=slcSpecialty.ClientID %>").change(function () { changeDropDown(this) });
$("#<%=slcGender.ClientID %>").change(function () { changeDropDown(this) });
});
function changeDropDown(sender) {
if ($(event.target).attr('id') == $("#<%=slcLocation.ClientID %>").attr('id')) {
slcLocationSelect = true;
}
if ($(event.target).attr('id') == $("#<%=slcSpecialty.ClientID %>").attr('id')) {
slcSpecialtySelect = true;
}
if ($(event.target).attr('id') == $("#<%=slcGender.ClientID %>").attr('id')) {
slcGenderSelect = true;
}
if (slcLocationSelect && slcSpecialtySelect && slcGenderSelect) {
slcLocationSelect = false;
slcSpecialtySelect = false;
slcGenderSelect = false;
__doPostBack("<%=LinkButton1.ClientID %>", "");
}
}
</script>
<div style="width: 390px; margin: 0 auto;">
<asp:DropDownList ID="slcLocation" runat="server" ClientIDMode="Static" Style="width: 365px;"
class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br />
<br />
<asp:DropDownList ID="slcSpecialty" runat="server" ClientIDMode="Static" Style="width: 365px;"
class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br />
<br />
<asp:DropDownList ID="slcGender" runat="server" ClientIDMode="Static" Style="width: 365px;"
class="default" AppendDataBoundItems="true">
<asp:ListItem Text="Any Gender" Value="" Selected="True" />
<asp:ListItem Text="Male" Value="1" />
<asp:ListItem Text="Female" Value="2" />
</asp:DropDownList>
<br />
<br />
<div style="width: 390px; margin: 0 auto;">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Find</asp:LinkButton>
</div>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<div style="width: 100%;">
<asp:Repeater runat="server" ID="rptContent">
<HeaderTemplate>
<table border="0" id="tblInfo" style="background: #43A79A; width: 100%;" clientidmode="Static">
<tr>
<td>
Physician Name
</td>
<td>
Image
</td>
<td>
Gender
</td>
<td>
Office1
</td>
<td>
Office2
</td>
<td>
Office3
</td>
<td>
Office4
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("Physician Name").ToString() %>
</td>
<td>
<img src="www.site.com/<%# Eval("Image").ToString() %>" />
</td>
<td>
<%# Eval("Gender").ToString() %>
</td>
<td>
<%# Eval("Office1").ToString() %>
</td>
<td>
<%# Eval("Office2").ToString() %>
</td>
<td>
<%# Eval("Office3").ToString() %>
</td>
<td>
<%# Eval("Office4").ToString() %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton1" />
</Triggers>
</asp:UpdatePanel>
</div>
cs
protected void LinkButton1_Click(object sender, EventArgs e)
{
Label1.Text = slcGender.SelectedItem.ToString();
}
I'm trying to find the values of TextBoxes which are rendered in a Repeater though a UserControl, i.e. the Repeater has a Placeholder for the UserControl, and inside the UserControl is where the TextBox markup actually exists. I've done this before with TextBoxes directly inside of a Repeater before, which was fairly straight forward, and I'm wondering why this apparently can't be accomplished the same way. Here is the Default page with the Repeater, which contains a Placeholder...
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<form class="formee">
<fieldset>
<legend>Faculty Information</legend>
<div class="grid-4-12">
<asp:Label ID="lblFirstName1" runat="server" Text="First Name"></asp:Label>
<asp:Label ID="lblFirstName2" runat="server" Text="" ></asp:Label>
<asp:Label ID ="lblSalary" runat="server" Text="" ClientIDMode="Static"></asp:Label>
</div>
<div class="grid-6-12">
<asp:Label ID="lblLastName1" runat="server" Text="Last Name"></asp:Label>
<asp:Label ID="lblLastName2" runat="server" Text=""></asp:Label>
</div>
</fieldset>
</form>
<div id="repeaterDiv">
<asp:Repeater ID="rptBudget" runat="server" ClientIDMode="Static">
<ItemTemplate>
<asp:PlaceHolder ID="phBudget" runat="server" EnableViewState="true" />
<br />
</ItemTemplate>
</asp:Repeater>
<asp:Button ID="btnAddBudgetControl" runat="server" Text="Add"
CausesValidation="false" OnClick="AddBudgetControl" CssClass="addBudgetControl"/>
<asp:Button ID="btnDisplayEntries" runat="server" Text="Display Entries" CausesValidation="false" OnClick="DisplayEntries" />
</div>
<div>
<asp:TextBox ID="txtTotalPercent" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:TextBox ID="txtGrandTotal" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:Label ID="lblCtrls" runat="server" Text=""></asp:Label>
</div>
...and the UserControl which is inserted in the place of the Placeholder...
<fieldset>
<legend>Faculty Salary Form</legend>
<table cellspacing="10" id="values">
<tr>
<td>
<asp:Label ID="lblServiceType" runat="server" Text="Service"></asp:Label>
<asp:DropDownList runat="server" ID="ddlServiceType" CssClass="serviceType" />
</td>
<td>
<asp:Label ID="lblSpeedCode" runat="server" Text="Speed Code"></asp:Label>
<asp:DropDownList runat="server" ID="ddlSpeedCode" CssClass="speedType" />
</td>
<td>
<asp:Label ID="lblPercentage" runat="server" Text="Percentage"></asp:Label>
<asp:Textbox ID="txtPercentage" runat="server" CssClass="percentCommitment" ClientIDMode="Static" EnableViewState="true" />
</td>
<td>
<asp:Label ID="lblTotal" runat="server" Text="Total"></asp:Label>
<asp:TextBox ID="txtTotal" runat="server" CssClass="amountCommitment" ClientIDMode="Static" EnableViewState="true"/>
</td>
<td>
<asp:Button ID="btnRemove" runat="server" Text="Remove Item" OnClick="RemoveItem" ClientIDMode="Static" CssClass="btnRemove" />
</td>
</tr>
<tr>
</tr>
</table>
</fieldset>
...but when the following code runs for the Display button's OnClick, I always get a null value for any and all TextBoxes (and DropDowns) in the UserControl...
protected void DisplayEntries(object sender, EventArgs e)
{
foreach (RepeaterItem repeated in rptBudget.Items)
{
TextBox txtPercentage = (TextBox)repeated.FindControl("txtPercentage");
if (txtPercentage == null)
{
lblCtrls.Text += " null; ";
}
else
{
lblCtrls.Text += txtPercentage.Text + "; ";
}
}
}
What's the best way to access these values? Thanks.
txtPercentage Textbox is located inside Usercontrol, so use the following helper method to retrieve it.
Helper Method
public static Control FindControlRecursive(Control root, string id)
{
if (root.ID == id)
return root;
return root.Controls.Cast<Control>()
.Select(c => FindControlRecursive(c, id))
.FirstOrDefault(c => c != null);
}
Usage
foreach (RepeaterItem repeated in rptBudget.Items)
{
TextBox txtPercentage =
(TextBox)FindControlRecursive(repeated, "txtPercentage");
...
}
Try loading the placeholder first and then looking for the textboxes in the placeholder:
Something like this:
pseudo
var ph = repeated.FindControl("phBudget");
var txtBox = ph.FindControl("txtPercentage");
/pseudo
You need to first get the UserControl, then use FindControl on the UC itself.
I encountered a problem where i add two ajax modal popup in a single page. This two modal popup each do different things. one is is create and one is for update. When two modal popup, my update button cannot be click ans execute the update codes. And when i remove my create modal popup, my updates work? Can anyone tell me how do i make two popup exist in the same page?
<!--Modal Popup: Create Topic-->
<cc1:modalpopupextender ID="ModalPopupExtender1" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlCreatePopup"
CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</cc1:modalpopupextender>
<asp:Panel ID="pnlCreatePopup" runat="server" CssClass="createModalPopup">
<!--Modal Popup: Update Topic-->
<asp:Button ID="bnUpdateShow" runat="server" style="display:none;" />
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="bnUpdateShow" PopupControlID="pnlpopup" CancelControlID="btnUpdateCancel" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" CssClass="topicModalPopup">
I solved this hiding the ajax pop up inside a panel configured as visible=false. I fire the popUp in codeBehind. here is some code:
<asp:LinkButton runat="server" ID="lbCredits1" Font-Underline="true"
CausesValidation="false" OnClick="btMpeCredits_Click">Credits</asp:LinkButton>
|
<asp:LinkButton runat="server" ID="lbPrivacy2" Font-Underline="true"
CausesValidation="false" OnClick="btMpePrivacy_Click">Privacy</asp:LinkButton>
<%--AjaxPopUpExtenderArea--%>
<asp:Panel ID="pnlAjaxArea" runat="server" Visible="false">
<%--PrivacyMPE--%>
<%--I have to hide the link button referenced in the AjaxPopUpExtender. I will use a different button to show the pop up--%>
<div style="display:none;">
<asp:LinkButton runat="server" ID="lbPrivacy" Text="PRIVACY"/>
</div>
<asp:ModalPopupExtender ID="MpePrivacy" runat="server" TargetControlID="lbPrivacy"
PopupControlID="PnlPrivacy" BackgroundCssClass="modalBackground" >
</asp:ModalPopupExtender>
<asp:Panel runat="server" ID="PnlPrivacy" Height="500px" Width="600px" BorderStyle="Solid"
BorderColor="#1E549E" BorderWidth="3px" BackColor="#FFFFFF" ScrollBars="Auto">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<UcPrivacy:Privacy runat="server" ID="Privacy" />
</td>
</tr>
<tr>
<td align="center">
<asp:ImageButton ImageUrl="~/App_Themes/GfRegistrationPage/images/chiudi-btn.gif" runat="server" OnClick="btMpeClose"
CausesValidation="False" />
<br />
<br />
</td>
</tr>
</table>
</asp:Panel>
<%--CreditsMPE--%>
<div style="display:none;">
<asp:LinkButton runat="server" ID="lbCredits" Text="credits"/>
</div>
<asp:ModalPopupExtender ID="MpeCredits" runat="server" TargetControlID="lbCredits"
PopupControlID="PnlCredits" BackgroundCssClass="modalBackground" >
</asp:ModalPopupExtender>
<asp:Panel runat="server" ID="PnlCredits" Height="500px" Width="600px" BorderStyle="Solid"
BorderColor="#1E549E" BorderWidth="3px" BackColor="#FFFFFF" ScrollBars="Auto">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<UcCredits:Credits runat="server" ID="Credits" />
</td>
</tr>
<tr>
<td align="center">
<asp:ImageButton ImageUrl="~/App_Themes/GfRegistrationPage/images/chiudi-btn.gif" runat="server" OnClick="btMpeClose"
CausesValidation="False" />
<br />
<br />
</td>
</tr>
</table>
</asp:Panel>
</asp:Panel>
and here some code behind:
#region ModalPopUpS Privacy credits
protected void btMpePrivacy_Click(object sender, EventArgs e)
{
pnlAjaxArea.Visible = true;
AjaxControlToolkit.ModalPopupExtender modalPop = ((AjaxControlToolkit.ModalPopupExtender)(this.Master.FindControl("ContentPlaceHolder1").FindControl("MpePrivacy")));
modalPop.Show();
}
protected void btMpeCredits_Click(object sender, EventArgs e)
{
pnlAjaxArea.Visible = true;
AjaxControlToolkit.ModalPopupExtender modalPop = ((AjaxControlToolkit.ModalPopupExtender)(this.Master.FindControl("ContentPlaceHolder1").FindControl("MpeCredits")));
modalPop.Show();
}
protected void btMpeClose(object sender, EventArgs e)
{
pnlAjaxArea.Visible = false;
}
#endregion
Within a gridview, I have an "Email" button and a "Delete" button that opens up a Modal popup window using the modalpopupextender. The problem is that the Email window opens when the button is clicked, but the Delete window does not open when its button is clicked. I am using both modalpopupextenders in the same way.
<asp:ButtonField ButtonType="Button" CommandName="Email" Text="Email" />
<asp:ButtonField ButtonType="Button" CommandName="Delete" Text="Delete" />
<%-- Email modal--%>
<asp:Panel ID="pnlPopupEmail" runat="server" Width="500px" Style="display: none">
<asp:UpdatePanel ID="updPnlEmail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnShowEmail" runat="server" Style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="mdlPopupEmail" runat="server" TargetControlID="btnShowEmail"
PopupControlID="pnlPopupEmail" CancelControlID="btnCancel" BackgroundCssClass="modalBackground" />
<div class="EmailPopup">
<table>
<tr>
<td>
To:
</td>
<td>
<asp:TextBox ID="EmailTo" runat="server" Width="350"></asp:TextBox>
</td>
</tr>
<tr>
<td>
From:
</td>
<td>
<asp:TextBox ID="EmailFrom" runat="server" Width="350"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Subject:
</td>
<td>
<asp:TextBox ID="Subject" runat="server" Width="350"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td> <asp:TextBox ID="EmailMessageBox" Width="350" Height="150" runat="server" TextMode="MultiLine" Wrap="true"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:LinkButton ID="SendBtn" runat="server" OnClick="SendBtn_Clicked" Text="Send" />
<asp:LinkButton ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" />
</td>
<td>
<asp:Label ID="theID" runat="server" Visible="false"></asp:Label>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<%-- -----end email modal--%>
<%-- Start Delete Confirmation Modal --%>
<asp:Panel ID="DelConfirmPanel" runat="server" Width="500px" Style="display: none">
<asp:UpdatePanel ID="DelConfirmUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID ="TESTLabel" runat="server" Text="Are you sure?" ></asp:Label>
<asp:Button ID="DelModalButton" runat="server" Style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="modalPopUpDelConfirm" runat="server" TargetControlID="DelModalButton"
PopupControlID="DelConfirmPanel" CancelControlID="DeleteCancel" BackgroundCssClass="modalBackground" />
<div class="DeletePopup">
<asp:LinkButton ID="DelConfirmedButton" runat="server" OnClick="DeleteConfirmation_Clicked"
Text="Delete" />
<asp:LinkButton ID="DeleteCancel" runat="server" Text="Cancel" CausesValidation="false" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<%-- End Delete Confirmation Modal --%>
</div>
Then in the codebehind I have a method that checks the command name and updates the updatepanel and shows the modalpopupextender.
protected void btn_Clicked(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Email")
{
// a bunch of stuff that I am leaving out but is just changing fields in the
//table withing the modal popup
updPnlEmail.Update();
mdlPopupEmail.show();
}
if (e.CommandName.Equals("Delete"))
{
int index = Convert.ToInt32(e.CommandArgument);
String id = gvReservations.DataKeys[index].Value.ToString(); // get id
try
{
DelConfirmUpdatePanel.Update();
modalPopUpDelConfirm.Show();
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
}
Any ideas why one works and not the other? Is there a good way to debug this kind of error? Thanks a lot for any help!
Figured it out.
<asp:ButtonField ButtonType="Button" CommandName="Delete" Text="Delete" />
This is where the problem was. I didn't realize that "Delete" was a reserved command name. So when this button was clicked an exception was being thrown saying that it couldn't delete from the table. Thus, the modal popup was never being shown. I figured it out by opening the javascript console in the chrome tools.
So to fix it, I changed the command name to something else and now everything works as expected.