For example, I have a RequiredFieldValidator Validation control on the page. ConfirmButtonExtender should not display even though I click the submit button untill I input something in the TextBox.
See the code:
<body>
<form id="form1" runat="server">
<ajaxToolkit:toolkitscriptmanager runat="Server" EnablePartialRendering="true"
ID="ScriptManager1" />
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
<asp:Button ID="Button" runat="server" Text="Click Me" OnClientClick="disableSubmit();return false;" OnClick="Button_Click" /><br />
<br />
Server Time Refresh: <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<asp:Button ID="HiddenButton" runat="server" Text="Hiddenbutton" style="display:none;" /><br />
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server"
TargetControlID="HiddenButton"
OnClientCancel="cancelClick" BehaviorID="ConfirmButtonBehavior"
DisplayModalPopupID="ModalPopupExtender1" />
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="HiddenButton"
PopupControlID="PNL"
OkControlID="ButtonOk"
CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground"
/>
<asp:Panel ID="PNL" runat="server" style="display:none; width:200px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">
Are you sure you want to click the Button1?
<br /><br />
<div style="text-align:right;">
<asp:Button ID="ButtonOk" runat="server" Text="OK" OnClientClick="onOkScript()" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
</div>
</asp:Panel>
</form>
</body>
<script type="text/javascript">
function disableSubmit()
{
if (typeof(Page_ClientValidate)=='function')
{
if (Page_ClientValidate() == true)
{
return checkSubmit();
}
else
{
return true;
}
}
else
{
return checkSubmit();
}
}
function checkSubmit() {
var confirmButton = $find('ConfirmButtonBehavior');
confirmButton._displayConfirmDialog();
}
function onOkScript() {
var confirmButton = $find('ConfirmButtonBehavior');
confirmButton._postBackScript = "__doPostBack(\u0027Button\u0027,\u0027\u0027)"; //reset bind onto Button
}
</script>
<form id="form1" runat="server">
<ajaxToolkit:toolkitscriptmanager runat="Server" EnablePartialRendering="true"
ID="ScriptManager1" />
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
<asp:Button ID="Button" runat="server" Text="Click Me" OnClientClick="disableSubmit();return false;" OnClick="Button_Click" /><br />
<br />
Server Time Refresh: <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<asp:Button ID="HiddenButton" runat="server" Text="Hiddenbutton" style="display:none;" /><br />
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server"
TargetControlID="HiddenButton"
OnClientCancel="cancelClick" BehaviorID="ConfirmButtonBehavior"
DisplayModalPopupID="ModalPopupExtender1" />
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="HiddenButton"
PopupControlID="PNL"
OkControlID="ButtonOk"
CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground"
/>
<asp:Panel ID="PNL" runat="server" style="display:none; width:200px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">
Are you sure you want to click the Button1?
<br /><br />
<div style="text-align:right;">
<asp:Button ID="ButtonOk" runat="server" Text="OK" OnClientClick="onOkScript()" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
</div>
</asp:Panel>
</form>
</body>
<script type="text/javascript">
function disableSubmit()
{
if (typeof(Page_ClientValidate)=='function')
{
if (Page_ClientValidate() == true)
{
return checkSubmit();
}
else
{
return true;
}
}
else
{
return checkSubmit();
}
}
function checkSubmit() {
var confirmButton = $find('ConfirmButtonBehavior');
confirmButton._displayConfirmDialog();
}
function onOkScript() {
var confirmButton = $find('ConfirmButtonBehavior');
confirmButton._postBackScript = "__doPostBack(\u0027Button\u0027,\u0027\u0027)"; //reset bind onto Button
}
</script>
protected void Button_Click(object sender, EventArgs e)
{
Label1.Text = "You clicked the " + ((Control)sender).ID + " at " + DateTime.Now.ToLongTimeString() + ".";
}
{
Label1.Text = "You clicked the " + ((Control)sender).ID + " at " + DateTime.Now.ToLongTimeString() + ".";
}
4 comments:
It doesn't work if I have 2 validation groups. The validation for both groups will show when I clicked on a button
Hi Vince,
It's an excellent article. I am using ConfirmButtonExtender in a asp repeater. How do i find the 'ConfirmButtonBehavior' for a specific ConfirmButtonExtender control in checkSubmit().
Thanks for your help in advance.
sri.
Having problens inside a master page
Interesting example, however there is a much easier way to handle this.
Consider you have your aspx mark-up as you have in your example.
For the "ModalPopupExtender1" remove the OKButtonID Property. Since the Extender is Targeting the hidden button, you can programmatically handle the opening of the Pop-up, which means that you just need to trigger ModalPopupExtender1.Show() in the CodeBehind on the Click event for "Button".
Then, simply write what you are wanting the Form to do into the Click Event of the "ButtonOK".
Here, validation (no matter how many groups you have) can take its normal course and the actual form submission is triggered by the ok button in the pop-up.
Post a Comment