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!

Knowing how MVC routes work is the crux of MVC, the magic, so to speak. — MrBoJangles
– MrBoJangles, Commented Feb 15, 2011 at 23:08

Craig Stuntz · Accepted Answer · 2011-02-15 14:34:29Z

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.

answered Feb 15, 2011 at 14:34

Craig Stuntz

127k12 gold badges257 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pete Over a year ago

I've pointed it to my Login action, and in Fiddler I see itredirects to /login but nothing happens with the dialog

pete Over a year ago

I can also see the html output in fiddler...is my javascript correct?

pete Over a year ago

Ok, I've figured it out, I had no element with an id of container to append the result to:

pete Over a year ago

specifeid in here $("#container").append(htmlResult); doh!

Collectives™ on Stack Overflow

jQuery Modal Login in ASP.Net MVC 3

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related