Friday, December 26, 2008

Conditionally display ConfirmButtonExtender

ConfirmButtonExtender is a nice way to build a kindly ModalPopup ConfirmPanel. Sometimes, we hope to show ConfirmButtonExtender only if it satisfies certain conditions, rather than it's popped out once we click the button.
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>



protected void Button_Click(object sender, EventArgs e)
{
    Label1.Text = "You clicked the " + ((Control)sender).ID + " at " + DateTime.Now.ToLongTimeString() + ".";
}

6 comments:

Vince said...

Good comments.....
___________________

Vince

Your movies on demand

Anonymous said...

It doesn't work if I have 2 validation groups. The validation for both groups will show when I clicked on a button

sri said...

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.

ComercialFC said...

Having problens inside a master page

beauXjames said...

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.

Pravesh Singh said...

Hi,

I was reading your article and I would like to appreciate you for making it very simple and understandable. This article gives me a basic idea of Ajax Toolkit ConfirmButtonExtender Control in ASP.Net and it will help me a lot.
Check this helpful link too...
Ajax Toolkit ConfirmButtonExtender Control in ASP.Net

Its also having nice post with wonderful explanation on Ajax Toolkit ConfirmButtonExtender Control in ASP.Net.
it might be useful for you.