MVC视图用于处理一对多关系

Question

I have an ASP.NET MVC application with a one-to-many relationship WITHOUT lookups (ie the user can input their own data). I'm trying to determine the best UI for adding records. Here is what I have right now:

Table1
------
eventId
eventName

Table2
------
eventRepeatId
eventId
startTime
endTime

Table1 & Table2 are related through the eventId field. On my view, what I'm doing right now is tying the Table2 data to a multiselect box. The user clicks on a jQuery calendar, chooses a start and end time, and clicks an "add" button. This adds the new start/end time as an option to the multiselect box. Then, in my viewmodel method, I'm parsing the option and saving it to the DB.

This works currently. However, the caveat is that you have to have all of the options selected in the multiselect box when you hit "Create/Update". Otherwise, the data posted to the controller is null.

I'd like to find a method of adding and removing a number of start/end times to the event so that when I hit "Create/Update", they are all passed to the controller regardless of whether I have them selected or not.

Right now I'm leaning towards using jQuery to add/remove HTML elements (tables or divs) displaying the user's selections, and storing the data itself as JSON in a hidden form field. Just wondering if there's a better way.

Answer 1

How data is posting to controller. R u using full postack when form post. Try to use ajax functionality to post form data.

try to add remove start and end time through java script. So when u post the form data then all selection will persist. Thanks

Answer 2

Solution (I ended up using jQuery and a hidden field):

<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>