ASP.NET MVC & Kendo Grid 可排序答案

【问题标题】：ASP.NET MVC & Kendo Grid SortableASP.NET MVC & Kendo Grid 可排序
【发布时间】：2014-12-05 06:54:06
【问题描述】：

我是使用 MVC 和 Kendo 的新手。

我有这个控制器：

    public ActionResult Index()
    {
        db.Configuration.ProxyCreationEnabled = false;
        return View(db.students.ToList());
    }

视图有这个：

@model IEnumerable<MVC_Test1.Models.student>

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Pageable(pager => pager
    .PageSizes(new[] { 2, 3, 4 })
    .ButtonCount(5)) 
.Sortable()
.Selectable()
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(2)
    .ServerOperation(false)
 )
.Columns(columns =>
{
    columns.Bound(p => p.FirstName).Title("Name");
    columns.Bound(p => p.MiddleName).Title("Middle");
    columns.Bound(p => p.LastName).Title("Lastname");
    columns.Bound(p => p.EnrollmentDate).Format("{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}").Title("Created");
    columns.Command(commands =>
    {
        commands.Custom("Options");
    }).Title("Options").Width(200);
})

首先，我需要通过模型学生拥有的名为“OrderPos”的属性对列表进行排序。
我想拖放行来更改顺序并自动更新数据库。因此，当我拖放一行时，它会更改数据库中的“OrderPos”字段。

我已经看到了 kendo 可排序小部件，但我不知道如何混合所有内容以使其正常工作。这是演示：http://demos.telerik.com/kendo-ui/sortable/integration-grid

谢谢。

【问题讨论】：

你有拖放功能吗？
您必须捕获在drop 完成后触发的事件，在该事件中您可以触发Ajax 调用并使用它发送网格数据。因此，您的控制器会将 GridView 绑定到 YourModel 类的列表，并且应根据它们在视图中的外观对它们进行排序。这将是最难的部分。我会让你弄清楚如何从那里更新数据库 :) 有很多关于发布 Kendo Grids 数据的示例。如果你真的很挣扎，我会告诉你如何发布它。
你能给我发一个你建议的例子吗？

标签： asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

你看过他们的例子吗：http://demos.telerik.com/aspnet-mvc/sortable/integration-grid？

他们有网格 + 可排序与 MVC 助手一起工作。

【讨论】：

是的，我看到了那个示例，但我看不到如何更新数据库...对不起，我是新手 ;)

【解决方案2】：

在某些事件上将网格发布到服务器

var gridData = $("#ProposalGridX").data("kendoGrid");

            $.ajax({
                url: "/GridPost/PersonPost",
                type: 'POST',
                data: JSON.stringify(gridData.dataSource.view()),
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {

                }
            });


        [HttpPost]
        public JsonResult PersonPost(List<QPM.Models.PortfolioViewModel> model)
        {
            //model will contain gridview
            //update OrderPos
        }

【讨论】：

【解决方案3】：

您需要处理 Sortable 小部件的更改事件，并在其中执行 ajax 发布以更新服务器端的值。

查看活动演示了解更多信息：http://demos.telerik.com/aspnet-mvc/sortable/events

【讨论】：