将另一个模型绑定到局部视图，例如嵌套的局部视图绑定 [英] bind another model to partial view like nested partial view binding
本文介绍了将另一个模型绑定到局部视图，例如嵌套的局部视图绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个添加个人搜索部分视图的按钮，个人搜索部分视图也有一个添加按钮，在其中添加了个人搜索特征部分视图.我想将BMRTestData模型与dividualSearch部分绑定，以便我可以获取特征部分视图数据.因此，我将该数据存储在IndividualSearch的列表 public List< Characteristic>中.特性{放;} = new List< Characteristic>();
I have a button which add individualSearch partial view and individualSearch partial view also have a add button which adds individualSearcharacteristic partial view in it.
I want to bind BMRTestData model with individualSearch partial so that i can get the characteristic partial view data. So i store that data in IndividualSearch's list public List<Characteristic> Characteristics { get; set; } = new List<Characteristic>();
请指导我做同样的事情，因为我是.net的新手.
Please guide me to do same as i am new to .net .
编码
//TestData(主视图)
//TestData(Main View)
@using ABC.Core.Models.DTOs
@model ABC.Core.Models.Api.BMRTestData
@using (Html.BeginForm())
{
<div class="card mb-3">
<h5 class="card-header">Response</h5>
<div class="card-body">
<div class="card-block">
<div class="form-group">
@Html.LabelFor(m => m.CompanyName, "Company Name", new { @class = "form-control-label" })
@Html.TextBoxFor(m => m.CompanyName, null, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.CompanyName)
</div>
<div id="searchindividuals" class="mb-3">
@if (Model?.IndividualSearches != null)
{
for (var i = 0; i < Model?.IndividualSearches.Count; i++)
{
<div class="form-group">
@{ Html.RenderPartial("IndividualSearchPartial", Model.IndividualSearches[i], new ViewDataDictionary()); }
</div>
}
}
</div>
<div class="mb-3">
<button id="add-search-individual" type="button" class="btn btn-success">Add Search Individual</button>
</div>
<button id="add-company-characteristic" type="button" class="btn btn-success">Add Characteristic</button>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
}
@section Scripts
{
function add(element){
var action = ' @Url.Action("NewIndividualSearchCharacteristic", "Blended")';
$.post(action)
.done(function (partialView) {
$(element.previousElementSibling).append(partialView);
});
}
</script>
}
//IndividualSearchPartial
//IndividualSearchPartial
@using (Html.BeginCollectionItem("IndividualSearches"))
{
<div id="individual-details" class="card">
<div class="form-horizontal">
<div class="card-block">
<div class="form-group">
@Html.LabelFor(m => m.SearchPostcode, "Search Post Code", new { @class = "form-control-label" })
@Html.TextBoxFor(m => m.SearchPostcode, null, new { @class = "form-control" })
</div>
</div>
</div>
<div class="card-block">
<div id="Characteristics" class="mb-3">
@if (Model?.Characteristics != null)
{
for (var i = 0; i < Model?.Characteristics.Count; i++)
{
<div class="form-group">
@{ Html.RenderPartial("IndividualSearchCharacterisiticPartial", Model.Characteristics[i], new ViewDataDictionary()); }
@* @Html.EditorFor(m => m.Characteristics);*@
</div>
}
}
</div>
<button id="add-characteristics" onclick="add(this)" type="button" class="btn btn-success">Add Characteristics</button>
</div>
</div>
}
//IndividualSearchCharacterisiticPartial
// IndividualSearchCharacterisiticPartial
@model ABC.Core.Models.DTOs.Characteristic
@using (Html.BeginCollectionItem("Characteristics"))
{
<div id="characteristic-details" class="card">
<div class="form-horizontal">
<div class="card-block">
<div class="container">
<div class="row">
<div class="col-*-*">
@Html.LabelFor(m => m.Name, "Name", new { @class = "form-control-label" })
</div>
<div class="col">
@Html.TextBoxFor(m => m.Name, null, new { @class = "form-control" })
</div>
<div class="col-*-*">
@Html.LabelFor(m => m.Value, "Value", new { @class = "form-control-label" })
</div>
<div class="col">
@Html.TextBoxFor(m => m.Value, null, new { @class = "form-control" })
</div>
<div class="col-*-*">
<a id="characteristic-remove" href="#" onclick="removeCharacteristic(this)" class="btn btn-danger pull-right">Remove</a>
</div>
</div>
</div>
</div>
</div>
</div>
}
//个人搜索类
namespace ABC.Core.Models.DTOs.Individual
{
public class IndividualSearch
{
public List<Characteristic> Characteristics { get; set; } = new List<Characteristic>();
}
}
namespace ABC.Core.Models.Api
{
public class BMRTestData : BMRRequest
{
public List<IndividualSearch> IndividualSearches { get; set; } = new List<IndividualSearch>();
}
}
推荐答案
更新
您可以在添加搜索个人按钮中添加onclick事件:
Update
You can add onclick event in Add Search Individual button:
<button id="add-search-individual" type="button" class="btn btn-success" onclick="addSearch(this)">Add Search Individual</button>
在控制器中添加操作以返回 IndividualSearchPartial 部分视图:
Add an action in controller to return IndividualSearchPartial partial view:
[HttpPost]
public ActionResult IndividualSearchCharacteristic()
{
IndividualSearch individualSearch = new IndividualSearch() { };
return PartialView("IndividualSearchPartial", individualSearch);
}
这是主视图中的所有js:
Here is all the js in main view:
@section Scripts
{
<script>
function add(element){
var action = ' @Url.Action("NewIndividualSearchCharacteristic", "Default")';
$.post(action)
.done(function (partialView) {
$(element).parents('#individual-details').find("#Characteristics").append('<div class="form-group">' + partialView + '</div>');
ResetName();
});
}
function addSearch(element){
var action = ' @Url.Action("IndividualSearchCharacteristic", "Default")';
$.post(action)
.done(function (partialView) {
$(element).parents('.mb-3').find('#searchindividuals').append('<div class="form-group search">' + partialView + '</div>');
ResetName();
});
}
function ResetName() {
var index = 0;
$(".search").each(function () {
var nameIndex = 0; var valueIndex = 0;
$(this).find(":input[type='hidden']").each(function () {
$(this).removeAttr("name");
});
$(this).find(":input[type='text']").each(function () {
if ($(this).attr("name").indexOf("Characteristics") > -1 && $(this).attr("name").indexOf("Name") > -1) {
$(this).attr("name", "IndividualSearches[" + index + "].Characteristics[" + nameIndex + "].Name");
nameIndex++;
return;
}
if ($(this).attr("name").indexOf("Characteristics") > -1 && $(this).attr("name").indexOf("Value") > -1) {
$(this).attr("name", "IndividualSearches[" + index + "].Characteristics[" + valueIndex + "].Value");
valueIndex++;
return ;
}
if ($(this).attr("name").indexOf("IndividualSearches") > -1) {
$(this).attr("name", "IndividualSearches[" + index + "].SearchPostcode");
return;
}
});
index++;
})
}
</script>
}
提交后，它将执行以下操作以接收BMRTestData数据:
After submit, it will enter into following action to receive BMRTestData data:
[HttpPost]
public IActionResult TestData(BMRTestData bMRTest)
{
return View();
}
这是测试结果:
这篇关于将另一个模型绑定到局部视图，例如嵌套的局部视图绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
