将部分视图选择 2 控件值传递给父视图控制器答案

【问题标题】：Passing partial view select2 controls value to parent view contoller将部分视图选择 2 控件值传递给父视图控制器
【发布时间】：2020-09-03 03:15:02
【问题描述】：

我有一个局部视图，将被多个视图使用。我正在使用选择 2 控件来填充帐号，然后当用户单击“开始”按钮时，它会获取帐户信息。

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

请看下面的代码。

如果你看到下面的代码//accountInfo.AccountSearch.AccountNumber -- 这个值是空的

局部视图 - 视图模型

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

【问题讨论】：

标签： asp.net-mvc asp.net-core partial-views asp.net-mvc-partialview

【解决方案1】：

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>

结果：

【讨论】：