如何在ASP中将数据从视图发送回控制器.. NET Core MVC应用程序?

Question

我不知道如何将数据从视图传递回控制器。我有一个ChildViewModels的列表，显示在屏幕上。用户可以将数据添加到此列表中，并在一切完成后，按"提交"并将这些项目发送回控制器。

下面是我的视图模型:

public class ParentViewModel
{
public int Id { get; set; }
public IList<ChildViewModel> Children { get; set; }
}
public class ChildViewModel
{
public int Id { get; set; }
public string Name { get; set; }
}

下面是我在主视图中显示它们的方法:

<div id="editorRows">
@foreach (var item in Model.Children)
{
<partial name="_myPartial" model="item" />
}
</div>
<a id="addItem" asp-action="BlankSentence" asp-controller="Home">Add Row...</a> <br />
<input type="submit" id="submit" value="Finished" onclick="SaveUser()" />

这是部分视图的定义:

<div class="editorRow">
@using (Html.BeginCollectionItem("Children"))
{
@Html.HiddenFor(m => m.Id)
<span>Name: </span> @Html.EditorFor(m => m.Name);
}
<a href="#" class="deleteRow">delete</a>

然后我有这样的脚本，添加新的行:

$("#addItem").click(function () {
$.ajax({
url:'@Url.Action("BlankSentence", "Home")',
cache: false,
success: function (html) {
$("#editorRows").append(html);            
}
});
return false;
});

用户可以添加行，所有这些都可以正常工作。然后我想有一个按钮发送信息回控制器。我会创建包含必要数据的对象，包括"内部"添加对象(partialViews?)的信息，并在ajax的帮助下将其发送回来。这可以用下面的函数来完成:

function SaveUser() {
var products = [];
$("#editorRows").each(function(index, value) {
pr.push(value);
});
var model = 
{
Name: "SomeDataFromTextBox",
Products : pr,         
};

$.ajax({
type: "POST",
data: JSON.stringify(model),
url: "/Home/Save",
contentType: "application/json"
}).done(function(res) {       
console.log('res', res);
});
}

这是接收者:

public JsonResult Save([FromBody] SomeViewModel model)
{
return Json(model);
}

我的问题是这个-我如何填充这个集合被发送回控制器?

var products = [];
$("#editorRows").each(function(index, value) {
pr.push(value);
});

我已经尝试了很多东西，它要么发送null，要么甚至不调用Save方法。很抱歉写了这么长的帖子，我对ASP完全陌生。. NET Core，不知道哪些部分代码可以省略而不会失去大意。

同时，如果我的方法在其他方面有缺陷，我希望听到你的评论。

Answer 1

jQuery.each()函数给你索引作为第一个参数和整个html元素作为第二个参数。您需要使用该元素来选择内部输入元素并获取其值。$("#editorRows")还为您提供了包装器div元素，您可以使用$(".editorRow")来获取<div class="editorRow">元素的集合。

var products = [];
$(".editorRow").each(function(index, element) {
// select the element that was created with @Html.EditorFor(m => m.Name)
let inputEl = element.querySelector("input[name='Name']");
// get the input element value
products.push(inputEl.value);
});

jQuery.each()文档