ASP.NET MVC Login Modal Dialog/lightbox

Question

I was hoping to create a lightbox/modal dialog for login into my website which is built with asp.net mvc. However the only way i can think of is to put logic into the onClick events for the hyperlinks when linking to restricted sections. I would prefer it so I could still use the Authrisation action filter, and when you click on a link to a action method which requires authrisation it would show the lightbox/modal dialog before proceding on to the actual link. The reason for this is i don't want preform the repetive task of having to remeber to put in the events for the links.

The only way to implement this which i can think of is to preform a ajax push/comet from server to client to show the box in a authrisation filter before the controller continues on. There is also not that much documention of performing ajax pushes/comet in asp.net mvc.

Is there a simplier way?

The digg login window is a example of this.

Answer 1

Use a class to decorate links to actions that require login if you have some that do and some that don't, when the request isn't authorized. When someone clicks a link requiring authorization, then popup your modal dialog. This dialog should post to your login action with the actual url of the link clicked set as the returnUrl parameter for the action. If the login fails, redirect to the login view (appending the returnUrl to the post action for the login form).

Note: This assumes that you are using the jQuery UI dialog, but doesn't use the dialog's button interface. You may need to add the UI classes to the button's yourself to get the correct styling. If you're not using jQuery UI then adjust the dialog code to work with your dialogs.

<% if (!Request.IsAuthenticated) { %>
$(function() {
    $('#loginDialog').hide().dialog({
         modal: true,
         ...
    });
    $('a.requires-login').click( function() {
         returnUrl = $(this).attr('href');
         $('#loginDialog').find('#returnUrl').val(returnUrl);
         $('#loginDialog').dialog('open');
         return false;
    });
<% } %>

<% if (!Request.IsAuthenticated) { %>
<div id="loginDialog">
    <% using (Html.BeginForm("Login","Account")) { %>
         <%= Html.TextBox( "returnUrl", null, new { style = "display: none;" } ) %>
         ... rest of form ...
    <% } %>
</div>
<% } %>

Answer 2

This is exactly what i'd like to achieve but being a newbie to MVC i'm still missing some of the pieces. Does anyone have a example project or code they could share with me so i can understand the solution end-to-end ?

Answer 3

tvanfosson, how do you handle the return from ActionResult in case the submit was invalid? the submit of the form closed the modal already