錯誤的隱藏字段值被傳遞給操作方法

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()
                })
            );
        });

用戶界面

虛擬機

 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，請參見以下答案： 在@ 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()
        })
    );
});