我正在使用.net核心2.2框架,我很难找到如何将对象列表绑定到剃刀页面。在剃刀页面上,我有一个按钮,可以在表格中添加新行。此按钮执行jquery单击事件,该事件会更改html以添加新行而不刷新页面。我想要做的是,当我添加一行时,它将它绑定到对象列表。然后我可以在发布表单时处理这个项目列表。
我的Razor Page cs看起来像这样:
public class CreateModel : PageModel
{
#region Variables
private readonly MyContext _myContext;
#endregion
#region Properties
[BindProperty]
public List<MyRows> rows { get; set; }
#endregion
public CreateModel(MyContext myContext)
{
_myContext = myContext;
}
public async Task<IActionResult> OnGetAsync()
{
return Page();
}
public async Task<IActionResult> OnPostAsync()
{
return Page();
}
}
Razor Page cshtml看起来像这样:
...
<table id="myRows" class="table">
@foreach (var row in Model.Rows)
{
<tr class="myrow">
<td class="section table-column-center" rowspan="2">
<input asp-for="@row.Name" class="form-control" />
<span asp-validation-for="@row.Name" class="text-danger"></span>
</td>
</tr>
}
</table>
<div class="item-add">
<a id="add-row" class="link-button"><img class="add-item" src="@Url.Content("~/images/ic_add.png")" />Add Row</a>
</div>
最后这是我的jquery代码:
$("#add-row").click(function () {
// var nextId = $(".myrow").length;
var rowHtml = '<tr class="myrow">' +
'<td class="section table-column-center" rowspan="2">' +
'<input class="form-control" type="text" id="row_Name" name="row.Name" value="">' +
'<span class="text-danger field-validation-valid" data-valmsg-for="row.Name" data-valmsg-replace="true"></span>' +
'</td>' +
'</tr>';
$("#myRows").append(rowHtml);
});
最后,当我发布包含此代码的表单时,我希望能够从我的binded属性访问输入到动态创建的html中的值。请记住,在此示例中,我只添加新行,但我还需要删除和编辑它们。
我可能会说这一切都错了,所以如果有人知道我怎么能做到这一点,欢迎所有的想法。如果有任何不明白的事情请告诉我,我会尽力澄清。
尝试以下可行的示例
Razor Page cs代码
public class CreateModel : PageModel
{
[BindProperty]
public List<MyRows> rows { get; set; }
public void OnGet()
{
rows = new List<MyRows>()
{
new MyRows{ Name="name1"},
new MyRows{ Name="name2"}
};
}
public async Task OnPostAsync()
{
var list = rows;
}
public class MyRows
{
public string Name { get; set; }
}
}
Razor Page cshtml代码
@page
@model RazorPages2_2Project.Pages.Tests.CreateModel
@{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<form method="post">
<table id="myRows" class="table">
@for (var i=0;i<Model.rows.Count();i++)
{
<tr class="myrow">
<td class="section table-column-center" rowspan="2">
<input asp-for="rows[i].Name" class="form-control" />
<span asp-validation-for="rows[i].Name" class="text-danger"></span>
</td>
</tr>
}
</table>
<div class="item-add">
<a id="add-row" class="link-button">Add Row</a>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</form>
jquery代码如下
<script>
$("#add-row").click(function () {
var nextId = $(".myrow").length;
//Or var nextId = @Model.rows.Count();
var rowHtml = '<tr class="myrow">' +
'<td class="section table-column-center" rowspan="2">' +
'<input class="form-control" type="text" id="rows_' + nextId + '_Name" name="rows[' + nextId + '].Name" value="">' +
'<span class="text-danger field-validation-valid" data-valmsg-for="rows[' + nextId + '].Name" data-valmsg-replace="true"></span>' +
'</td>' +
'</tr>';
$("#myRows").append(rowHtml);
});
</script>