Home > Jquery in Asp.Net > jQuery Dialog in Asp.Net Master Page

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
  1. johnbrown105
    June 1, 2013 at 12:52 am

    > 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.

    • June 3, 2013 at 8:22 am

      @johnbrown, surely it’ll work.If you’ve any problem let me know I’ll give you running code sample using asp.net buttons.

  2. Warren
    June 20, 2013 at 5:53 am

    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.

    • June 20, 2013 at 6:35 am

      @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
        June 20, 2013 at 9:37 am

        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
        June 20, 2013 at 10:42 am

        @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?

      • June 20, 2013 at 12:35 pm

        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
        June 21, 2013 at 2:10 am

        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?

      • June 21, 2013 at 6:54 am

        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
        June 21, 2013 at 7:12 am

        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?

      • June 21, 2013 at 7:35 am

        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
    August 25, 2013 at 2:00 pm

    ok button is not working

  4. Mohammad Arif
    August 25, 2013 at 2:01 pm

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

    • August 26, 2013 at 3:01 pm

      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. January 21, 2014 at 6:45 am

    thank it work for me.

  6. Paulo
    July 2, 2014 at 12:40 pm
  1. No trackbacks yet.

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

Follow

Get every new post delivered to your Inbox.