Question

我已经为我的MVC应用程序编写了一个AJAX登录对话框。

我现在正在使用oauth添加对第三方身份验证的支持。 Oauth“与AJAX不兼容”（Asp.Net Identity External Login with Ajax），所以我必须使用表格。

我希望我的图标显示在我的其他身份验证选项旁边，如下所示：

Sorry to everyone, everywhere

我发现CSS不直观，所以我能想到的最简单的方法是完成这种格式化并保持响应能力将表单的提交按钮放在使用Bootstrap设置样式的“tabs”div中：

                <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                <li><a href="#red" data-toggle="tab">Sign In</a></li>
                <li><a href="#orange" data-toggle="tab">New Account</a></li>
                <li><span class="externalLoginText">Or login with:</span></li>

                @{
                    using (Html.BeginForm("ExternalLogin", "Account", new { ReturnUrl = ViewBag.returnUrl }))
                    {
                        @Html.AntiForgeryToken()
                        <button class="externalLoginButton" type="submit" id="Google" name="provider" value="Google" title="Log in using your Google account"><img class="externalLoginIcon" src="~/Images/google_plus.png" /></button>
                        <button class="externalLoginButton" type="submit" id="LinkedIn" name="provider" value="LinkedIn" title="Log in using your LinkedIn account"><img class="externalLoginIcon" src="~/Images/linkedin.png" /></button>
                        <button class="externalLoginButton" type="submit" id="Facebook" name="provider" value="Facebook" title="Log in using your Facebook account"><img class="externalLoginIcon" src="~/Images/facebook.png" /></button>

                    }
                }
            </ul>

适用于Chrome。

这是否可能导致旧版浏览器出现渲染问题（将表单嵌套在“ul”元素中）？

如何改进此代码？我知道我可以创建一个隐藏的表单并使用JQuery连接提交。这是最好的方式吗？

我的另一个想法是使用JQuery（Is there a way to submit a "fake" form using jQuery?）来欺骗表单提交，但是第三方登录需要服务器端重定向，而且我不清楚如何在上下文中连接它一个欺骗的表格提交。

Answer 1

您提供的标记无效，可能会导致各种旧浏览器出现问题。以下是非常相似的，不需要做太多改变。

@{
    using (Html.BeginForm("ExternalLogin", "Account", new { ReturnUrl = ViewBag.returnUrl }))
    {
    @Html.AntiForgeryToken()
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li><a href="#red" data-toggle="tab">Sign In</a></li>
        <li><a href="#orange" data-toggle="tab">New Account</a></li>
        <li><span class="externalLoginText">Or login with:</span></li>
        <li class="externalLoginTab"><button class="externalLoginButton" type="submit" id="Google" name="provider" value="Google" title="Log in using your Google account"><img class="externalLoginIcon" src="~/Images/google_plus.png" /></button></li>
        <li class="externalLoginTab"><button class="externalLoginButton" type="submit" id="LinkedIn" name="provider" value="LinkedIn" title="Log in using your LinkedIn account"><img class="externalLoginIcon" src="~/Images/linkedin.png" /></button></li>
        <li class="externalLoginTab"><button class="externalLoginButton" type="submit" id="Facebook" name="provider" value="Facebook" title="Log in using your Facebook account"><img class="externalLoginIcon" src="~/Images/facebook.png" /></button></li>
    </ul>
    }
}

然后，您可能想要为社交按钮取消设置默认＆lt; li＆gt; 标记的各种样式。

.externalLoginTab {
    border: 0;
    [....]
}

在我看来，使用javascript提供此功能是过度的。你已经创建的就足够了。 KISS principle

将表单元素嵌套在Bootstrap选项卡中 - 寻找更清洁的东西

1 个答案: