javascript - 使用 Html.BeginFrom 在 ASP.Net MVC 中提交带有 anchor (<a>) 标记的表单

Question

我正在使用 Html.BeginFrom ... 创建一个 from Tag 和 Submit 请求以使用外部登录提供商。

Account Controller 中的 HttpPost 操作

//
// POST: /Account/ExternalLogin

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public ActionResult ExternalLogin(string provider, string returnUrl)
{
    return new ExternalLoginResult(provider, Url.Action("ExternalLoginCallback", new { ReturnUrl = returnUrl }));
}

我需要将 RetunUrl 和 Provider 发送到上面的操作方法 目前我正在使用 Foreach 和 Razor

创建多个表单

@foreach (ExternalLoginViewModel loginViewModel in Model)
{
    using (Html.BeginForm("ExternalLogin", "Account", new { Provider = loginViewModel.AuthenticationClientData.DisplayName, ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        <a class="@loginViewModel.AnchorCssClass" style="@loginViewModel.AnchorCssStyle" href="#">
            <div class="@loginViewModel.DivCssClass" style="@loginViewModel.DivCssStyle">
                <span aria-hidden="true" class="@loginViewModel.IconCssClass"></span>
            </div>
        </a>
    }
}  

但我认为可以使用单个 from 来完成，但我不知道如何提供随 anchorTag 变化的 Provider 值，例如:

using (Html.BeginForm("ExternalLogin", "Account", new { Provider = "<SomeValue>", ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post))
{
        @Html.AntiForgeryToken()
        @foreach (ExternalLoginViewModel loginViewModel in Model)
        {
             <a class="@loginViewModel.AnchorCssClass" style="@loginViewModel.AnchorCssStyle" href="#">
                <div class="@loginViewModel.DivCssClass" style="@loginViewModel.DivCssStyle">
                    <span aria-hidden="true" class="@loginViewModel.IconCssClass"></span>
                 </div>
            </a>
        }

 }

早期案例中使用的 Javascript 是(它工作正常)

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on("click", ".CSSclassonAnchor", function (e) {
            e.preventDefault();
            var form = $(this).closest("form");
            form.submit();
        });
    });
</script> 

我认为使用 anchor 标记以某种方式发布数据是可能的 在这方面的任何帮助都会很棒..谢谢

Answer 1

一种方法是向表单添加一个隐藏字段，并从 javascript 填充它。在您的 View 中，将 BeginForm 修改为不包含 Provider 参数并添加 <input type="hidden" />形式:

using (Html.BeginForm("ExternalLogin", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.Hidden("Provider", "", new {id=hdnprovider})
    @foreach (ExternalLoginViewModel loginViewModel in Model)
    {
         <a class="@loginViewModel.AnchorCssClass" style="@loginViewModel.AnchorCssStyle" href="#" data-name="@loginViewModel.AuthenticationClientData.DisplayName">
            <div class="@loginViewModel.DivCssClass" style="@loginViewModel.DivCssStyle">
                <span aria-hidden="true" class="@loginViewModel.IconCssClass"></span>
             </div>
        </a>
    }
 }

然后在 Javascript 中使用点击链接的数据名称属性并将其分配给隐藏:

$(document).ready(function() {
    $('a[data-name]').click(function (e) {
        e.preventDefault();
        var form = $(this).closest("form");
        $("#hdnprovider").val($(this).data("Name"));
        form.submit();
    });
});

由于隐藏项的名称为“Provider”，它将自动绑定(bind)到 Controller 中的“Provider”参数。