为什么我的html表中的数据不在帖子的表单值中？

Question

我有一个页面/视图，可以根据传入的模型构建表格。我使用html5拖放功能允许用户将项目从一个表格单元格移动到另一个表格单元格。当我提交表单时，我的表中没有任何数据被发回服务器。该表位于表单标记内。不应该将表数据发送回服务器吗？

我的观点代码是

    @model the19thTee.Core.ScheduleWeek

@{
    ViewBag.Title = string.Format("Edit Schedule Week# {0} | The 19th Tee", Model.WeekNumber);
    Layout = "~/Views/Shared/_the19thTeeLayout.cshtml";
}
<link href="~/styles/edit-schedule.css" rel="stylesheet" />

<h2>Edit Schedule Week - Week# @Model.WeekNumber - @Model.Date.ToShortDateString()</h2>

@using (@Html.BeginForm())
{
    <p>Drag and drop foursomes and teams/players in the box below as a temporary holding area.</p>
    <div id="holding-container" ondrop="drop(event)" ondragover="handleDragOver(event)"></div>
    <div class="schedule_container">
        <table class="schedule_table">
            <tbody>
                <tr>
                    <th colspan="2" class="schedule_table_header_cell">Date</th>
                    @foreach (var @foursome in @Model.Foursomes)
                    {
                        <th class="schedule_table_header_cell">@foursome.TeeTime.Time</th>
                    }
                </tr>
                <tr>
                    <td>@Model.WeekNumber</td>
                    <td>@Model.Date.ToShortDateString()</td>

                    @foreach (var @foursome in @Model.Foursomes)
                    {
                        <td class="foursome-cell">
                            <div class="foursome-container" ondrop="drop(event)" ondragover="handleDragOver(event)" ondragestart="drag(event)">

                                    <div id="@string.Format("foursome{0}", @foursome.PositionIndex)" class="foursome" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="handleDragOver(event)">
                                        <p>Move the whole foursome</p>
                                        <div class="players-container" ondrop="drop(event)" ondragover="handleDragOver(event)">
                                            <p>Drag and drop individual players from/to here</p>
                                            @foreach (var @team in @foursome.Teams)
                                            {
                                                <div id="@string.Format("team{0}", @team.TeamNumber)" class="team-container" draggable="true" ondragstart="drag(event)">@team.TeamName</div>
                                            }
                                        </div>
                                </div>
                            </div>
                        </td>
                    }
                </tr>
            </tbody>
        </table>
    </div>
    <div id="save-cancel-container"><input type="submit" class="btn btn-primary" id="submit-button" name="submit-button" value="Save" /><a href="/admin/edit-schedule" class="btn btn-cancel">Cancel</a></div>
}
<script>
    function handleDragStart(e) {
        this.style.opacity = '0.4';  // this / e.target is the source node.
        this.style.add("dragging");
    }

    function handleDragOver(e) {
        if (e.preventDefault) {
            e.preventDefault(); // Necessary. Allows us to drop.
        }

        e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

        return false;
    }

    function handleDragEnter(e) {
        // this / e.target is the current hover target.
        this.classList.add('over');
    }

    function handleDragLeave(e) {
        this.classList.remove('over');  // this / e.target is previous target element.
    }

    function handleDrop(e) {
        e.preventDefault();
        // this / e.target is current target element.

        if (e.stopPropagation) {
            e.stopPropagation(); // stops the browser from redirecting.
        }

        // See the section on the DataTransfer object.
        var data = e.dataTransfer.getData("text");
        e.target.appendChild(document.getElementById(data));

        return false;
    }

    function handleDragEnd(e) {
        // this/e.target is the source node.

        //[].forEach.call(containers, function (container) {
        //  container.classList.remove('over');
        //});

        e.target.classList.remove("dragging");
    }

    //var containers = document.querySelectorAll('#foursome-container, #player-container');
    //[].forEach.call(containers, function (container) {
    //  container.addEventListener('dragstart', handleDragStart, false);
    //  container.addEventListener('dragenter', handleDragEnter, false)
    //  container.addEventListener('dragover', handleDragOver, false);
    //  container.addEventListener('dragleave', handleDragLeave, false);
    //  container.addEventListener('drop', handleDrop, false);
    //  container.addEventListener('dragend', handleDragEnd, false);
    //});

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        console.log("target.id = " + ev.target.id);

        ev.target.classList.add("dragging");

        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();

        var data = ev.dataTransfer.getData("text");

        console.log("data = " + data);

        var isTeam = data.startsWith("team");

        console.log("isTeam = " + isTeam);

        var el = document.getElementById(data);

        console.log(el);

        console.log("drop target = " + ev.target.id);

        if ((isTeam && ev.target.className == "players-container") || (!isTeam && ev.target.className == "foursome-container") || ev.target.id == "holding-container"){

            ev.target.appendChild(el);

            el.style.opacity = 1.0;

            el.classList.remove("dragging");

            console.log("clearing data");

            ev.dataTransfer.clearData();
        }
    }
</script>