asp.net-mvcasp.net-corepartial-viewsasp.net-mvc-partialview

Passing partial view select2 controls value to parent view contoller


I have a partial view which will be used by multiple views. I am using a select 2 control to populate the account number then when user clicks go button it gets account information.

When the user selects the account and clicks go the value in the controller of the parent comes as null

Please see the below code.

if you see the below code //accountInfo.AccountSearch.AccountNumber -- this value comes in as null

Partial view - view model

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

Parent view Model

 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;   

 }

Partial view 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>

Parent view - which calls the partial view

 @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>

Parent controller

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

Solution

  • The select name should match the model property name like below:

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

    Here is the whole working demo:

    View:

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

    Partial View:

    @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>
    

    Result: enter image description here