ASP.NET 2.0页面的jQuery登录模态弹出窗口

Question

我有一个ASP.NET网页（不是MVC）（HomePage.aspx）和另一个页面（PRiceList.aspx）。我在我的主页上有一个登录功能。因此，当用户登录网站时，他们可以使用主页上的链接轻松地转到pricelist.aspx页面。如果有人在未登录的情况下进入该页面，我想显示一个模态登录框（背景禁用）以进行登录。我在jqueryui网站上看到了这个功能。请问如何在我的网站上实现这个功能？由于我使用JavaScript将用户凭据发送到网站，所以是否存在安全问题（我不确定）。请给予建议。谢谢。

- Shyju

---

这里有一个关于如何做到这一点的教程： http://everymanprogrammer.com/index.php/using-the-ajax-modalpopup-a-beginners-guide/ - Tim Cadieux

Answer 1

jQuery模态表单对话框是您的最佳选择。我使用它制作了一个测试应用程序，按照您的要求进行操作，并且效果很好。

您的ASPX页面标记：

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

页面需要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");
}});

我在aspx页面上使用的代码后端：

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

根据用户是否经过身份验证，您将给出true或false，因此Javascript将知道是否显示登录。

现在关于安全性。登录不会由Javascript完成，因为用户将点击该登录页面上的按钮，并像正常情况下一样将其提交回服务器。如果您想使用ajax，则必须查看jQuery $.ajax方法。

- Gromer

---

在代码后台文件中，我会检查身份验证，如果用户有效，则重定向到另一个页面，否则在同一模态弹出窗口中显示消息。如何从C# .net代码与JavaScript进行通信？ - Shyju

根据我对你原始问题的理解，这个检查应该在PriceList.aspx的代码后台中进行。你需要检查用户是否已经通过身份验证，并将其注册到隐藏字段中。这样你就可以通过javascript来进行通信。ClientScript.RegisterHiddenField("isAuthenticated", "false");这将在页面上呈现如下内容：<input type="hidden" id="isAuthenticated" value="false" /> - Gromer

谢谢Grommer。但是我在这段代码中遇到了问题。我在这里发布了它。 https://dev59.com/OkfRa4cB1Zd3GeqP-qBl 你能否请看一下并给我建议？ - Shyju

Answer 2

使用jQuery对话框：

http://jqueryui.com/demos/dialog

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

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

- nunespascal