如何在索引页内的MVC视图模型中添加列表

Question

我试图添加到索引内的视图模型中的列表。CSHTML，而不需要部分视图或单独视图。

我在MVC中有一个Telesales视图。这个视图模型只是两个列表——一个用于顾问，一个用于操作者。

public class TelesalesViewModel
{
public List<TelesalesOperativeViewModel> Operatives { get; set; }
public List<TelesalesConsultantViewModel> Consultants { get; set; }
}

每个列表都有自己的视图模型来显示它们，如下所示:

public class TelesalesConsultantViewModel
{
public Guid ConsultantId { get; set; }
public string Name { get; set; }
}
public class TelesalesOperativeViewModel
{
public Guid OperativeId { get; set; }
public string Name { get; set; }
}

在视图中，我直接为TelesalesViewModel列出了这些:

@model TelesalesViewModel

<h3>Telesales Data</h3>
<h4>Operatives</h4>
<form class="form-horizontal" enctype="multipart/form-data" id="AddOperativeForm" method="post" action="/Telesales/AddNewOperative">
<label>Name</label>
@Html.EditorFor(m => m.Operatives.Name, new { htmlAttributes = new { @class = "form-control" } });
<button type="submit" class="btn btn-primary">Add Operative</button>
</form>
@if (Model.Operatives.Count > 0)
{
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Operatives) {
<tr>
<td>@item.Name</td>
<td><a class="btn btn-secondary" href="@Url.Action("DeleteOperative", "TelesalesController", new { operativeId = item.OperativeId })">Delete</a></td>
</tr>
}
</tbody>
</table>
} 
<h4>Consultants</h4>
<form class="form-horizontal" enctype="multipart/form-data" id="AddConsultantForm" method="post" action="/Telesales/AddNewConsultant">
<label>Name</label>
@Html.EditorFor(m => m.Consultants.Name, new { htmlAttributes = new { @class = "form-control" } });
<button type="submit" class="btn btn-primary">Add Consultant</button>
</form>
@if (Model.Consultants.Count > 0)
{
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Consultants) {
<tr>
<td>@item.Name</td>
<td><a class="btn btn-secondary" href="@Url.Action("DeleteConsultant", "TelesalesController", new { operativeId = item.ConsultantId })">Delete</a></td>
</tr>
}
</tbody>
</table>
}

对于顶部表单，我想使用输入输入一个名字，并将其添加到操作人员列表中;对于底部表单，我想输入一个名字，并将其添加到顾问列表中。两者都连接到控制器中的相对方法，这都没问题。当我尝试将编辑器映射到列表中的正确属性时，因为尽管TelesalesViewModel包含列表，但它不包含列表中对象的单个属性。

我可以这样做吗?例如，可以使用HTML输入将名称的参数传递给相应的'AddNew…的方法?我四处寻找，但一切都只是说要使用AJAX(这很好，只是我找不到实际代码的例子)或创建一个新的/部分视图。

我觉得我错过了一些非常简单的事情?

Answer 1

您可以使用ajax将名称传递给操作，并将模型保存到db，然后返回添加的模型，并将html添加到tbody。观点:

@model TelesalesViewModel

<h3>Telesales Data</h3>
<h4>Operatives</h4>
<form class="form-horizontal" enctype="multipart/form-data" id="AddOperativeForm" method="post" action="/Telesales/AddNewOperative">
<label>Name</label>
<input class="form-control" id="OperativeName" name="OperativeName" />
<input type="button" onclick="AddOperative()" class="btn btn-primary" value="Add Operative" />
</form>
@if (Model.Operatives.Count > 0)
{
<table id="OperativesTable" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Operatives) {
<tr>
<td>@item.Name</td>
<td><a class="btn btn-secondary" href="@Url.Action("DeleteOperative", "TelesalesController", new { operativeId = item.OperativeId })">Delete</a></td>
</tr>
}
</tbody>
</table>
} 
<h4>Consultants</h4>
<form class="form-horizontal" enctype="multipart/form-data" id="AddConsultantForm" method="post" action="/Telesales/AddNewConsultant">
<label>Name</label>
<input class="form-control" id="ConsultantName" name="ConsultantName" />
<input type="button" onclick="AddConsultant()" class="btn btn-primary" value="Add Consultant" />
</form>
@if (Model.Consultants.Count > 0)
{
<table id="ConsultantsTable" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Consultants) {
<tr>
<td>@item.Name</td>
<td><a class="btn btn-secondary" href="@Url.Action("DeleteConsultant", "TelesalesController", new { operativeId = item.ConsultantId })">Delete</a></td>
</tr>
}
</tbody>
</table>
}

js:

<script>
function AddOperative() {
$.ajax({
type: "POST",
url: "/Telesales/AddNewOperative",
data: { "OperativeName": $("#OperativeName").val() },
success: function (data) {
var html = "<tr><td>" + data.name + "</td><td><a class='btn btn-secondary' href='Telesales/DeleteOperative?operativeId=" + data.operativeId + "'>Delete</a></td></tr>";
$("#OperativesTable tbody")[0].innerHTML += html;
}
});
}
function AddConsultant() {
$.ajax({
type: "POST",
url: "/Telesales/AddNewConsultant",
data: { "ConsultantName": $("#ConsultantName").val() },
success: function (data) {
var html = "<tr><td>" + data.name + "</td><td><a class='btn btn-secondary' href='Telesales/DeleteOperative?operativeId=" + data.consultantId + "'>Delete</a></td></tr>";
$("#ConsultantsTable tbody")[0].innerHTML += html;
}
});
}
</script>

TelesalesController:

public TelesalesOperativeViewModel AddNewOperative(string OperativeName)
{
//save data ans return TelesalesOperativeViewModel here
}
public TelesalesConsultantViewModel AddNewConsultant(string ConsultantName)
{
//save data ans return TelesalesConsultantViewModel here
}