January 21, 2010

Using modal popup with ConfirmButton extender

ConfirmButton extender can be used to display prompt and depending on user input - the postback is performed. The prompt is the same window.prompt function. The prompt option can be changed to a modal popup. In this example, I will show how to use the modal popup option to display the prompt.

<div>
<asp:Button ID="Button2" runat="server" Text="ClickModal" OnClick="Button1_Click" />
<cc1:ConfirmButtonExtender ID="Button2_ConfirmButtonExtender" runat="server" OnClientCancel="CancelClick" ConfirmText="" Enabled="True" TargetControlID="Button2" DisplayModalPopupID="Button2_ModalPopupExtender">
</cc1:ConfirmButtonExtender>

<cc1:ModalPopupExtender ID="Button2_ModalPopupExtender" runat="server"
PopupControlID="Panel1" Enabled="True" TargetControlID="Button2"
OkControlID="Button3" CancelControlID="Button4" >
</cc1:ModalPopupExtender>

<asp:Label ID="Label2" runat="server" Text=""></asp:Label>

<asp:Panel ID="Panel1" runat="server">
This is a popup panel. <br />
<asp:Button ID="Button3" runat="server" Text="Ok" />
<asp:Button ID="Button4" runat="server" Text="Cancel" />
</asp:Panel>

</div>

The Button OnClick event is here.

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Button1 clicked from server side";
}

The javascript for the page is here.


<script type="text/javascript">
function CancelClick() {
document.getElementById("<%=Label1.ClientID %>").innerHTML = "button1 clicked from client side";
}
</script>

January 18, 2010

Using ConfirmButton Extender

ConfirmButton extends a Button control or any of its derived type and displays a prompt to the user if to perform the Button OnClick event or not. ConfirmButton extends is useful when confirmation from the user is needed before performing an operation. The prompt shows options "OK" and "Cancel". If the OK button is clicked, the button functions normally - that is, performs a postback. If the Cancel button is clicked - the postback is canceled. JavaScript function can be performed when the Cancel button is clicked when the OnClientCancel property of the extender is set.

The following example shows how to extend a button.

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Button ID="Button1" runat="server" Text="Click" OnClick="Button1_Click" />
<cc1:ConfirmButtonExtender ID="Button1_ConfirmButtonExtender" runat="server"
ConfirmText="Are you sure?" Enabled="True" TargetControlID="Button1"
OnClientCancel="CancelClick">
</cc1:ConfirmButtonExtender>

<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
The javascript for the OnClientCancel property is below.
<script type="text/javascript">
function CancelClick() {
document.getElementById("<%=Label1.ClientID %>").innerHTML = "button1 clicked from client side";
}
</script>

The OnClick event is below.
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Button1 clicked from server side";
}
Reference: Shahed Kazi at AspNetify.com