Question

I’m trying to find an example of how to convert the standard login framework that ships with ASP .NET MVC 2 (the account controllers and views, etc) into a modal login dialog system, like the one at Digg.

After searching for hours, the closest tutorial I found was this: http://www.weirdlover.com/2010/05/20/mvc-render-partial-modal-pop-up-via-jquery-and-colorbox-demo/

However, there are a few modifications I’d like to make to it–such as, if there is a validation error, instead of displaying it inline on the form (ex: <%: Html.ValidationMessageFor(m => m.UserName) %>), I want to slide down a bar at the top of the page like Twitter/Digg. I’m not sure how to make use of the existing authentication framework to access the validation errors in javascript.

Any help would be appreciated. Thanks! Plus if you know of any good tutorials other than the one I posted, that would be great…

Answer 1

Here is the LogOn Action in AccountController.cs

public ActionResult LogOn(LogOnModel model, bool rememberMe, string returnUrl)
        {
            if (ModelState.IsValid)
            {
                if (MembershipService.ValidateUser(model.UserName, model.Password))
                {
                    FormsService.SignIn(model.UserName, rememberMe);
                    if (!String.IsNullOrEmpty(returnUrl))
                    {
                        return Redirect(returnUrl);
                    }
                    else
                    {
                        return RedirectToAction("Index", "Home");
                    }
                }
                else
                {
                    ModelState.AddModelError("", "The user name or password provided is incorrect.");
                }
            }

            // If we got this far, something failed, redisplay form
            return View(model);
        }

The final return View(model), can be changed to return something different, perhaps something like this:

return PartialView("LogOnFailed",model);

Validation errors are held in ModelState which is a special dictionary of model validation errors, you can just iterate over them:

foreach(var error in ModelState)
{
    //do stuff
}