Hi all,
I have been trying to do the following:
Press the delete button in a grid and show a custum modal popup. My idea was to cut the __dopostback script of the button and paste it on the ok button script of the popup. Like so:
ConfirmationButton.ascx:
<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeFile="ConfirmationButton.ascx.cs" Inherits="UserControls_Misc_ConfirmationButton" %>
<asp:Button ID="Confirm" runat="server" Text="Button" UseSubmitBehavior="false" OnClick="Confirm_Click" />
ConfirmationButton.ascx.cs:
protected void Page_Load(object sender, EventArgs e)
{
string dopostback = Page.ClientScript.GetPostBackEventReference(Confirm, "");
if (dopostback.IndexOf("__doPostBack") > -1)
dopostback = dopostback.Replace("__doPostBack", "Confirmation");
else
throw new Exception("No __doPostback found in Confirmation button");
Confirm.Attributes.Add("OnClick", dopostback+";return false;");
JavaScriptGenerate();
}
public void JavaScriptGenerate()
{
if (!Page.ClientScript.IsClientScriptBlockRegistered("Confirmbutton"))
{
StringBuilder sb = new StringBuilder();
sb.Append("<script language=\"javascript\">");
sb.Append("function Confirmation(eventTarget, eventArgument)");
sb.Append("{");
sb.Append("$object('MessageBox')._onOkScript = function(){__doPostBack(' + eventTarget + ',' + eventArgument + ');};");
sb.Append("$object('MessageBox')._show();");
sb.Append("}");
sb.Append("</script>");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Confirmbutton", sb.ToString());
}
}
protected void Confirm_Click(object sender, EventArgs e)
{
int a = 0;
}
And my ASPX looks like this:
<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="TEST_Default" %>
<%@dotnet.itags.org. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<%@dotnet.itags.org. Register src="http://pics.10026.com/?src=../UserControls/Misc/ConfirmationButton.ascx" TagName="ConfirmationButton"
TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True">
</atlas:ScriptManager>
<uc1:ConfirmationButton ID="ConfirmationButton1" runat="server" />
</div>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none">
<table cellpadding="0" cellspacing="0" border="0">
<tr style="font-weight: bold; color: white; background-color: dimgray;">
<td>
<asp:Label ID="HeaderLabel" runat="server" Text="Header"></asp:Label></td>
</tr>
<tr>
<td>
<asp:Label ID="MessageLabel" runat="server" Text="Message"></asp:Label></td>
</tr>
<tr>
<td align="right">
<asp:Button ID="OkButton" runat="server" Text="Ok" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
<atlastoolkit:modalpopupextender id="ModalPopupExtender1" runat="server">
<atlasToolkit:ModalPopupProperties BackgroundCssClass="modalBackground" CancelControlID="CancelButton"
PopupControlID="Panel1" TargetControlID="PopupButton" ID="MessageBox" />
</atlastoolkit:modalpopupextender>
<div style="display: none">
<asp:LinkButton ID="PopupButton" runat="server"></asp:LinkButton>
</div>
</form>
</body>
</html
The code above is just a sample of my code hopefully enough for you guys to understand the problem.
I have gotten as far as showing the popup, but when I press the ok button on the popup, a roundtrip happens and nothing else. Why isn't going to the Confirm_click code?
Maybe this whole appoach is wrong. Hope you can help me
Oez
Hey Oez,
I blogged on how I got this scenario to work recently.
Creating a confirmation using the ModalPopup
Thanks for doing this - great blog post. This is something I've been thinkng about so I've logged asIssue 1369. I think the cleanest way for us to do this is to expose the functionality via ConfirmButton rather than via ModalPopup.
Thanks!
I would like to thank Alan for his great blog. This really pushed me in the right direction. I've used his sample to create the functionality I was after.
Intercept the button postback, show a modal popup and if 'yes' is pressed continue with the postback else do nothing.
Here is my sample code. Create a new atlas web project. On the default page create the following code:
<%@.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_default" %>
<%@.RegisterSrc="MessageBox.ascx"TagName="MessageBox"TagPrefix="uc1" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Modal Confirmation</title>
<styletype="text/css">
body {
font:normal10pt/13ptArial,Verdana,Helvetica,sans-serif;
color:#666;
margin:20px;
}
/*Modal Popup*/
.modalBackground {
background-color:#000;
filter:alpha(opacity=80);
opacity:0.8;
}
.modalPopupimg {
border:solid5px#fff;
}
.modalPopup-text {
display:block;
color:#000;
background-color:#fff;
text-align:center;
border:solid2px#000;
padding:10px;
}
.modalPopup-textinput {
width:75px;
}
.feedback
{
color:#00cc00;
font-weight:700;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<atlas:ScriptManagerID="ScriptManager1"runat="server"/>
<h2>Modal Confirmation</h2>
<divclass="demo">
<asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="False"OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateFieldShowHeader="False">
<ItemTemplate>
<asp:ButtonID="DeleteButton"runat="server"Text="Delete"/>
</ItemTemplate>
<AlternatingItemTemplate>
<asp:LinkButtonID="DeleteButton"runat="server">Delete</asp:LinkButton>
</AlternatingItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<uc1:MessageBoxID="MessageBox1"runat="server"/>
</div>
</form>
</body>
</html>
And code behind:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
publicpartialclass_default : System.Web.UI.Page
{
protectedvoid Page_Load(object sender,EventArgs e)
{
DataTable dt =newDataTable();
for (int i = 0; i <= 5; i++)
{
DataRow row = dt.NewRow();
dt.Rows.Add(row);
}
GridView1.DataSource = dt;
GridView1.DataBind();
}
protectedvoid GridView1_RowDataBound(object sender,GridViewRowEventArgs e)
{
WebControl delete = (WebControl)e.Row.FindControl("DeleteButton");
if (delete !=null)
MessageBox1.ConnectButton(delete);
}
}
Now add a usercontrol called MessageBox to the project.
<%@.ControlLanguage="C#"AutoEventWireup="true"CodeFile="MessageBox.ascx.cs"Inherits="MessageBox" %>
<%@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlastoolkit" %>
<asp:PanelID="ConfirmtionPanel"runat="server"CssClass="modalPopup"Style="display: none">
<divclass="modalPopup-text">
Are you sure you want to delete this item?<br/>
<br/>
<asp:ButtonID="YesButton"runat="server"Text="Yes"/>
<asp:ButtonID="NoButton"runat="server"Text="No"/>
</div>
</asp:Panel>
<atlastoolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server">
<atlastoolkit:ModalPopupPropertiesPopupControlID="ConfirmtionPanel"TargetControlID="FakeButton"
OkControlID="YesButton"OnOkScript="onYes()"CancelControlID="NoButton"OnCancelScript="onNo()"
BackgroundCssClass="modalBackground"ID="msgBox"/>
</atlastoolkit:ModalPopupExtender>
<divstyle="display:none">
<asp:LinkButtonID="FakeButton"runat="server">Fake</asp:LinkButton>
<asp:HiddenFieldID="eventTarget"runat="server"></asp:HiddenField>
<asp:HiddenFieldID="eventArgument"runat="server"></asp:HiddenField>
</div>
And the code behind
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
using AtlasControlToolkit;
publicpartialclassMessageBox : System.Web.UI.UserControl
{
privatestring _msgBoxId;
protectedvoid Page_Init(object sender,EventArgs e)
{
//This is so you can add multiple MessageBox usercontrols to a page and the ModalPopupProperties will be unique.
_msgBoxId =this.ClientID +"_" + msgBox.ID;
msgBox.ID = _msgBoxId;
}
protectedvoid Page_Load(object sender,EventArgs e)
{
// Expose the __doPostBack function to programmatically call it from javascript
Page.ClientScript.GetPostBackEventReference(this,String.Empty);
if (!Page.ClientScript.IsClientScriptBlockRegistered("MessageBox"))
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"MessageBox", GetScript());
}
publicstring GetScript()
{
StringBuilder sb =newStringBuilder();
sb.Append("<script type=\"text/javascript\">");
sb.Append("function onYes() {");
sb.Append("var eventTarget = $('");
sb.Append(eventTarget.ClientID);
sb.Append("').value;");
sb.Append("var eventArgument = $('");
sb.Append(eventArgument.ClientID);
sb.Append("').value;");
sb.Append("var postBack = new Sys.WebForms.PostBackAction();");
sb.Append("postBack.set_target(eventTarget);");
sb.Append("postBack.set_eventArgument(eventArgument);");
sb.Append("postBack.performAction();");
sb.Append("}");
sb.Append(" ");
sb.Append("function onNo() {");
sb.Append("//no postback necessary \n");
sb.Append("} ");
sb.Append("</script>");
return sb.ToString();
}
publicvoid ConnectButton(WebControl Confirm)
{
string dopostback = Page.ClientScript.GetPostBackEventReference(Confirm,"");
if (dopostback.IndexOf("__doPostBack") > -1)
dopostback = dopostback.Replace("__doPostBack","Confirmation").Replace(")",",'" + _msgBoxId +"')");
else
thrownewException("No __doPostback found in Confirmation button");
Confirm.Attributes.Add("OnClick", dopostback +";return false;");
JavaScriptGenerate();
}
privatevoid JavaScriptGenerate()
{
if (!Page.ClientScript.IsClientScriptBlockRegistered("Confirmbutton"))
{
StringBuilder sb =newStringBuilder();
sb.Append("<script language=\"javascript\">");
sb.Append("function Confirmation(eventTarget, eventArgument, msgBoxId)");
sb.Append("{");
sb.Append("$('");
sb.Append(eventTarget.ClientID);
sb.Append("').value=eventTarget;");
sb.Append("$('");
sb.Append(eventArgument.ClientID);
sb.Append("').value=eventArgument;");
sb.Append("$object(msgBoxId)._show();");
sb.Append("}");
sb.Append("</script>");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"Confirmbutton", sb.ToString());
}
}
}
Hopes this helps for issue 1369. If you guys have any ideas to improve this code, to make it more flexible or better code, I would love see that...do say it...more comments...I know...
Excellent to hear that my post helped! That's what the forums and tech blogs all about.
Alante,
I'm trying to use your code, and it's working in the single form, but not in the page with MasterPage, i changed the javacode to
postBack.set_target('<%=YesButton.ClientID %>');
it's posting back but it's not calling theYesButton_Click event Should I change also the
postBack.set_eventArgument(''); statement to somethign else? I would really apppreciate your help.
A commenter on my blog posted the solution to your problem FrenchilnLA. He got it to work with the master page by using the full reference to the control id, ie. postBack.set_target('ct100_masterName_ YesButton');
I finally add the following code at Page Load event:
string strEvent = ClientScript.GetPostBackEventReference(YesButton,string.Empty);
YesButton.Attributes.Add(
"onclick", strEvent);
Is it funny that we have to force a bostback to a server control that has an Click event ?
This control extender (modal Popup) should allow to be triggered from Server code, and the yes and no button should post back as well.
Thank you anyway I really appreciated your help.
