Passing partial view select2 controls value to parent view contoller - asp.net-mvc

Question

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

Answer 1

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: