0

我有一个提交 TimeItems 集合（一个表对象）的表单，然后将其添加到数据库中。我遇到的问题是我想允许用户在提交之前向集合中添加尽可能多或尽可能少的 TimeItems。目前，TimeItem 的输入字段包括外键的隐藏输入、用于选择员工的组合框和用于输入注释的基本输入框。我的观点，使用 javascript：

<div>
    <img src="" alt="Add row" id="add-timesheet-row" />        
    @Using Html.BeginForm("AddToTimesheet", "Project")
        @<div>
            <input type="hidden" name="TimeItems[0].TaskID" value="@Model.TaskID"/>
            <select name="TimeItems[0].EmployeeID">
                @For Each emp As SelectListItem In ViewBag.EmployeeID
                    @<option value="@emp.Value">@emp.Text</option>
                Next
            </select>
            <input type="text" name="TimeItems[0].Notes" value="Test Notes" />

            <div id="add-row-target" style="display: none"></div>

            <div class="button-submit">
                <input type="submit" value="Create" /> |
                @Html.ActionLink("Back", "Index")
            </div>
        </div>
    End Using
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#add-timesheet-row").click(function () {
            $.get('@Url.Action("RenderTimeItems", New With {.id = Model.TaskID})', function(data) {
                $('#add-row-target').before(data);
            });
        });
    });
</script>

这里发生的是，当单击“添加行”img 时，javascript 返回 RenderTimeItems 操作，该操作又返回部分视图。该部分视图再次包含输入 html（隐藏、组合和文本框）：

<input type="hidden" name="TimeItems[#].TaskID" value="@Model.TaskID"/>
<select name="TimeItems[#].EmployeeID">
    @For Each emp As SelectListItem In ViewBag.EmployeeID
        @<option value="@emp.Value">@emp.Text</option>
    Next
</select>
<input type="text" name="TimeItems[#].Notes" value="Test Notes" />

然后将此 html 添加到原始表单中。我的部分视图的问题是“#”TimeItems[#]需要是一个实际数字，并且每次用户单击“添加行”时都需要递增，以便我的控制器能够正确解释 TimeItems 的集合。请注意在我的原始视图中使用TimeItems[0]初始 TimeItem，因此我的部分视图中的下一个应该是TimeItems[1]. 如何跟踪一个数字，在我的主视图中单击“添加行”时增加它，但在调用 RenderTimeItems 后仍然在部分视图中访问它？

当用户提交表单时，它会转到 AddToTimesheet 操作，该操作使用集合并将每个单独的 TimeItem 添加到数据库中，如下例所示：

<HttpPost()>
Function AddToTimesheet(ByVal TimeItems() As ppTimeItem) As ActionResult
    If TimeItems IsNot Nothing Then
        For Each time In TimeItems
            db.ppTimeItems.Add(time)
            db.SaveChanges()
        Next
    End If
    Return RedirectToAction("Index")
End Function

此外，如果我想允许用户在提交表单之前删除 TimeItem（他们之前添加的），这将从集合中删除一个索引，该索引必须包含并发索引才能正常工作。即如果已添加 、 和 ，然后用户删除TimeItems[0]，TimeItems[1]则将不再正确添加，因为剩余的索引是 0 和 2。有什么想法吗？TimeItems[2]TimeItems[1]TimeItems[2]

4

1 回答 1

1

您首先需要跟踪页面上有多少 TimeItem 行，因此您需要每行都有一些内容。add-row-target会起作用，但我建议给<div>一个像' timeItem'这样的类：

var numItems = $("#add-row-target").length;

您可以继续返回部分视图，并在$.get回调中简单地将返回中的“#”替换data为numItems.

$.get('@Url.Action("RenderTimeItems", New With {.id = Model.TaskID})', function(data) {
                var dataWithNumber = data.replace(/#/g , numItems);
                $('#add-row-target').before(dataWithNumber);
            });

或者，您可以将数字传递给返回部分的操作方法

$.get('@Url.Action("RenderTimeItems", New With {.id = Model.TaskID})?number=' + numItems 


<input type="hidden" name="TimeItems[@Model.Number].TaskID" value="@Model.TaskID"/>
<select name="TimeItems[@Model.Number].EmployeeID">
    @For Each emp As SelectListItem In ViewBag.EmployeeID
        @<option value="@emp.Value">@emp.Text</option>
    Next
</select>
<input type="text" name="TimeItems[@Model.Number].Notes" value="Test Notes" />
于 2013-08-07T18:24:39.767 回答