jQuery Dialog in Asp.Net Master Page

Web developers have been enjoying the elegancy of the jQuery over the years. Many of us have used jQuery Dialog for different purposes.

In this post I’m trying to show how you can easily integrate it in your master page.
You’ll need to import the jquery core and ui libraries before this dialog code.
Define the dialog code in the head section of the master page.
If you want to know all of its properties and configurations then you can find Documentation

<script type="text/javascript">
$(function () {var dialogDefine = $("#divLoginDialog").dialog({
               autoOpen: false,
               modal: true,
               closeOnEscape: true,
               draggable: false,
               resizable: false,
               position: [350, 250],
               title: "Login",
               overlay: "background-color: black; opacity: 90",
               buttons: {
               Cancel: function(){ $(this).dialog('close');},
               Ok: function () { /*Call your custom validation code;*/ }}
         }); //end dialog
$("#hlkShowLogin").click(function () {
            $("#divLoginDialog").dialog('open');
            $("#divLoginDialog").parent().appendTo($("form:first"));
            return;
        });
});//end Jquery
</script>

The hyperlink which will show the dialog is like;

<a href="#" id="hlkShowLogin" class="link">Login</a>

Here’s the login dialog html. In this post I’ve used jQuery buttons, but you can use asp.net buttons.
EDIT:: In ASP.Net sample code jQuery buttons replaced with normal asp.net buttons.

<div id="divLoginDialog" style="display: none;">
<table cellspacing="0" cellpadding="2">
<tr>
<td class="label">User Name:</td>
<td>
<asp:TextBox ID="txtUserName" ClientIDMode="Static"  runat="server"/>
<asp:RequiredFieldValidator ErrorMessage="User name required" ControlToValidate="txtUserName" runat="server" />
</td>
</tr>
<tr>
<td class="label">Password:</td>
<td>
<asp:TextBox ID="txtPassword" Mode="password" ClientIDMode="Static"  runat="server"/>
<asp:RequiredFieldValidator ErrorMessage="Password required" ControlToValidate="txtPassword" runat="server" />
</td>
</tr>
</table>
</div>

Here download the sample solution in asp.net.

About these ads
This entry was posted in Jquery in Asp.Net and tagged , . Bookmark the permalink.

15 Responses to jQuery Dialog in Asp.Net Master Page

  1. johnbrown105 says:

    > In this post I’ve used jQuery buttons, but you can use asp.net buttons.

    I doubt very much that ASP.NET buttons will work.

  2. Warren says:

    I put it into a blank form on my website (which has masterpages) and everything worked for me, but I can’t click on anything in the dialog. I can use the keyboard to tab between controls and hit space to hit the cancel button, but no other mouse clicks work.

    • @Warren, I tested here and worked fine. Did you import jQuery dependent libraries into your web page. For that you’ll need to import these js and css files.

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

      If still it doesn’t work then let me know with your complete scenario I’ll try to provide some other solutions.

      • Warren says:

        Hi, .. Thank you for the reply. I downloaded your source project and it worked. But it doesn’t seem to want to work on my own solution (which is part of a larger site). On my solution though I have this (Visual Studio 2012) I added a new web application. Which includes the jquery stuff in the master page automatically. I actually updated it via NUGet to the latest version. IN the masterpage it has:

        Which outputs:

        Play around a bit I can get it to work all but the OK button (click it and nothing happens).

      • Warren says:

        @Muhammad,

        Sorry my previous reply, the code didn’t come through. If you are using Visual Studio 2012. If you add a new project –> C# –> ASP.NET Web Forms Application.

        This sets up a web forms app with jquery etc already setup. 1.7.1 and ui.1.8.20

        If I add a new webform, and then add in your code (except jquery stuff as the Script Manager in .NET 4.5 has this integrated to include the correct jquery scripts: see here for more info: http://blogs.msdn.com/b/webdev/archive/2012/09/21/asp-net-4-5-scriptmanager-improvements-in-webforms.aspx).

        Overall it kind of works, with the exception of the OK button, it doesn’t trigger a post back (does nothing). This must be something to do with the masterpage form1?

        I am not sure what the difference is between your project and the one I have created?

      • Your comment has two questions-first why does button click not work? The answer could be;
        Actually when you show a div as a dialog using jQuery or any client side language its position is changed into absolute. That means no more a part of the form. Consequently no postbacks will be triggered. I suppose it might be in your case too. So therefore we need to put this append stuff right after showing dialog.

        $("#divLoginDialog").parent().appendTo($("form:first"));
        or
        $("form").append($("#divLoginDialog"));
        

        Second question — “what is the difference between your project and my one?”.
        If you have imported the dependent jQuery libraries and css then it should work. Other than this, no other dependency is in my project.

      • Warren says:

        Thanks again. The form:first worked fixed the postback problem. There is only one problem now, I couldn’t click on anything in the form, all greyed out like it is modal. But if I changed to modal=false (line:4 in your first code post at top of this article) it works. Do you know why modal=true wouldn’t work in my project?

      • Basically modal:true grayed out the background of dialog so the user can’t click or change anything but only the dialog. And modal:false enables the user can to click the items in the background.
        So nothing is wrong in there in your project.

      • Warren says:

        No I mean, modal:true is actually disabling the modal box as well, which means you can’t select anything anywhere (not even within the dialog box). This only happens in my project, I wonder what would cause this?

      • Did you import css file?
        You might need jQuery libraries used in the sample project, as I might have changed in ui library.
        Other than these there may be no reason.

  3. Mohammad Arif says:

    ok button is not working

  4. Mohammad Arif says:

    when i click on OK button and redirect page from code behind it is not working

    • Arif, I tested here and it worked. May be you are using redirect to some other website. If so then with code behind you can’t do this. But it worked and should work for a page in the current website.

  5. Sandeep says:

    thank it work for me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s