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 ev

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>
<% } %>