jQuery Modal Login in ASP.Net MVC 3

Question

I'm trying to get this http://blog.stevehorn.cc/2009/06/rendering-modal-dialog-with-aspnet-mvc.html to work with MVC 3.

I'm pretty new at ASP.Net MVC, and started an MVC 3 project recently. I want to display a modal login form when the user click on the Log In hyperlink in my _Layout.cshtml file :

<a href="#" id="LogIn">Log In</a>

I've created a Login View in the following location Areas/Auth/Views/Auth/Login.cshtml

I've added the following script to to my _Layout.cshtml file:

    <script type="text/javascript">
        $(document).ready(function () 
        {
            $("#LogIn").click(function (event) 
            {
                $.get( 
                      "~/Areas/Auth/Views/Auth/Login" ,
                      function (htmlResult) 
                      {
                        $("#LoginModal").remove(); //In case this is the second time they've requested the dialog.
                        $("#container").append(htmlResult);
                        $("#LoginModal").dialog();
                      }
                    );
            return false; //To keep the default behavior of the anchor tag from occuring.
});                
</script>

And added a PartialViewResult to my AuthController:

        public PartialViewResult LoginView()
    {
        return PartialView("Login");
    }

However nothing happens when the login link is clicked. Any advice or links to a good MVC 3 tutorial on doing this, would be appreciated.

Thanks!

Answer 1

Your URI is wrong:

"~/Areas/Auth/Views/Auth/Login"

This is a reference to a view, not an action. Your URI needs to refer to an action. Also, JavaScript won't understand ASP.NET's ~ syntax. You probably want something like <%: Url.Content("~/Auth/Auth/LoginView") %> instead.

In the future, a good way to debug these things is Firebug's net panel or Fiddler. You should see the AJAX call returning a 404.