将部分视图select2控件值传递给父视图控制器

问题描述

我有一个局部视图，该视图将被多个视图使用。我使用的是select 2控件来填充帐号，然后当用户单击“执行”按钮时，它将获得帐户信息。

当用户选择帐户并单击进入时，父级控制器中的值就会出现 为空

请参见以下代码。

如果您看到以下代码 // accountInfo.AccountSearch.AccountNumber，则此值为null

部分视图-视图模型

public class AccountSearchviewmodel
{
    [display(Name = "Account Number"),DataType(DataType.Text)]
        public string AccountNumber { get; set; }
}

父视图模型

 public class AccountInfoviewmodel
    {
       public string AccountName { get; set; }
       public string Adddress { get; set;}
       public string City { get; set;}
       public string Zip { get; set; }
       public string PhoneNumber { get; set;}
      
       public AccountSearchviewmodel AccountSearch
       {
          get 
          { 
              if(_accountSearch == null)
              {
                  _accountSearch = new AccountSearchviewmodel();
              }
              return _accountSearch;
          }
          set { _accountSearch = value; }
       }
    
   private AccountSearchviewmodel _accountSearch;   

 }

部分视图cshtml

@model Vfs.PsfProWeb.Models.Fleet.AccountSearchviewmodel
<div class="col-md-10">
    <label> Account Number</label>
    <div class="input-group">
        <select id="mySelect2" class="form-control accountSelect" text=@Model.AccountNumber></select>
    </div>
</div>

父视图-调用部分视图

 @model Vfs.PsfProWeb.Models.Fleet.AccountInfoviewmodel
     <div class="card-body pt-2">
         <div class="form-row">
         <div class="col-11">
             @(await Html.PartialAsync("~/Views/Fleet/_AccountNumberSearch.cshtml",Model.AccountSearch))
             </div>
             <div class="col-md-1">
             <button  type="submit" class="btn btn-primary" asp-action="GetAccountinformation" asp-controller="AccountInfo">Go</button>
             </div>
             </div>
    </div>

父控制器

public IActionResult GetAccountInforAccountInfoviewmodel accountInfo)
{
            try
            {
            
               //accountInfo.AccountSearch.AccountNumber -- this value comes in as null
               var acctInfo = _accountDomain.GetAcctInfoEntity(accountInfo.AccountSearch.AccountNumber));
                return View("~/Views/Fleet/AccountOtb.cshtml",acctInfo);
            }
            catch (Exception ex)
            {

                throw;
            }
 }

解决方法

select名称应与模型属性名称匹配，如下所示：

<select id="mySelect2" class="form-control accountSelect" name="AccountSearch.AccountNumber"
        text=@Model.AccountNumber></select>

这是整个工作示例：

查看：

@model AccountInfoViewModel
<form asp-action="GetAccountInformation" asp-controller="Home">
    <div class="card-body pt-2">
        <div class="form-row">
            <div class="col-11">
                @(await Html.PartialAsync("_partial",Model.AccountSearch))
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-primary" >Go</button>
            </div>
        </div>
    </div>
</form>

@section Scripts
{
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#mySelect2").select2();

        })
    </script>
}

部分视图：

@model AccountSearchViewModel
<div class="col-md-10">
    <label> Account Number</label>
    <div class="input-group">
        <select id="mySelect2" class="form-control accountSelect" text=@Model.AccountNumber 
                                                  name="AccountSearch.AccountNumber">
            <option value="Select" disabled>Select</option>
            <option value="aaa">aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
            <option value="ddd">ddd</option>
        </select>
    </div>
</div>

结果：