asp.net - 像真实登录表单一样提交的虚拟表单

Question

我有一个 Web 应用程序，其登录表单位于~/Account/Login.aspx其中，我在其中实现了登录逻辑并且它按预期工作。

现在，我们的平面设计师重新设计了主页，在一个角落里放了一个小的 html 登录表单。我喜欢在主页中有另一个登录表单的想法，但我不知道如何让这个表单像实际登录页面一样提交。我查看了生成的真实登录页面的 html，但它似乎没有使用 a <form>，所以我不能只调整输入框的名称和表单操作以匹配真实登录的名称。

有没有办法在不重写所有代码的情况下启用这个登录表单？

Answer 1

您可以使用 AJAX 调用会员服务以验证用户身份：

您需要AuthenticationServices在 web.config 文件中启用

<configuration>
  <system.web.extensions>
    <scripting>
      <scriptResourceHandler enableCaching="false" enableCompression="false" />
      <webServices>
        <authenticationService enabled="true" requireSSL="false" />
      </webServices>
    </scripting>
  </system.web.extensions>
</configuration>

然后在一个页面中：

<form id="form1" runat="server">
<div>
    <asp:ScriptManager runat="server" ID="sm">
    </asp:ScriptManager>
    <asp:LoginView runat="server">
        <AnonymousTemplate>
            <input type="tel" name="user" id="user" />
            <br />
            <input type="password" name="pass" id="pass" />
            <br />
            <input type="button" value="Login" name="login" id="login" onclick="attemptLogin(this);" />
        </AnonymousTemplate>
        <LoggedInTemplate>
            <input type="button" name="logout" id="logout" value="Logout" onclick="attemptLogout(this);" />
        </LoggedInTemplate>
    </asp:LoginView>
    <asp:LoginName FormatString="Welcome {0}!" runat="server" />
    <%--<asp:LoginStatus runat="server" />--%>
</div>
    <script>
        function attemptLogin(e) {
            Sys.Services.AuthenticationService.login(
                $get("user").value,
                $get("pass").value,
                false,
                null,
                null,
                function success(validCredentials, userContext, methodName) {
                    if (validCredentials == true) {
                        alert("user logged in");
                        window.location = window.location;
                    }
                    else {
                        alert("user name or password incorrect");
                    }
                }, function fail(error, userContext, methodName) {
                    alert(error.get_message());
                }, null);
        }

        function attemptLogout(e) {
            Sys.Services.AuthenticationService.logout(
                window.location,
                null,
                null,
                null
            );
        }
    </script>
</form>

或者，您可以使用登录逻辑公开 Web 服务并调用该 Web 服务而不是AuthenticationService使用 AJAX

另一种方法是使用登录控件创建一个UserControl，并将该控件放在主页上，在UserControl后面的代码中处理登录事件