使用Html.BeginFrom在ASP.Net MVC中提交一个带有锚(<a>）标记且具有一定值的表单

Submit a form with anchor (<a>) tag with some value in ASP.Net MVC using Html.BeginFrom

本文关键字：gt lt 表单 具有一 ASP Net BeginFrom Html MVC 一个 使用      更新时间：2023-09-26

我正在使用Html.BeginFrom…创建一个使用外部登录提供程序的from Tag and Submit请求。

帐户控制器中的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来完成，但我不知道如何提供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填充它。在您的视图中，将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"，它将自动绑定到控制器中的"Provider"参数。

相关文章：