使用EF在回发.net框架4.7.2 MCV上动态添加不绑定的表单数据

Question

我有一个模型，它有一个动态对象的数组。这个对象只有一个startdatetime、enddatetime和一个表示槽数的int。

我正在使用MVC、EF和.net 4.7.2

我最终想要做的是允许用户(使用js(将多个记录添加到一个表中。这很管用！

损坏的是在回发时，数组未绑定到数组。

我做错了什么？

我有两种型号：

public class testmodel
{

[Required]
public DateTime StartDateTime { get; set; }
[Required]
public DateTime EndDateTime { get; set; }
public int? NumberOfSlots { get; set; }
}
public class testMainModel
{
public List<testmodel> AllDates { get; set; }
}

控制器：

public async Task<ActionResult> TestShifts()
{
Models.testMainModel model = new Models.testMainModel();
List<Models.testmodel> testDates = new List<Models.testmodel>();
model.AllDates = testDates;
return View(model) ;
}
[HttpPost]
public async Task<ActionResult> TestShifts(Models.testMainModel model)
{
var x = model;
var y = 1;
return View(model);
}

视图：

@model WCSOReserves.Models.testMainModel
@{
ViewBag.Title = "TestShifts";
}
<h2>TestShifts</h2>
@using (Html.BeginForm("TestShifts", "Events", FormMethod.Post))
{
<div>
<table class="table table-striped">
<thead>
<tr>
<th>Start Date/Time</th>
<th>End Date/Time</th>
<th></th>
</tr>
</thead>
<tbody id="eventDateTimes" data-event-dates-start-count="@(Model.AllDates.Count - 1)">
@for (int i = 0; i < Model.AllDates.Count; i++)
{
<tr data-id="@i">
<td>
<input asp-for="@Model.AllDates[i].StartDateTime" class="form-control" />
</td>
<td>
<input asp-for="@Model.AllDates[i].EndDateTime" class="form-control" />
</td>
<td>
<button type="button" class="btn btn-sm btn-danger">
<i class="align-middle me-2 fas fa-fw fa-trash-alt"></i>
</button>
</td>
</tr>
}
</tbody>
</table>
<div>
<button type="button" class="btn btn-secondary" id="addDateTime">Add Shift</button>
</div>
<div>
<input type="submit" class="btn btn-primary" id="Submit" value="Submit" />
</div>
</div>
}
@section Scripts{
<script>
$(document).ready(function () {


$('button#addDateTime').on('click', function() {
var countVal = parseInt($('#eventDateTimes').attr('data-event-dates-start-count'));

countVal += 1;
var inputStartDate = $('<input />').attr('type', 'datetime-local').attr('data-val', 'true')
.attr('data-val-required', 'The Start Date Field is required.')
.attr('id', 'testMainModel_AllDates_' + countVal + '__StartDateTime')
.attr('name', 'testMainModel.AllDates[' + countVal + '].StartDateTime').addClass('form-control');
var inputEndDate = $('<input />').attr('type', 'datetime-local').attr('data-val', 'true')
.attr('data-val-required', 'The End Date Field is required.')
.attr('id', 'testMainModel_AllDates_' + countVal + '__EndDateTime')
.attr('name', 'testMainModel.AllDates[' + countVal + '].EndDateTime').addClass('form-control');
var button = $('<button />').attr('type', 'button').addClass('btn btn-sm btn-danger')
.append($('<i />').addClass('align-middle me-2 fas fa-fw fa-trash-alt'));
var row = $('<tr />')
.attr('data-id', countVal)
.append($('<td />').append(inputStartDate))
.append($('<td />').append(inputEndDate))
.append($('<td />').append(button));
$('#eventDateTimes').append(row);

$('#eventDateTimes').attr('data-event-dates-start-count', countVal);
});

$(document).on('click',
'#eventDateTimes tr td button',
function() {
$('tr[data-id="' + $(this).parent().parent().attr('data-id') + '"]').remove();
});

});

</script>

js有效，我可以动态添加行。但是，在回发时，模型为空。

Answer 1

js工作，我可以动态添加行。但是，在回发时，模型为空。

不仅仅是您的回发。您甚至无法在后端接收导致回发空模型的模型。

模型绑定系统按名称绑定属性。您的前端名称属性类似于testMainModel.AllDates[index].PropertyName，与后端不匹配。

一个简单的方法是更改操作后的参数名称，如下所示：

[HttpPost]
public async Task<ActionResult> TestShifts(Models.testMainModel testMainModel)
{
var x = testMainModel;
var y = 1;
return View(testMainModel);
}

另一种方法是，您可以将name从testMainModel.AllDates[index].PropertyName更改为AllDates[index].PropertyName。通过这种方式，您将不需要更改操作参数。

var inputStartDate = $('<input />').attr('type', 'datetime-local').attr('data-val', 'true')
.attr('data-val-required', 'The Start Date Field is required.')
.attr('id', 'testMainModel_AllDates_' + countVal + '__StartDateTime')
.attr('name', 'AllDates[' + countVal + '].StartDateTime').addClass('form-control');
var inputEndDate = $('<input />').attr('type', 'datetime-local').attr('data-val', 'true')
.attr('data-val-required', 'The End Date Field is required.')
.attr('id', 'testMainModel_AllDates_' + countVal + '__EndDateTime')
.attr('name', 'AllDates[' + countVal + '].EndDateTime').addClass('form-control');

此外，ASP。NET没有标记帮助程序，它使用Html帮助程序。ASP中存在标记帮助程序。NET核心。因此，如果您使用ASP。NET，您需要更改以下html代码：

<td>
@Html.EditorFor(model => Model.AllDates[i].StartDateTime, new { htmlAttributes = new { @class = "form-control",@type= "datetime-local" } })
</td>
<td>
@Html.EditorFor(model => Model.AllDates[i].EndDateTime, new { htmlAttributes = new { @class = "form-control", @type = "datetime-local" } })
</td>

Answer 2

此处data-event-dates-start-count应与总计数相同。

尝试

<tbody id="eventDateTimes" data-event-dates-start-count="@(Model.AllDates.Count)">

代替

<tbody id="eventDateTimes" data-event-dates-start-count="@(Model.AllDates.Count - 1)">