ASP.NET 2.o 页面的 jQuery 登录模式弹出窗口

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/867109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 09:57:55  来源:igfitidea点击:

jQuery Login modal popup for ASP.NET 2.o Page

asp.netjquery.net-2.0modalpopups

提问by Shyju

I have an ASP.NET web page(Not MVC ) (HomePage.aspx) and another page (PRiceList.aspx).I have a login feature in my Home page.So when a user logged in the site, They can go to the pricelist.aspx page easily using a link in homepage.If some one is entering the page with out logging in , I want to show a modal login box (background disabled) to login . I saw this in jqueryui site.Can any one tell me how to impement this in my site ? Is there any security problem in this since i am using the javascript to send the user credentials to the site when using this method (I am not sure) . Please advice. Thanks in advance

我有一个 ASP.NET 网页(不是 MVC )(HomePage.aspx)和另一个页面(PRiceList.aspx)。我的主页中有一个登录功能。所以当用户登录网站时,他们可以去pricelist.aspx 页面很容易使用主页中的链接。如果有人在没有登录的情况下进入页面,我想显示一个模式登录框(背景禁用)来登录。我在 jqueryui 网站上看到了这个。谁能告诉我如何在我的网站中实现这一点?这是否存在任何安全问题,因为我在使用此方法时使用 javascript 将用户凭据发送到站点(我不确定)。请指教。提前致谢

回答by Gromer

jQuery Modal Form Dialog is your way to go here. I made a test app doing what you wanted with it and it worked well.

jQuery 模态表单对话框是您的最佳选择。我制作了一个测试应用程序,可以满足您的需求,并且运行良好。

Markup for your ASPX page:

ASPX 页面的标记:

<div id="dialog" title="Please Login">
        <asp:Login ID="login" runat="server" />
</div>

Javascript needed for the page:

页面所需的 Javascript:

$(document).ready(function() {
$("#dialog").dialog({
    bgiframe: true,
    autoOpen: false,
    height: 300,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    close: function() {
        allFields.val("").removeClass("ui-state-error");
    }
});

var isAuthenticated = $("#isAuthenticated").val();
if (isAuthenticated && isAuthenticated == "false") {
    // Display the modal dialog.
    $("#dialog").dialog("open");
}});

Code behind I used on the aspx page:

我在aspx页面上使用的代码:

ClientScript.RegisterHiddenField("isAuthenticated", "false");

You would give it true or false, depending on if the user was authenticated, so the javascript would know to display the login or not.

根据用户是否通过身份验证,您可以将其设为 true 或 false,以便 javascript 知道是否显示登录名。

Now about the security. The login wouldn't be done by the javascript because the user would hit the button on that login page and it would post back to the server like normal. If you wanted to use ajax, you would have to check out the jQuery $.ajaxmethod.

现在关于安全。登录不会由 javascript 完成,因为用户会点击该登录页面上的按钮,它会像往常一样回发到服务器。如果您想使用 ajax,则必须查看 jQuery $.ajax方法。

回答by nunespascal

Use a jquery dialog:

使用 jquery 对话框:

http://jqueryui.com/demos/dialog

http://jqueryui.com/demos/dialog

This needs you to add the modal back to the DOM too.

这也需要您将模态添加回 DOM。

jQuery(".loginPanel").each(function() 
{ 
   var popup = jQuery(this); 
   popup.parent().appendTo(jQuery("form:first")); 
});