Jquery 在引导选项卡中嵌套表单元素-查找更干净的内容

我已经为我的MVC应用程序创建了一个AJAX登录对话框

我现在使用oauth添加对第三方身份验证的支持。Oauth“与AJAX不兼容”（），因此我必须使用表单

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

我发现CSS不直观，所以我能想到的实现这种格式并保持其响应性的最简单方法是将表单及其提交按钮放在“tabs”div中，该div采用Bootstrap样式：

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

或通过以下方式登录：
@{
使用（Html.BeginForm（“ExternalLogin”，“Account”，new{ReturnUrl=ViewBag.ReturnUrl}））
{
@Html.AntiForgeryToken（）
}
}

它在铬合金中工作

这是否可能导致旧浏览器上的呈现问题（将表单嵌套在“ul”元素中）

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

---

我的另一个想法是使用JQuery伪造表单提交，（）但是第三方登录需要服务器端重定向，我不清楚如何在伪造表单提交的上下文中连接它。

您提供的标记无效，可能会在各种旧浏览器上引起问题。以下内容相当类似，不需要太多更改

@{
    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>
    }
}

---

在我看来，使用javascript来提供此功能是过分的。您已经创建的内容就足够了

看起来比我的好。谢谢

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