3

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.

Erik Funkenbusch
  • 92,674
  • 28
  • 195
  • 291

3 Answers3

4

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

Kevin Junghans
  • 17,475
  • 4
  • 45
  • 62
  • I haven't installed the preview. My guess is that if there is a problem with the authentication, it redirects to a dedicated login page. I don't want that. Do you know if their version does that? – Erik Funkenbusch Jan 31 '12 at 23:00
  • 1
    It does not redirect to another page in MVC 4. I have updated my answer to show you what the popup looks like for logon in an MVC 4 application. It creates a modal dialog using JQuery UI. You can theme it differently using the theme roller or modifying the CSS. – Kevin Junghans Feb 01 '12 at 13:28
  • Only the login link shows the login in the popup. If you place an Authorize attribute on an action method (like Contact in the default app), you will see it redirects instead. – Ed DeGagne Feb 19 '12 at 02:54
4

Seems like what you are looking for: http://evolpin.wordpress.com/2011/04/26/asp-net-mvc-partial-view-and-ajax-real-world-example/

Zach Green
  • 3,421
  • 4
  • 29
  • 32
0

The point about MVC 4 login preview is that it can be used in two modes. As a Ajax/jQuery popup or standard form.

It does have a bug. It doesn't handle cancelation properly.

Farjad
  • 257
  • 4
  • 9