在这种情况下使用服务器资源来跟踪更改并不是一个好主意。在购物篮、列表或批量编辑等场景中，最好在客户端跟踪更改。
您需要在服务器端生成视图并不意味着您需要跟踪DbContext. 从服务器获取索引视图并创建视图，但在客户端跟踪更改。然后保存，将所有数据发布到服务器以根据您拥有的跟踪信息保存更改。
客户端更改跟踪的机制取决于需求和场景，例如您可以使用 html 输入跟踪更改，您可以使用 cookie 跟踪更改，您可以使用浏览器内存中的 javascript 对象（如角度场景）跟踪更改。
这是这篇文章，我将展示一个使用 html 输入和模型绑定的示例。要了解有关此主题的更多信息，请查看 Phill Haack 的这篇文章：模型绑定到列表。
例子
在以下示例中，我描述了客户列表的列表编辑方案。为了简单起见，我想：
- 您有一个要在客户端编辑的客户列表。您可能想要添加、编辑或删除项目。
- 添加新项目时，新行的行模板应来自服务器。
- 删除时，您可以通过单击行上的复选框将项目标记为已删除。
- 添加/编辑时，您希望在单元格附近显示验证错误。
- 您想在最后保存更改，请单击“保存”按钮。
要实现上述场景然后您需要创建以下模型、操作和视图：
可追踪<T> 模型
这个类是一个帮助我们进行客户端跟踪和列表编辑的模型：
public class Trackable<T>
{
public Trackable() { }
public Trackable(T model) { Model = model; }
public Guid Index { get; set; } = Guid.NewGuid();
public bool Deleted { get; set; }
public bool Added { get; set; }
public T Model { get; set; }
}
客户模型
客户型号：
public class Customer
{
[Display(Name ="Id")]
public int Id { get; set; }
[StringLength(20, MinimumLength = 1)]
[Required]
[Display(Name ="First Name")]
public string FirstName { get; set; }
[StringLength(20, MinimumLength = 1)]
[Required]
[Display(Name ="Last Name")]
public string LastName { get; set; }
[EmailAddress]
[Required]
[Display(Name ="Email Name")]
public string Email { get; set; }
}
Index.cshtml 视图
Index 视图负责渲染List<Trackable<Customer>>。在渲染每条记录时，我们使用RowTemplate视图。添加新项目时使用的相同视图。
在这个视图中，我们有一个用于保存的提交按钮和一个用于添加新行的按钮，该按钮使用 ajax 调用 Create 操作。
这是索引视图：
@model IEnumerable<Trackable<Customer>>
<h2>Index</h2>
<form method="post" action="Index">
<p>
<button id="create">New Customer</button>
<input type="submit" value="Save All">
</p>
<table class="table" id="data">
<thead>
<tr>
<th>
Delete
</th>
<th>
@Html.DisplayNameFor(x => x.Model.FirstName)
</th>
<th>
@Html.DisplayNameFor(x => x.Model.LastName)
</th>
<th>
@Html.DisplayNameFor(x => x.Model.Email)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
await Html.RenderPartialAsync("RowTemplate", item);
}
</tbody>
</table>
</form>
@section Scripts{
<script>
$(function () {
$('#create').click(function (e) {
e.preventDefault();
$.ajax({
url: 'Create',
method: 'Get',
success: function (data) {
$('#data tbody tr:last-child').after(data);
},
error: function (e) { alert(e); }
});
});
});
</script>
}
RowTemplate.cshtml 视图
此视图负责呈现客户记录。在这个视图中，我们先Index在隐藏中渲染，然后为字段设置前缀[index]，然后渲染字段，包括再次索引、添加、删除和模型 id：
这是 RowTemplate 视图：
@model Trackable<Customer>
<tr>
<td>
@Html.HiddenFor(x => x.Index)
@{Html.ViewData.TemplateInfo.HtmlFieldPrefix = $"[{Model.Index}]";}
@Html.HiddenFor(x => x.Index)
@Html.HiddenFor(x => x.Model.Id)
@Html.HiddenFor(x => x.Added)
@Html.CheckBoxFor(x => x.Deleted)
</td>
<td>
@Html.EditorFor(x => x.Model.FirstName)
@Html.ValidationMessageFor(x => x.Model.FirstName)
</td>
<td>
@Html.EditorFor(x => x.Model.LastName)
@Html.ValidationMessageFor(x => x.Model.LastName)
</td>
<td>
@Html.EditorFor(x => x.Model.Email)
@Html.ValidationMessageFor(x => x.Model.Email)
</td>
</tr>
客户控制器
public class CustomerController : Controller
{
private static List<Customer> list;
}
它将有以下动作。
[GET] 索引操作
在此操作中，您可以从数据库加载数据并将其整形为 aList<Trackable<Customer>>并传递给Index视图：
[HttpGet]
public IActionResult Index()
{
if (list == null)
{
list = Enumerable.Range(1, 5).Select(x => new Customer()
{
Id = x,
FirstName = $"A{x}",
LastName = $"B{x}",
Email = $"A{x}@B{x}.com"
}).ToList();
}
var model = list.Select(x => new Trackable<Customer>(x)).ToList();
return View(model);
}
[GET] 创建动作
此操作负责返回新的行模板。它将由索引视图中的按钮使用 ajax 调用：
[HttpGet]
public IActionResult Create()
{
var model = new Trackable<Customer>(new Customer()) { Added = true };
return PartialView("RowTemplate", model);
}
[POST] 索引操作
此操作负责从客户端接收跟踪的项目并保存它们。它接收的模型是List<Trackable<Customer>>. 它首先去除已删除行的验证错误消息。然后删除那些既被删除又被添加的。然后检查模型状态是否有效，尝试对数据源应用更改。
属性为 true 的项目Deleted被删除，Added为 true 和Deletedfalse 的项目是新项目，其余项目被编辑。然后不需要从数据库中加载所有项目，只需使用 for 循环，调用db.Entry每个项目并设置它们的状态，最后保存更改。
[HttpPost]
public IActionResult Index(List<Trackable<Customer>> model)
{
//Cleanup model errors for deleted rows
var deletedIndexes = model.
Where(x => x.Deleted).Select(x => $"[{x.Index}]");
var modelStateDeletedKeys = ModelState.Keys.
Where(x => deletedIndexes.Any(d => x.StartsWith(d)));
modelStateDeletedKeys.ToList().ForEach(x => ModelState.Remove(x));
//Removing rows which are added and deleted
model.RemoveAll(x => x.Deleted && x.Added);
//If model state is not valid, return view
if (!ModelState.IsValid)
return View(model);
//Deleted rows
model.Where(x => x.Deleted && !x.Added).ToList().ForEach(x =>
{
var i = list.FindIndex(c => c.Id == x.Model.Id);
if (i >= 0)
list.RemoveAt(i);
});
//Added rows
model.Where(x => !x.Deleted && x.Added).ToList().ForEach(x =>
{
list.Add(x.Model);
});
//Edited rows
model.Where(x => !x.Deleted && !x.Added).ToList().ForEach(x =>
{
var i = list.FindIndex(c => c.Id == x.Model.Id);
if (i >= 0)
list[i] = x.Model;
});
//Reditect to action index
return RedirectToAction("Index");
}
