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

【问题标题】：Submit a form with anchor (<a>) tag with some value in ASP.Net MVC using Html.BeginFrom使用 Html.BeginFrom 在 ASP.Net MVC 中提交带有锚 (<a>) 标记的表单
【发布时间】：2013-12-14 12:25:02
【问题描述】：

我正在使用 Html.BeginFrom ... 创建一个 from Tag 并提交请求以使用外部登录提供程序。

帐户控制器中的 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 发送到上面的 action 方法目前我正在使用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 来完成，但我不知道如何提供 Provider 值，该值随 anchorTag 的不同而不同：

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>

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

【问题讨论】：

标签： javascript jquery asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

一种方法是在表单中添加一个隐藏字段，然后从 javascript 填充它。在您看来，将 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 中使用点击链接的 data-name 属性并将其分配给隐藏：

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

由于隐藏的名称为“Provider”，它将自动绑定到控制器中的“Provider”参数。

【讨论】：