Jquery可排序索引更改为ASP.NET MVC控制器

时间:2013-07-29 17:31:12

标签: asp.net-mvc jquery-ui-sortable

我正在尝试让模型绑定器识别出这种变化。我不确定我在这里缺少什么。基本上,初始页面填充从数据库中提取页码。然后我进行了可排序的工作,Firebug中的原始HTML显示了顺序的变化。但是当我第一次回到模型时,它并没有计算出去发布方法,另一个问题是调查。页面似乎没有按顺序改变。

查看

 @for (var i = 0; i < Model.Pages.Count; i++)
                    {
                        var page = Model.Pages.ElementAt(i);

                        @Html.Hidden("Pages[" + i + "].PageId", page.PageId, new { @class = "page_index" })
                        @Html.Hidden("Pages[" + i + "].PageNumber", page.PageNumber)

                        <li id="@page.PageId" class="sortable-item text-center ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
                        </span>@page.PageNumber</li>
                    }

                </ul>

的JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        $('.sortable').sortable({
            stop: function (event, ui) {
                 var formData = $('#editSurveryForm').serialize();
                 $.ajax({
                    url: "@Url.Action("Edit")",
                    data: formData,
                    type: 'POST',
                    traditional: true,
                    success: function () {
                        alert("success");
                    },
                    error: function () {
                        alert("fail");
                    }
                }
                );
            }
        });
    });
</script>

控制器

    [HttpPost]
    public ActionResult Edit(Survey survey)
    {
        if (!ModelState.IsValid)
        {
            return View("EditSurvey", survey);
        }

        surveyRepository.UpdateSurvey(survey);

        return RedirectToAction("Index", "Administration");
    }

1 个答案:

答案 0 :(得分:1)

好的,我想出这个。我在<li></li>标记之外有隐藏字段。一旦我把它们移到里面,我就按照自己的意愿行事。

    <div class="span9">
        <div class="span4">
            <ul class="sortable_page_list">
                @for (var i = 0; i < Model.Pages.Count; i++)
                {
                    <li class="sortable-item text-center ui-state-default">
                        @Html.HiddenFor(model => model.Pages[i].PageId)
                        @Html.HiddenFor(model => model.Pages[i].PageNumber)
                        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>@Model.Pages[i].PageNumber
                    </li>
                }

            </ul>
            <div class="span1 pull-right internal-wrapper">
                @Html.ActionLink("Add", "AddPage", new { id = Model.SurveyId }, new { @class = "add_survey_icon common_icon_settings" })
            </div>
        </div>
    </div>

<script type="text/javascript">
$(document).ready(function () {
    $('.sortable_page_list').sortable({

        update: function (event, ui) {
            var counter = 1;
            $("[id*='PageNumber']").each(function() {
                $(this).attr("value", counter);
                counter++;
            });

            //var surveyToUpdate = $('#editSurveyForm');
            $.ajax({
                url: '@Url.Action("Edit","Administration")',
                contentType: "application/json; charset=utf-8",
                data: $('#editSurveyForm').serialize(),
                type: 'POST'
            });
        }
    });

});

最后要弄清楚的是为什么ajax帖子没有使用调查表格数据发布到Post方法