将部分视图选择 2 控件值传递给父视图控制器
Passing partial view select2 controls value to parent view contoller
我有一个局部视图将被多个视图使用。我正在使用 select 2 控件来填充帐号,然后当用户单击“开始”按钮时,它会获取帐户信息。
当用户 select 的帐户和点击去父控制器中的值
作为 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" 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>
结果:
我有一个局部视图将被多个视图使用。我正在使用 select 2 控件来填充帐号,然后当用户单击“开始”按钮时,它会获取帐户信息。
当用户 select 的帐户和点击去父控制器中的值 作为 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" 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>
结果: