用于操作一对多关系的MVC视图

本文关键字：MVC 视图 关系 操作 一对多 用于 | 更新日期: 2023-09-27 18:22:19

我有一个ASP.NET MVC应用程序，它具有一对多关系，无需查找（即用户可以输入自己的数据）。我正在尝试确定添加记录的最佳UI。以下是我现在拥有的：

Table1
------
eventId
eventName
Table2
------
eventRepeatId
eventId
startTime
endTime

表1&表2通过eventId字段进行关联。在我看来，我现在正在做的是将Table2数据绑定到一个多选框中。用户单击jQuery日历，选择开始和结束时间，然后单击"添加"按钮。这会将新的开始/结束时间作为选项添加到多选框中。然后，在我的视图模型方法中，我解析该选项并将其保存到DB中。

这目前有效。但是，需要注意的是，当您点击"创建/更新"时，必须在多选框中选择所有选项。否则，发布到控制器的数据为空。

我想找到一种方法来添加和删除事件的开始/结束时间，这样当我点击"创建/更新"时，无论我是否选择了它们，它们都会被传递给控制器。

现在，我倾向于使用jQuery来添加/删除显示用户选择的HTML元素（表或div），并将数据本身作为JSON存储在隐藏的表单字段中。只是想知道是否有更好的方法。

用于操作一对多关系的MVC视图

数据如何过账到控制器。在表单post时使用完整postack。尝试使用ajax功能发布表单数据。

尝试通过java脚本添加remove开始和结束时间。因此，当你发布表单数据时，所有选择都将保持不变。感谢

解决方案（我最终使用了jQuery和一个隐藏字段）：

<div class="col-xs-5">
    <div id="dtpIS" class="row datetimepicker input-group">
        <div class="input-group">
            <input class="form-control" id="IrregularDPStart" data-format="MM/dd/yyyy HH:mm PP" />
            <span class="input-group-addon add-on">
                <i data-time-icon="glyphicon glyphicon-time" data-date-icon="glyphicon glyphicon-calendar">
                </i>
            </span>
        </div>
    </div>
    <div id="dtpIE" class="row datetimepicker input-group">
        <div class="input-group">
            <input class="form-control" id="IrregularDPEnd" data-format="MM/dd/yyyy HH:mm PP" />
            <span class="input-group-addon add-on">
                <i data-time-icon="glyphicon glyphicon-time" data-date-icon="glyphicon glyphicon-calendar">
                </i>
            </span>
        </div>
    </div>
</div>
<div class="col-xs-1">
    <span class="glyphicon glyphicon-chevron-right" id="IrregularAdd"></span>
</div>
<div class="col-xs-6">
    <table id="IDDTable" class="table table-striped">
        <thead>
            <tr>
                <th>Start Time</th>
                <th>End Time</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <input type="hidden" id="EventIrregularRepeats" name="EventIrregularRepeats" />
</div>
<script type="text/javascript">
    var idd = [];
    function UpdateIdd() {
        idd = [];
        $("#IDDTable tbody tr").each(function () {
            var dates = [];
            var count = 0;
            $(this).child("td").each(function () {
                dates[count] = $(this).text();
                count++;
            })
            var newidd = { startTime: dates[0], endTime: dates[1] };
            idd.push(newidd);
        });
        $("#EventIrregularRepeats").val(JSON.stringify(idd));
    }
    $(function () {
        $("#IrregularAdd").on('click', function () {
            var tbody = $("#IDDTable tbody");
            var st = $("#IrregularDPStart").val();
            var end = $("#IrregularDPEnd").val();
            tbody.append("<tr><td>" + st + "</td><td>" + end + "</td><td><span class='iddremove glyphicon glyphicon-remove'></span></td>");
            UpdateIdd();
        })
        $('#IDDTable').on('click', '.iddremove', function () {
            $(this).parents("tr").remove();
            UpdateIdd();
        });
    });
</script>
相关文章：