Question

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

Table1
------
eventId
eventName

Table2
------
eventRepeatId
eventId
startTime
endTime

表1＆amp;表2通过eventId字段相关。在我看来，我现在正在做的是将Table2数据绑定到多选框。用户点击jQuery日历，选择开始和结束时间，然后单击＆＃34;添加＆＃34;按钮。这会将新的开始/结束时间添加为多选框的选项。然后，在我的viewmodel方法中，我解析该选项并将其保存到数据库。

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

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

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

Answer 1

如何将数据发布到控制器。你在表格发布时使用完整的邮包。尝试使用ajax功能发布表单数据。

尝试通过java脚本添加删除开始和结束时间。因此，当您发布表单数据时，所有选择都将持续存在。感谢

Answer 2

解决方案（我最终使用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>

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

2 个答案: