ASP.NET MVC 登录模式对话框/灯箱 [英] ASP.NET MVC Login Modal Dialog/lightbox

问题描述

我希望创建一个灯箱/模式对话框，用于登录我的网站，该网站是用 asp.net mvc 构建的.但是，我能想到的唯一方法是在链接到受限部分时将逻辑放入超链接的 onClick 事件中.我更喜欢它，所以我仍然可以使用授权操作过滤器，当您单击需要授权的操作方法的链接时，它会在继续执行实际链接之前显示灯箱/模式对话框.这样做的原因是我不想执行必须记住为链接添加事件的重复任务.

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.

我能想到的实现这一点的唯一方法是在控制器继续运行之前执行从服务器到客户端的 ajax 推送/彗星，以在授权过滤器中显示该框.也没有太多关于在 asp.net mvc 中执行 ajax pushes/comet 的文档.

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.

有没有更简单的方法?

digg 登录窗口就是一个例子.

The digg login window is a example of this.

推荐答案

使用一个类来装饰需要登录的操作的链接，如果您有一些需要登录，一些不需要登录，而请求未获得授权.当有人单击需要授权的链接时，会弹出您的模式对话框.此对话框应发布到您的登录操作，并将单击的链接的实际 url 设置为操作的 returnUrl 参数.如果登录失败，则重定向到登录视图(将 returnUrl 附加到登录表单的 post 操作中).

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).

注意:这里假设您使用的是 jQuery UI 对话框，但不使用对话框的按钮界面.您可能需要自己将 UI 类添加到按钮中以获得正确的样式.如果您不使用 jQuery UI，请调整对话框代码以使用您的对话框.

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

这篇关于ASP.NET MVC 登录模式对话框/灯箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！