asp.net mvc - 部分ビュー select2 コントロールの値を親ビュー コントローラーに渡す

複数のビューで使用される部分ビューがあります。選択 2 コントロールを使用してアカウント番号を入力し、ユーザーが [実行] ボタンをクリックするとアカウント情報を取得します。

ユーザーがアカウントを選択して「進む」をクリックすると、親のコントローラーの値が取得されます。 null として

以下のコードを参照してください。

以下のコード //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" [email protected]></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 id="mySelect2" class="form-control accountSelect" name="AccountSearch.AccountNumber"
        [email protected]></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" [email protected] 
                                                  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>

結果:

0