Ajax login dynamic popup dialog

asp.net-mvc asp.net-mvc-3 jquery-ui unobtrusive-validation unobtrusive-ajax
Erik Funkenbusch picture Erik Funkenbusch · Jan 31, 2012 · Viewed 8.5k times · Source

I thought this should be pretty well documented, because it seems like a pretty common scenario. Unfortunately, I find a lot of conflicting information out there and no real consensus on the correct way to go about this in an MVC 3 compatible, unobtrusive Ajax sort of way. I can certainly hack together something that "works", but i'd rather do it the way it's supposed to be done via the framework.

Here's what I need. I have Login link in the upper right corner of the site. The site allows both authenticated and unauthenticated users. So, I want to have a dynamic ajax popup when the user clicks the Login link.

This should go out to the controller, and pull back the HTML for the login dialog. It should then be displayed in a jquery ui popup dialog, and when the users enters their information it should redirect them to the "Dashboard" page (regardless of what page they are currently on). If they enter the wrong credentials, it should stay on the current page with the popup dialog still open and display validation errors ("username or password incorrect").

In other words, it has to tie into mvc 3 unobtrusive validation and use unobtrusive ajax, and display things in a jquery ui dialog.

This seems to be less trivial than I thought it would be. Any pointers to an example that does this? Anyone have a sample they can share?

UPDATE:

The conventional wisdom is, if you need to redirect, don't make it Ajax. However, in this case Ajax is required because I need to validate the creditials and post validation errors without causing a page refresh, or a redirect to a different login page. I need for the authentication to go through and post the errors in the popup dialog.

Answer

Kevin Junghans picture Kevin Junghans · Jan 31, 2012

Take a look at the MVC 4 Developer Preview. They have implemented the logon and registration process as popup dialogs in the skeleton app that is generated when you create a new app. There are a lot of other cool features worth checking out in this preview. Here is what the popup looks like for logon. It uses JQuery UI.

MVC 4 Developer Preview

Related questions

MVC data annotations range validation not working properly

I have a RangeValidator on a property in my model to only allow Integers that are between 0 and 100. I have a partial view that displays a form to update the property via a jQuery UI dialog. I have looked at …

Read More
HTML.ActionLink vs Url.Action in ASP.NET Razor

Is there any difference between HTML.ActionLink vs Url.Action or they are just two ways of doing the same thing? When should I prefer one over the other?

Read More
Multiple models in a view

I want to have 2 models in one view. The page contains both LoginViewModel and RegisterViewModel. e.g. public class LoginViewModel { public string Email { get; set; } public string Password { get; set; } } public class RegisterViewModel { public string Name { get; set; } public string …

Read More