I used JQuery a lot thesedays for user interactive web pages and then I start using JQueryUI for Dialog box in web form. I realize that It is simpler and more effective than I expected. This post explain you how to create Modal Dialog with JQueryUI in asp.net web form.
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.
If the content length exceeds the maximum height, a scrollbar will automatically appear.
First you need to download the JQuery UI API here and copy them to your project folder. After that, copy and paste the following code to <head> tag.
More Details
Other Nice Post
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.
If the content length exceeds the maximum height, a scrollbar will automatically appear.
 |
| JQueryui Dialog Box in ASP.Net Web Form |
First you need to download the JQuery UI API here and copy them to your project folder. After that, copy and paste the following code to <head> tag.
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(function () {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 500,
closeOnEscape: true,
resizable: false,
draggable: true,
modal: true,
title: "Customer Details"
});
// Dialog Link
$('#btnEditText').click(function () {
$('#dialog').dialog('open');
$('#dialog').parent().appendTo($('form:first'));
return false;
});
$('#editBox_Cancel').click(function () {
$('#dialog').dialog('close');
return false;
});
});
</script>
Create the following control in <form> tag. There are tow sessions (two div) for displaying customer information. One is main content and other is for editing.<asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <!--Using Partial Rendering to Update the Customer View --> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <table> <tr> <td> <b>Customer ID:</b> </td> <td> <asp:Label runat="server" ID="lblCustomerID" Text="C00001" /> </td> </tr> <tr> <td> <b>Company Name:</b> </td> <td> <asp:Label runat="server" ID="lblCompanyName" Text="Eastern Connection" /> </td> </tr> <tr> <td> <b>Contact Name:</b> </td> <td> <asp:Label runat="server" ID="lblContactName" Text="Ann Devon" /> </td> </tr> <tr> <td> <b>Country:</b> </td> <td> <asp:Label runat="server" ID="lblCountry" Text="Germany" /> </td> </tr> </table> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="editBox_OK" /> </Triggers> </asp:UpdatePanel> <asp:Button runat="server" ID="btnEditText" Text="Edit text" /> </div> <div id="dialog"> <!-- Dialog box:: Edit customer info --> <asp:UpdatePanel runat="server" ID="ModalPanel1" RenderMode="Inline" UpdateMode="Conditional"> <ContentTemplate> <table> <tr> <td> <b>Customer ID:</b> </td> <td> <asp:Label runat="server" ID="editCustomerID" /> </td> </tr> <tr> <td> <b>Company Name:</b> </td> <td> <asp:TextBox runat="server" ID="editTxtCompanyName" /> </td> </tr> <tr> <td> <b>Contact Name:</b> </td> <td> <asp:TextBox runat="server" ID="editTxtContactName" /> </td> </tr> <tr> <td> <b>Country:</b> </td> <td> <asp:TextBox runat="server" ID="editTxtCountry" /> </td> </tr> </table> <hr /> <asp:Button ID="btnApply" runat="server" Text="Apply" OnClick="btnApply_Click" /> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="editBox_OK" runat="server" Text="OK" OnClick="editBox_OK_Click" /> <asp:Button ID="editBox_Cancel" runat="server" Text="Cancel" /> </div>In code-behind, the coding is as below.
protected void InitDialog()
{
editCustomerID.Text = lblCustomerID.Text;
editTxtCompanyName.Text = lblCompanyName.Text;
editTxtContactName.Text = lblContactName.Text;
editTxtCountry.Text = lblCountry.Text;
SetFocus("editTxtCompanyName");
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
InitDialog();
}
}
protected void editBox_OK_Click(object sender, EventArgs e)
{
// Save to the database
// Refresh the UI
lblCompanyName.Text = editTxtCompanyName.Text;
lblContactName.Text = editTxtContactName.Text;
lblCountry.Text = editTxtCountry.Text;
}
protected void btnApply_Click(object sender, EventArgs e)
{
if (editTxtCountry.Text == "Germany")
editTxtCountry.Text = "Cuba";
else
editTxtCountry.Text = "USA";
}
The jQuery UI API provides us simple and advance effects that you can use to create highly interactive web applications. Like other jQuery UI effects, jQuery UI Dialog is easy to use. Using it on the right way to help it be more flexible and scalability. You can see other post(How to show Modal Dialog Box with ASP.Net Ajax) I wrote before. Thank.More Details
Other Nice Post
