- By default, ASP.NET WebForms is a SERVER side programming model and therefore all UI elements (ASP.NET Controls) with user interactions are assumed to have server-side logic.
- We are integrating Client AND Server Development Models.
- An ASPX (Web Forms) page is assumed to contain only ONE HTML form. (Though we can use advanced manual techniques to bypass this limitation)
- Given the above items 1 & 3, all <asp:button> controls render as HTML Submit elements.
- <INPUT TYPE=BUTTON> // A button with a click event.
- <INPUT TYPE=SUBMIT> // A button whose click posts the html form
- <INPUT TYPE=RESET> // A button that causes form fields to be reset
- Ones that display something but have no need to SUBMIT The form
- Ones that take user input and MIGHT submit the form.


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master' AutoEventWireup='true' CodeFile='Default.aspx.cs' Inherits='_Default' %> <asp:Content ID='HeaderContent' runat='server' ContentPlaceHolderID='HeadContent'> <link href='Styles/jqdialog.css' rel='stylesheet' type='text/css' /> </asp:Content> <asp:Content ID='BodyContent' runat='server' ContentPlaceHolderID='MainContent'> <br /> <button ID='btnotify' type='button' class='CustomButton'> Notification Popup </button><br /><br /> <button ID='btalert' type='button' class='CustomButton'> Alert Popup </button><br /><br /> <button ID='btconfirm' type='button' class='CustomButton'> Confim Dialog </button><br /><br /> <button ID='btprompt' type='button' class='CustomButton'> Input Prompt </button><br /><br /> <button id='btcontent' type='button' class='CustomButton'> Any Custom Content </button><br /><br /> <script src='http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js' type='text/javascript'></script> <script src='Scripts/jqdialog.min.js' type='text/javascript'></script> <script src='Scripts/jQueryDialogs.js' type='text/javascript'></script> </asp:Content>
#jqDialog_box { position: absolute; width: 450px; height: 150px; border-bottom: #ccc 3px solid; border-left: #ccc 1px solid; border-top: #ccc 1px solid; border-right: #ccc 3px solid; font-family: Arial; background: #f5f5f5; } #jqDialog_content { margin: 10px; height: 90px; font-size: 12px; overflow: hidden; font-weight: bold; } #jqDialog_options { text-align: center; margin: 10px; } #jqDialog_options BUTTON { border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; margin-right: 5px; width: auto; font-family: Arial; background: #000; color: #fff; font-size: 1.5em; cursor: pointer; } #jqDialog_input { padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; width: 250px; } #jqDialog_close { border-bottom: medium none; border-left: medium none; BORDER-TOP: medium none; border-RIGHT: medium none; background: none transparent scroll repeat 0% 0%; float: right; color: #ff0000; font-size: 10px; font-weight: bold; cursor: pointer; } .CustomButton { background-color: #99CCFF; border: thin solid #008080; width: 200px; cursor: pointer; }
// Notification dialog $('#btnotify').click(function () { $.jqDialog.notify('<br /><br /><br />' + '<center><strong>This dialog will disappear in ' + '3 seconds</center>', 3); }); // Alert dialog $('#btalert').click(function () { $.jqDialog.alert('<br /><br /><center> <strong>This alert requires user ' + 'interaction.</strong></center>', function () { // callback function for 'OK' button alert('User Clicked OK'); }); }); // Confirm dialog $('#btconfirm').click(function () { $.jqDialog.confirm('<br /><br /><center><strong>Are you sure ??? ' + ' </strong></center>', // callback function for 'YES' button function () { document.forms[0].submit(); }, // callback function for 'NO' button function () { // No Op } ); }); // prompt $('#btprompt').click(function () { $.jqDialog.prompt('<br /><br />Please enter your name to agree', '', // callback function for 'OK' button function (data) { if (data == '') { return; } else { alert('Your name ' + data + ' is approved.'); document.forms[0].submit(); } }, // callback function for 'Cancel' button function () { // No Op } ); }); // custom cotent dialog $('#btcontent').click(function () { $.jqDialog.content('No dialog controls, but any markup you want. <br /><br />' + '<input type='text' name='test' /><br /><br />' + 'Click the 'X' in the upper right corner to close.'); });
The JavaScript code that is specific to the first Button Popup is this:
// Notification dialog $('#btnotify').click(function () { $.jqDialog.notify('<br /><br /><br />' + '<center><strong>This dialog will disappear in ' + '3 seconds</center>', 3); });
Note the last parameter to the notify function is a number 3 (for 3 seconds), change the amount of time the dialog is visible by changing that parameter.

// Alert dialog $('#btalert').click(function () { $.jqDialog.alert('<br /><br /><center> <strong>This alert requires user ' + 'interaction.</strong></center>', function () { // callback function for 'OK' button alert('User Clicked OK'); }); });
Note that the alert method of this jQuery plugin takes a callback function so that when the user clicks the button in the dialog we can execute some JavaScript code.


// Confirm dialog $('#btconfirm').click(function () { $.jqDialog.confirm('<br /><br /><center><strong>Are you sure ??? ' + ' </strong></center>', // callback function for 'YES' button function () { document.forms[0].submit(); }, // callback function for 'NO' button function () { // No Op } ); });
The confrm() method takes 3 parameters:
- The text to display in the dialog
- A function reference to be called if the user responds in the affirmative
- A function reference to be called if the user responds in the negative
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { // Do whatever you need jere. } } }
Instead of a server side button click event handler we simply add a test for “IsPostBack” to our page’s Page_Load event handler and implement any button specific server side logic there.

// prompt $('#btprompt').click(function () { $.jqDialog.prompt('<br /><br />Please enter your name to agree', '', // callback function for 'OK' button function (data) { if (data == '') { return; } else { alert('Your name ' + data + ' is approved.'); document.forms[0].submit(); } }, // callback function for 'Cancel' button function () { // No Op } ); });
The “data” argument contains the user input and we can do with it as we please.

// custom cotent dialog $('#btcontent').click(function () { $.jqDialog.content('No dialog controls, but any markup you want.<br /><br />' + '<input type='text' name='test' /><br /><br />' + 'Click the 'X' in the upper right corner to close.'); });
Hopefuly these options give you all you need to implement the kinds of Confirm Button Dialogs you will need in your applications.