Sunday, July 22, 2012

How to show Modal Dialog Box with JQueryUI API in Asp.net Web Form

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.

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

5 comments:

  1. This is very cool and works for me, but can you please explain the line:

    $('#dialog').parent().appendTo($('form:first'));

    as this line deforms the modal form.

    Kind Regards

    ReplyDelete
  2. Hi, Sorry. I reply late. That statement is used so that the modal box needs to be appended to the form and then it fire the button click event in the code behind when the button is clicked.

    ReplyDelete
  3. i have used the jquery 1.9.1 and jquery UI 1.10.1, the same code make the jquery dialog behind the thin layer.

    any help..

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Refer this:

    https://github.com/imvkumar/showModalDialogUsingJqueryUI

    ReplyDelete