How to close Modal Popup Extender from server side code on click on close link inside the popup?
there is a property in extender for closing popup " CancelControlID" give button id in it and popup will close,if you want to close popup from server side mean from code behind then there is extender property hide(),in button code behind body write id of popup and enter "." after that you get all properties of popup in those property you get hide property.use it hopefully you will get the solution
example
private void btnSubmit_Click(object sender, EventArgs e)
{
modelpopupextender.hide();
}
Answering this question might not be useful to the person who posted it but it might be useful to others.
The following needs to be done to close the modal popup from server side.
Instead of giving the close button id to "CancelControlID" of the modalpopupextender, create a dummy hiddenfield and give this id to "CancelControlID" of the modalpopupextender.
for example
<pre>
<asp:HiddenField ID="hidForModel" runat="server" />;
/*Are you sure you want to know the answer? */
<asp:Button ID="btnYes" runat="server" Text="Yes!" onclick="btnYes_Click" />;
<br />;
<asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup" Style="display: none;">
<asp:Panel ID="pnlControls" runat="server" CssClass="insideModalPopup></asp:Panel>
<br />
<asp:Button ID="btnClose" runat="server" Text="Close" onclick="btnClose_Click" />
</asp:Panel>
<cc1:ModalPopupExtender TargetControlID="hidForModel" ID="pnlModal_ModalPopupExtender"
runat="server" DynamicServicePath="" Enabled="True" BackgroundCssClass="modalBackground"
PopupControlID="pnlModal" CancelControlID="hidForModel" DropShadow="true">
</cc1:ModalPopupExtender>
</pre>
Here i have given both TargetControlID and CancelControlID as hidForModel as I want to show as well as hide the modal popup from code-behind.
In Code-Behind
<pre>
protected void btnYes_Click(object sender, EventArgs e)
{
pnlModal_ModalPopupExtender.Show();
TextBox txt = new TextBox();
txt.Text = "aaa";
pnlControls.Controls.Add(txt);
}
protected void btnClose_Click(object sender, EventArgs e)
{
pnlModal_ModalPopupExtender.Hide();
}
</pre>
Here I have made the modal popup seen and added a textbox from code-behind on click of yes button and hidden the modal popup on click of Close button.
You can use CancelControlID attribute to close the Popup box.
<asp:ModalPopupExtender ID="mpe_login" runat="server"
TargetControlID="btn_login_popup" PopupControlID="panel_login"
BackgroundCssClass="LoginBackground1"
CancelControlID="btn_Cancel" />
Related
I have a form for people to put in info on my contact page. I'm trying to figure out how once they click submit to NOT show the form anymore and show a simple thankyou.
Thank You
Create a multiview control with 2 views.Place all your controls into one and a "thank you" message in the other and toggle the ActiveViewIndex on submit click
The simplest way would just be to use Panel controls:
<asp:Panel ID="pnlForm" runat="server">
... form here ...
<asp:Button ID="btnSubmit" OnClick="btnSubmit_Click" Text="Submit" runat="server" />
</asp:Panel>
<asp:Panel ID="pnlThankYou" Visible="False" runat="server">
Thanks!
</asp:Panel>
C#
protected void btnSubmit_Click(object sender, EventArgs e)
{
pnlForm.Visible = false;
pnlThankYou.Visible = true;
}
Try to put both sections in separate divs and make divs runat=server
and set the div which not required visible to false or just add attribute display to hide at server side
and show the other div by visible true or by attribute to block
I have a repeater and it has a column of linkbuttons in it. I want to add those linkbuttons to targetcontrolid but it failed because they are in the repeater. So i create an additional invisible button like this :
<asp:Button ID="btnFakePopUp" runat="server" Text="" visible="false"
onclick="btnFakePopUp_Click"/>
And in i tried to link the linkbutton to the invisible button in this code :
protected void lbtnPosition_Click(object sender, EventArgs e) {
btnFakePopUp_Click(sender, e);
}
protected void btnFakePopUp_Click(object sender, EventArgs e)
{
popupJob.Show();
}
And this is my modalpopupextender code (my prefix is asp: so dont get confuse) :
<asp:ModalPopupExtender ID="popupJob" runat="server" PopupControlID="panelPopup" CancelControlID="popupClose" TargetControlID="btnFakePopUp"
Drag="true" PopupDragHandleControlID="panelPopup">
</asp:ModalPopupExtender>
<asp:Panel ID="panelPopup" runat="server" BackColor="#ebf0ff" Width="300px">
<div>
test<br />
<asp:Button ID="btnSave" runat="server" Text="Save" />
<asp:Button ID="btnApply" runat="server" Text="Apply" />
<input id="popupClose" type="button" value="Close" />
</div>
</asp:Panel>
The problems are :
1. The panelpopup is always shown...(it should be hidden, and only be shown when the user click the link button)
2. Nothing happened when i tried to click the link button (the panelpopup should be shown)
Thank you :D
For a btnFakePopup invisible you could set the display:none with CSS
example:
<asp:ImageButton ID="btnFakePopUp" runat="server" style="display: none"></asp:ImageButton>
I don't understand why, but setting btnFakePopUp visibility to true corrected the problem. Now my modalpopupextender is running smoothly.
how can i activate a ModalPopupExtender,
whiteout giving the TargetControlID a button id in the aspx page (i dont know wiche button will activate the ModalPopupExtender i have a multiple buttons on my page)
thanks
you must have one TargetControlID but you can hide it and activate the pop up with a different button:
<div style="display:none;">
<asp:LinkButton runat="server" ID="lbPrivacy" Text="PRIVACY"/>
</div>
<asp:ModalPopupExtender ID="MpePrivacy" runat="server" TargetControlID="lbPrivacy"
<asp:LinkButton runat="server" ID="lbPrivacy2" Font-Underline="true"
CausesValidation="false" OnClick="btMpePrivacy_Click">Privacy</asp:LinkButton>
protected void btMpePrivacy_Click(object sender, EventArgs e)
{
AjaxControlToolkit.ModalPopupExtender modalPop = ((AjaxControlToolkit.ModalPopupExtender)(this.Master.FindControl("ContentPlaceHolder1").FindControl("MpePrivacy")));
modalPop.Show();
}
Tip: you can use Hidden field as a TargetControlID:
<asp:HiddenField ID="btnTrigger" runat="server" />
and as for showing the popup, in each button onclick event:
(IdOfModalPopupExtender).show();
ModalPopupExtender_xyz.Show();
I am having an issue when a page contains multiple ModalPopups each containing a ValidationSummary Control.
Here is the functionality I need:
A user clicks a button and a Modal Popup appears with dynamic content based on the button that was clicked. (This functionality is working. Buttons are wrapped in UpdatePanels and the partial page postback calls .Show() on the ModalPopup)
"Save" button in ModalPopup causes client side validation, then causes a full page postback so the entire ModalPopup disappears. (ModalPopup could disappear another way - the ModalPopup just needs to disappear after a successful save operation)
If errors occur in the codebehind during Save operation, messages are added to the ValidationSummary (contained within the ModalPopup) and the ModalPopup is displayed again.
When the ValidationSummary's are added to the PopupPanel's, the ModalPopups no longer display correctly after a full page postback caused by the "Save" button within the second PopupPanel. (the first panel continues to function correctly) Both PopupPanels are displayed, and neither is "Popped-Up", they are displayed in-line.
Any ideas on how to solve this?
EDIT: Functionality in each Popup is different - that is why there must be two different ModalPopups.
EDIT 2: Javascript error I was receiving:
function () {
Array.remove(Page_ValidationSummaries, document.getElementById(VALIDATION_SUMMARY_ID));
}
(function () {
var fn = function () {
AjaxControlToolkit.ModalPopupBehavior.invokeViaServer("MODAL_POPUP_ID", true);
Sys.Application.remove_load(fn);
};
Sys.Application.add_load(fn);
}) is not a function
Missing ";" in injected javascript. see answer below
Image of Error State (after "PostBack Popup2" button has been clicked)
ASPX markup
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<%--*********************************************************************
Popup1
*********************************************************************--%>
<asp:UpdatePanel ID="Popup1ShowButtonUpdatePanel" runat="server">
<ContentTemplate>
<%--This button will cause a partial page postback and pass a parameter to the Popup1ModalPopup in code behind
and call its .Show() method to make it visible--%>
<asp:Button ID="Popup1ShowButton" runat="server" Text="Show Popup1" OnClick="Popup1ShowButton_Click"
CommandArgument="1" />
</ContentTemplate>
</asp:UpdatePanel>
<%--Hidden Control is used as ModalPopup's TargetControlID .Usually this is the ID of control that causes the Popup,
but we want to control the modal popup from code behind --%>
<asp:HiddenField ID="Popup1ModalPopupTargetControl" runat="server" />
<ajax:ModalPopupExtender ID="Popup1ModalPopup" runat="server" TargetControlID="Popup1ModalPopupTargetControl"
PopupControlID="Popup1PopupControl" CancelControlID="Popup1CancelButton">
</ajax:ModalPopupExtender>
<asp:Panel ID="Popup1PopupControl" runat="server" CssClass="ModalPopup" Style="width: 600px;
background-color: #FFFFFF; border: solid 1px #000000;">
<%--This button causes validation and a full-page post back. Full page postback will causes the ModalPopup to be Hid.
If there are errors in code behind, the code behind will add a message to the ValidationSummary,
and make the ModalPopup visible again--%>
<asp:Button ID="Popup1PostBackButton" runat="server" Text="PostBack Popup1" OnClick="Popup1PostBackButton_Click" />
<asp:Button ID="Popup1CancelButton" runat="server" Text="Cancel Popup1" />
<asp:UpdatePanel ID="Popup1UpdatePanel" runat="server">
<ContentTemplate>
<%--*************ISSUE HERE***************
The two ValidationSummary's are causing an issue. When the second ModalPopup's PostBack button is clicked,
Both ModalPopup's become visible, but neither are "Popped-Up".
If ValidationSummary's are removed, both ModalPopups Function Correctly--%>
<asp:ValidationSummary ID="Popup1ValidationSummary" runat="server" />
<%--Will display dynamically passed paramter during partial page post-back--%>
Popup1 Parameter:<asp:Literal ID="Popup1Parameter" runat="server"></asp:Literal><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<br />
</asp:Panel>
<br />
<br />
<br />
<%--*********************************************************************
Popup2
*********************************************************************--%>
<asp:UpdatePanel ID="Popup2ShowButtonUpdatePanel" runat="server">
<ContentTemplate>
<%--This button will cause a partial page postback and pass a parameter to the Popup2ModalPopup in code behind
and call its .Show() method to make it visible--%>
<asp:Button ID="Popup2ShowButton" runat="server" Text="Show Popup2" OnClick="Popup2ShowButton_Click"
CommandArgument="2" />
</ContentTemplate>
</asp:UpdatePanel>
<%--Hidden Control is used as ModalPopup's TargetControlID .Usually this is the ID of control that causes the Popup,
but we want to control the modal popup from code behind --%>
<asp:HiddenField ID="Popup2ModalPopupTargetControl" runat="server" />
<ajax:ModalPopupExtender ID="Popup2ModalPopup" runat="server" TargetControlID="Popup2ModalPopupTargetControl"
PopupControlID="Popup2PopupControl" CancelControlID="Popup2CancelButton">
</ajax:ModalPopupExtender>
<asp:Panel ID="Popup2PopupControl" runat="server" CssClass="ModalPopup" Style="width: 600px;
background-color: #FFFFFF; border: solid 1px #000000;">
<%--This button causes validation and a full-page post back. Full page postback will causes the ModalPopup to be Hid.
If there are errors in code behind, the code behind will add a message to the ValidationSummary,
and make the ModalPopup visible again--%>
<asp:Button ID="Popup2PostBackButton" runat="server" Text="PostBack Popup2" OnClick="Popup2PostBackButton_Click" />
<asp:Button ID="Popup2CancelButton" runat="server" Text="Cancel Popup2" />
<asp:UpdatePanel ID="Popup2UpdatePanel" runat="server">
<ContentTemplate>
<%--*************ISSUE HERE***************
The two ValidationSummary's are causing an issue. When the second ModalPopup's PostBack button is clicked,
Both ModalPopup's become visible, but neither are "Popped-Up".
If ValidationSummary's are removed, both ModalPopups Function Correctly--%>
<asp:ValidationSummary ID="Popup2ValidationSummary" runat="server" />
<%--Will display dynamically passed paramter during partial page post-back--%>
Popup2 Parameter:<asp:Literal ID="Popup2Parameter" runat="server"></asp:Literal><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<br />
</asp:Panel>
Code Behind
protected void Popup1ShowButton_Click(object sender, EventArgs e)
{
Button btn = sender as Button;
//Dynamically pass parameter to ModalPopup during partial page postback
Popup1Parameter.Text = btn.CommandArgument;
Popup1ModalPopup.Show();
}
protected void Popup1PostBackButton_Click(object sender, EventArgs e)
{
//if there is an error, add a message to the validation summary and
//show the ModalPopup again
//TODO: add message to validation summary
//show ModalPopup after page refresh (request/response)
Popup1ModalPopup.Show();
}
protected void Popup2ShowButton_Click(object sender, EventArgs e)
{
Button btn = sender as Button;
//Dynamically pass parameter to ModalPopup during partial page postback
Popup2Parameter.Text = btn.CommandArgument;
Popup2ModalPopup.Show();
}
protected void Popup2PostBackButton_Click(object sender, EventArgs e)
{
//***********After This is when the issue appears**********************
//if there is an error, add a message to the validation summary and
//show the ModalPopup again
//TODO: add message to validation summary
//show ModalPopup after page refresh (request/response)
Popup2ModalPopup.Show();
}
This is an issue with using both ValidationSummary and ModalPopup.
see here: http://ajaxcontroltoolkit.codeplex.com/WorkItem/View.aspx?WorkItemId=12835
The problem is that there is a missing ";" between the two injected scripts.
Their solution is to create/use a custom server control that inherits from ValidationSummary, that injects a ";" into the page startup script to fix the bug:
[ToolboxData("")]
public class AjaxValidationSummary : ValidationSummary
{
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), this.ClientID, ";", true);
}
}
Put all the <asp:ValidationSummary controls at the end of the document.
Error will be resolved.
Did you seto a different "ValidationGroup" of each popup (ValidationSummary + validators) ?
it seems there is bug in modal pop extender with validation summary in panel. to avoid the scenario always put the validation summary modal popup extender and panel at the bottom of code.
add the respective code at bottom of page
<%--This button causes validation and a full-page post back. Full page postback will causes the ModalPopup to be Hid.
If there are errors in code behind, the code behind will add a message to the ValidationSummary,
and make the ModalPopup visible again--%>
<%--*************ISSUE HERE***************
The two ValidationSummary's are causing an issue. When the second ModalPopup's PostBack button is clicked,
Both ModalPopup's become visible, but neither are "Popped-Up".
If ValidationSummary's are removed, both ModalPopups Function Correctly--%>
<%--Will display dynamically passed paramter during partial page post-back--%>
Popup1 Parameter:
I have a gridview that is only shown in a modal popup. right before I call the modal popup I set a value in a textbox. The gridview inside the modal popup depends on that textbox's value for it's data to show up at all. SO onclick I want to reload the gridview so that it will reload with the textbox's value. Any ideas?
Essentially... Using update panel, the button press event should trigger the partial postback where your query is rerun that would then allow you to do another databind on your grid. THis would all be followed by a modalPopUp.Show()...
CODE BEHIND
protected void btnAdd_Click(object sender, EventArgs e)
{
if(!String.IsNullOrEmpty(this.txtMyValue.Text))
{
AddValue(this.txtMyValue.Text);
UpdateGrid();
this.UpdatePanel1.Update();
}
else
{
//ooooops
}
}
private void AddValue(String str)
{
DataAccess.AddSomeValue(str);
}
private void UpdateGrid()
{
this.GridView1.DataSource = DataAccess.GetData();
this.GridView1.DataBind();
}
FRONT END
<asp:UpdatePanel ID="UpdatePanel1" runat="server" updatemode="Conditional">
<ContentTemplate>
<asp:TextBox id="TextBox1" runat="server" />
<asp:Button id="btnAdd" OnClick="btnAdd_Click" runat="Server">
<div id="MyModalArea">
<asp:GridView id="GridView1" runat="Server" ..... >
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Put popup window content (grid and the rest there is) in separate aspx page and then when you initialize popup window, send textbox value as parameter:
MyPopupWindowContent.aspx?TextBoxValue=something