ASP.NET MVC Login Modal Dialog/lightbox

问题

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.

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

来源：https://stackoverflow.com/questions/1454074/asp-net-mvc-login-modal-dialog-lightbox

标签

asp.net-mvc

modal-dialog

lightbox