kendo ui grid - 新手无法获得基本样本

时间:2013-07-16 03:17:47

标签: kendo-ui

我熟悉Telerik产品,但对Kendo UI MVC包装器不熟悉。几个月前我最初下载它们并且从来没有真正尝试过它们,所以很遗憾我的试用支持已经过期了。

我在VS.NET中开始了一个全新的Kendo UI MVC应用程序。

我创建了自己的Controller和View。

我复制了批处理编辑示例(http://demos.kendoui.com/web/grid/editing.html)并换出了示例正在使用的数据的静态列表。

网格正确显示我的数据。

但是,单击“保存”时,更新不会向服务器({})发送任何内容。单击“保存”时,删除也不会向服务器({})发送任何内容。创建每个新项目发送一条记录,但Name属性设置为null。

有什么想法吗?

我的代码如下。

谢谢, 凯文

*我的模型*

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace KendoUIMvcApplication1.Models
{
    public class PersonalInterestModel
    {
        public int ID;
        public string Name;
    }
}

*我的控制器*

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using KendoUIMvcApplication1.Models;


namespace KendoUIMvcApplication1.Controllers
{
    public class ManagerController : Controller
    {
        //
        // GET: /Manager/
        private static List<PersonalInterestModel> items = new List<PersonalInterestModel>();

        static ManagerController()
        {
            items.Add(new PersonalInterestModel() { ID = 1, Name = "Finance" });
            items.Add(new PersonalInterestModel() { ID = 2, Name = "Construction" });
            items.Add(new PersonalInterestModel() { ID = 3, Name = "Technology" });
            items.Add(new PersonalInterestModel() { ID = 4, Name = "Entertainment" });
        }

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Editing_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(items.ToDataSourceResult(request));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Editing_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<PersonalInterestModel> products)
        {
            var results = new List<PersonalInterestModel>();

            if (products != null && ModelState.IsValid)
            {
                foreach (var product in products)
                {
                    product.ID = items.Max(i => i.ID) + 1;
                    items.Add(product);
                    results.Add(product);
                }
            }

            return Json(results.ToDataSourceResult(request, ModelState));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<PersonalInterestModel> products)
        {
            if (products != null && ModelState.IsValid)
            {
                foreach (var product in products)
                {
                    var target = items.Find(p => p.ID == product.ID);
                    if (target != null)
                    {
                        target.Name = product.Name;
                    }
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Editing_Destroy([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<PersonalInterestModel> products)
        {
            if (products.Any())
            {
                foreach (var product in products)
                {
                    items.Remove(items.Find(p => p.ID == product.ID));
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }

    }
}

*我的观点*

@{
    ViewBag.Title = "Personal Interests";
}

<h2>Index</h2>

@(Html.Kendo().Grid<KendoUIMvcApplication1.Models.PersonalInterestModel>()    
    .Name("Grid")    
    .Columns(columns => {        
        columns.Bound(p => p.ID).Width(50);
        columns.Bound(p => p.Name).Width(140);
        columns.Command(command => command.Destroy()).Width(110);
    })
    .ToolBar(toolbar => {
        toolbar.Create();
        toolbar.Save();        
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource        
        .Ajax()         
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ID))
        .Create("Editing_Create", "Manager")
        .Read("Editing_Read", "Manager")
        .Update("Editing_Update", "Manager")
        .Destroy("Editing_Destroy", "Manager")
    )
)
<script type="text/javascript">
    function error_handler(e) {    
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function() {
                        message += this + "\n";
                    });
                }
            });        
            alert(message);
        }
    }
</script>

1 个答案:

答案 0 :(得分:4)

我只是在我的项目中尝试你的代码就可以完成这项工作,

MODEL

 public class PersonalInterestModel
    {
        public int ID {get; set;}
        public string Name { get; set; }
    }