jQuery Dialog for ASP.NET

A jQuery dialog is a lightweight pop-up which can be used in ASP.NET to get the confirmation from the user before doing some task. Here I shall demonstrate how to work with jQuery dialog in ASP.NET.

First of all we need to import the jQuery core and UI libraries in the head section of the master page

	<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

view raw site.js hosted with ❤ by GitHub

Then add the jQuery dialog to the page

	<script type="text/javascript">
	function ShowPopupDialog() {
	var myDialog = $('#popupdiv');
	myDialog.dialog({
	title: "Alert",
	modal: true,
	buttons: {
	Yes: function () {
	$(document.getElementById('<%= btnYes.ClientID %>')).click();
	myDialog.dialog("close");
	},
	No: function () {
	$(document.getElementById('<%= btnNo.ClientID %>')).click();
	myDialog.dialog("close");
	}
	}
	});
	}
	<script>

view raw jquerydialog.js hosted with ❤ by GitHub

Now we will design the popup and the buttons

	<div id="popupdiv" title="Basic modal dialog" style="display: none"></div>
	<b>Do you want to confirm ?</b>
	</div>
	<div id="hidebutton" style="display: none">
	<asp:Button ID="btnYes" runat="server" Text="Test" OnClick="btnYes_Click" />
	<asp:Button ID="btnNo" runat="server" Text="Reject" OnClick="btnNo_Click" />
	</div>
	<asp:Button ID="btnShow" runat="server" Text="Show Popup" OnClick="btnShow_Click" />
	<asp:TextBox ID="txtMessage" runat="server"></asp:TextBox>

view raw jquerydialog.aspx hosted with ❤ by GitHub

Code behind

	protected void btnYes_Click(object sender, EventArgs e) {
	txtMessage.Text = "Yes Clicked";
	}
	protected void btnNo_Click(object sender, EventArgs e) {
	txtMessage.Text = "No Clicked";
	}
	protected void btnShow_Click(object sender, EventArgs e) {
	ScriptManager.RegisterClientScriptBlock(this, GetType(), "Show Modal Popup", "ShowPopupDialog();", true);
	}

view raw jquerydialog.aspx.cs hosted with ❤ by GitHub

Happy Coding :)