Question

更新：

这是一个SPA应用程序。所以它有js文件也支持提交按钮。所以我认为问题就在它上面。你能告诉我如何修改它以支持多种提交按钮吗？在这一刻，我认为它只支持单个提交按钮。这就是为什么它总是得到我认为的第一个形式的隐藏字段值。谢谢。

JS

 var $loginForm = $('.login-form');

 $loginForm.submit(function (e) {
            e.preventDefault();

            if (!$('.login-form').valid()) {
                return;
            }

            abp.ui.setBusy(
                null,
                abp.ajax({
                    contentType: app.consts.contentTypes.formUrlencoded,
                    url: $loginForm.attr('action'),
                    data: $loginForm.serialize()
                })
            );
        });

UI

VM

 public class LoginViewModel
    {
        public string TenancyName { get; set; }

        [Required]
        public string UsernameOrEmailAddress { get; set; }

        [Required]
        public string Password { get; set; }

        public bool RememberMe { get; set; }
    }

CompanyLoginFormViewModel VM：

 public class CompanyLoginFormViewModel
    {
        public LoginViewModel LoginViewModel { get; set; }

        public List<TenantListDto> Tenants { get; set; }

    }

* .cshtml页面

@{
    var companyLoginFormViewModel = TempData["CompanyLoginFormViewModel"] as CompanyLoginFormViewModel;
} 

    @foreach (var tenant in companyLoginFormViewModel.Tenants)
                {
                    <form class="login-form" action="@Url.Action("Login")?returnUrl=@ViewBag.ReturnUrl" name="companyLoginForm" method="post">
    <input type="hidden" name="usernameOrEmailAddress" value="@companyLoginFormViewModel.LoginViewModel.UsernameOrEmailAddress" />
                <input type="hidden" name="password" value="@companyLoginFormViewModel.LoginViewModel.Password" />
                       <input type="hidden" name="rememberMe" value="true" />
                        <input type="hidden" name="companyUrl" value="true" />
                        <input type="hidden" name="tenancyName" value="@tenant.TenancyName" />

                        <div class="row margin-top-10">
                            <div class="col-xs-3">
                                <button type="submit" class="btn btn-success uppercase">@L("LogIn")</button>
                            </div>
                           </div>
                    </form>
                }

生成的HTML

     <form class="login-form" action="/Account/Login?returnUrl=/Application" name="companyLoginForm" method="post" novalidate="novalidate">
         <input type="hidden" name="usernameOrEmailAddress" value="fake@gmail.com">
          <input type="hidden" name="password" value="fake">
            <input type="hidden" name="rememberMe" value="true">
            <input type="hidden" name="companyUrl" value="true">
            <input type="hidden" name="tenancyName" value="Asset_Management">

            <div class="row margin-top-10">
                <div class="col-xs-3">
                    <button type="submit" class="btn btn-success uppercase">Log in</button>
                </div>
            </div>
        </form>
        <form class="login-form" action="/Account/Login?returnUrl=/Application" name="companyLoginForm" method="post" novalidate="novalidate">
    <input type="hidden" name="usernameOrEmailAddress" value="fake@gmail.com">
            <input type="hidden" name="password" value="fake">
            <input type="hidden" name="rememberMe" value="true">
            <input type="hidden" name="companyUrl" value="true">
            <input type="hidden" name="tenancyName" value="Associates">

            <div class="row margin-top-10">
                <div class="col-xs-3">
                    <button type="submit" class="btn btn-success uppercase">Log in</button>
                </div>
               </div>
        </form>
        <form class="login-form" action="/Account/Login?returnUrl=/Application" name="companyLoginForm" method="post" novalidate="novalidate">
<input type="hidden" name="usernameOrEmailAddress" value="fake@gmail.com">
        <input type="hidden" name="password" value="fake">
            <input type="hidden" name="rememberMe" value="true">
            <input type="hidden" name="companyUrl" value="true">
            <input type="hidden" name="tenancyName" value="ALL">

            <div class="row margin-top-10">
                <div class="col-xs-3">
                    <button type="submit" class="btn btn-success uppercase">Log in</button>
                </div>
            </div>
        </form>

发布方法

 [HttpPost]      
    public virtual async Task<JsonResult> Login(LoginViewModel loginModel, string returnUrl = "", string returnUrlHash = "", bool companyUrl = false)
   {
             CheckModelState();
            // removed for clarity
    }

问题：即使我按下了第二个提交按钮，也始终将tenancyName作为第一个提交按钮的值发送。这是Asset_Management。你告诉我为什么？谢谢。

Answer 1

为什么你甚至有<form>和<button>？为什么不在foreach循环中创建链接，如下所示：

@Html.ActionLink("Login for " + tenant.Name, "LoginAction", new {Id=tenant.Id})

您可以使用CSS随后将这些链接设置为蓝色和漂亮的样式。

Update1，您可以使用匿名对象将参数传递给控制器。你看到我如何传递Id吗？您的操作需要接受ID，请参阅以下答案：passing multiple parameters in @html.actionlink()

Update2，像这样传递用户名和密码是非常糟糕的做法。您正在向视图公开安全凭据。您应该将用户转发到登录页面，其中包含用户将登录的用户名+密码输入框。

Answer 2

你的问题在于脚本。

var $loginForm = $('.login-form');

是所有表单的集合，但

data: $loginForm.serialize(),

只会序列化第一个，所以你总是发布第一个表单的值。修改脚本以处理按钮.click()事件并获取其关联的表单

$('.btn-success').click(function(e) { 
    e.preventDefault(); // if you makes the button type="button" this is not required
    var form = $(this).closest('.login-form');
    if (!form.valid()) {
        return;
    }
    abp.ui.setBusy(
        null,
        abp.ajax({
            contentType: app.consts.contentTypes.formUrlencoded,
            url: form.attr('action'),
            data: form.serialize()
        })
    );
});

错误的隐藏字段值正在传递给Action Method

2 个答案: