Question

我有一张表格。此表单中包含项目。我做了与this非常相似的事情。每个项目都是可排序的（可拖动） - 我使用jQuery可排序。当我将表单提交给MVC控制器时 - 订单丢失，我最终得到了db中的默认顺序。我该如何解决这个问题？

我的观点

@using (Html.BeginForm(new { @class = "form-horizontal", role = "form", autocomplete = "off" }))
        {
            @Html.ValidationSummary(true)
            @Html.AntiForgeryToken()

            <div id="itemEditor">

                @if (Model.Items != null)
                {
                    foreach (var item in Model.Items)
                    {
                        Html.RenderPartial("ItemEntryEditor", item);
                    }
                }
            </div>

            <div id="addAnother" class="btn-add-item btn-mnu">Add Item</div>

            <div style="float:right">
                <input type="submit" value="Submit" class="btn-mnu btn-default" />
            </div>
        }

部分视图

@using (Html.BeginCollectionItem("Items")){
<div class="container-item holder1">
    <span class="icono-trash remove-item"></span>
    <div class="row-main-inline">
        <span>*</span>
        @Html.LabelFor(model => model.Category_Name, new { @class = "col-md-2 control-label" })

        <div class="row-contents">
            @Html.EditorFor(model => model.Category_Name)
        </div>
        @Html.ValidationMessageFor(model => model.Category_Name, "", new { @class = "text-danger" })
    </div>

    <div class="row-main-inline">
        <span>*</span>
        @Html.LabelFor(model => model.Quantity, new { @class = "col-md-2 control-label" })
        <div class="row-contents">
            @Html.TextBoxFor(model => model.Quantity, new { @class = "custom-input form-control inp-b", autocomplete = "off" })
            @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="row-main-inline">
        <span>*</span>
        @Html.LabelFor(model => model.Price, new { @class = "col-md-2 control-label" })

        <div class="row-contents">
            @Html.TextBoxFor(model => model.Price, new { @class = "custom-input form-control inp-b" })
            @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="container-item">
        <div class="row-main-inline">
            <span>*</span>
            @Html.LabelFor(model => model.Description, new { @class = "col-md-2 control-label" })

            <div class="row-contents">
                @Html.TextAreaFor(model => model.Description, new { @class = "textarea-custom custom-input form-control inp-b" })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="row-main-inline">
            <span>*</span>
            @Html.LabelFor(model => model.Just_Statement, new { @class = "col-md-2 control-label" })
            <div class="row-contents">
                @Html.TextAreaFor(model => model.Just_Statement, new { @class = "custom-input form-control textarea-custom inp-b" })
                @Html.ValidationMessageFor(model => model.Just_Statement, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>}

的jQuery

                $(function () {
                    $("#itemEditor").sortable();

                    $("#addAnother").click(function () {
                        $.get('/Requisition/ItemEntryRow', function (template) {
                            $("#itemEditor").append(template);
                        });
                    });
                });

感谢并感谢任何帮助！

Answer 1

我发现了问题。这是我的部分观点。 HTML渲染不正确，它搞砸了项目的顺序。

而不是

@using (Html.BeginCollectionItem("Items"))
{
<div class="container-item holder1">
....
</div>
}

应该是

<div class="container-item holder1">
@using (Html.BeginCollectionItem("Items"))
{
....
}
</div>

jQuery可排序POST正确的命令到MVC控制器

1 个答案: