KendoUI MVC Json - 他们一起工作吗?

时间:2013-01-02 07:39:01

标签: asp.net-mvc kendo-ui

我是客户端服务器,SQL程序员(RAD家伙),公司决定我们必须转向.NET环境。我们现在正在研究这个平台。

本周我研究了MVC4和实体框架,我已经阅读了很多关于KendoUI的内容。我持怀疑态度,因为大多数例子都带有KendoGrid + WebApi。我对WebApi知之甚少,但我真的非常喜欢实体的事情所以我认为我不应该给它一个机会。

我想问一些看起来很幼稚的问题,但答案对我有很大帮助

  1. 一旦我从现有数据库创建实体,我可以将结果用Json格式并用它来提供KendoGrid吗?

    如果是,怎么样?我的意思是:

  2. 如何在Controller中的Json中转换结果?

  3. 在KendoGrid的transport属性中,我应该输入Controller / Action的URL吗?

    和最天真的

  4. Telerik是否有任何关于提供可视工具来创建配置kendoGrid的想法?为了使它更多RAD因为现在需要TOO MUCH编码。也许你可以使用Grid列,数据源,传输选择器等连接实体的向导。

2 个答案:

答案 0 :(得分:3)

我希望你选择剑道实体路径,但是会有学习曲线。不,问题4.但是,让我使用Razor视图引擎快速启动并回答1,2和3。

首先,EF正在创建业务对象。你应该'将这些转换为MVC中的模型。在此示例中,Person来自EF。我认为这是扁平化,因为它会从对象中移除深度,尽管它仍然可用,因此如果您的数据库设置如此,您可以引用Person.Titles.Name之类的东西。您也可以放入DataAnnotations,它只是摇滚。

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using Project.Business;

namespace Project.Web.Models
{
    public class PersonModel
    {
        public int Id { get; set; }
        [Required(ErrorMessage = "Last Name is required.")]
        public string LastName { get; set; }
        [Required(ErrorMessage = "First Name is required.")]
        public string FirstName { get; set; }
        [Display(Name = "Created")]
        public System.DateTime StampCreated { get; set; }
        [Display(Name = "Updated")]
        public System.DateTime StampUpdated { get; set; }
        [Display(Name = "Enabled")]
        public bool IsActive { get; set; }

        public PersonModel()
        {}
        public PersonModel(Person person)
        {
            Id = person.Id;
            FirstName = person.FirstName;
            LastName = person.LastName;
            StampCreated = person.StampCreated;
            StampUpdated = person.StampUpdated;
            IsActive = person.IsActive;
        }

        public static IList<PersonModel> FlattenToThis(IList<Person> people)
        {
            return people.Select(person => new PersonModel(person)).ToList();
        }

    }
}

继续......

@(Html.Kendo().Grid<PersonModel>()
    .Name("PersonGrid")
    .Columns(columns => {
        columns.Bound(b => b.Id).Hidden();
        columns.Bound(b => b.LastName).EditorTemplateName("_TextBox50");
        columns.Bound(b => b.FirstName).EditorTemplateName("_TextBox50");
        columns.Bound(b => b.StampUpdated);
        columns.Bound(b => b.StampCreated);
        columns.Bound(b => b.IsActive).ClientTemplate("<input type='checkbox' ${ IsActive == true ? checked='checked' : ''} disabled />").Width(60);
            columns.Command(cmd => { cmd.Edit(); cmd.Destroy(); }).Width(180);
        })
    .ToolBar(toolbar => toolbar.Create())
    .Pageable()
    .Filterable()
    .Sortable()
    .Selectable()
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Error("error_handler"))
        .Model(model =>
            {
                model.Id(a => a.Id);
                model.Field(a => a.StampCreated).Editable(false);
                model.Field(a => a.StampUpdated).Editable(false);
                model.Field(a => a.IsActive).DefaultValue(true);
            })
        .Create(create => create.Action("CreatePerson", "People"))
        .Read(read => read.Action("ReadPeople", "People"))
        .Update(update => update.Action("UpdatePerson", "People"))
        .Destroy(destroy => destroy.Action("DestroyPerson", "People"))
        .PageSize(10)
    )
)

那些_TextBox50是名为_TextBox50.cshtml的EditorTemplates,它必须位于相对于您的视图或相对于您的共享文件夹的子文件夹中 - 该文件夹必须称为EditorTemplates。这个看起来像这样......

@Html.TextBox(string.Empty, string.Empty, new { @class = "k-textbox", @maxlength = "50" })

是的,就是这样。这是一个简单的例子,它们可以变得更加复杂。或者您最初不必使用它们。

最后,我认为你真的在寻找......

public partial class PeopleController : Controller
{
    private readonly IPersonDataProvider _personDataProvider;

    public PeopleController() : this(new PersonDataProvider())
    {}
    public PeopleController(IPersonDataProvider personDataProvider)
    {
        _personDataProvider = personDataProvider;
    }

    public ActionResult Manage()
    {
>>> Left in as teaser, good to apply a special Model to a View to pass goodies ;)
        var model = new PeopleViewModel();
        model.AllQualifications = QualificationModel.FlattenToThis(_qualificationDataProvider.Read());
        return View(model);
    }

    [HttpPost]
    public JsonResult CreatePerson([DataSourceRequest]DataSourceRequest request, Person person)
    {
        if (ModelState.IsValid)
        {
            try
            {
                person = _personDataProvider.Create(person);
            }
            catch (Exception e)
            {
                ModelState.AddModelError(string.Empty, e.InnerException.Message);
            }
        }
        var persons = new List<Person> {person};
        DataSourceResult result = PersonModel.FlattenToThis(persons).ToDataSourceResult(request, ModelState);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

    public JsonResult ReadPeople([DataSourceRequest]DataSourceRequest request)
    {
        var persons = _personDataProvider.Read(false);
        DataSourceResult result = PersonModel.FlattenToThis(persons).ToDataSourceResult(request);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult UpdatePerson([DataSourceRequest]DataSourceRequest request, Person person)
    {
        if (ModelState.IsValid)
        {
            try
            {
                person = _personDataProvider.Update(person);
            }
            catch (Exception e)
            {
                ModelState.AddModelError(string.Empty, e.InnerException.Message);
            }
        }
        var persons = new List<Person>() {person};
        DataSourceResult result = PersonModel.FlattenToThis(persons).ToDataSourceResult(request, ModelState);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult DestroyPerson([DataSourceRequest]DataSourceRequest request, Person person)
    {
        if (ModelState.IsValid)
        {
            try
            {
                person = _personDataProvider.Destroy(person);
            }
            catch (Exception e)
            {
                ModelState.AddModelError(string.Empty, "There was an error deleting this record, it may still be in use.");
            }
        }
        var persons = new List<Person>() {person};
        DataSourceResult result = PersonModel.FlattenToThis(persons).ToDataSourceResult(request, ModelState);
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

请注意,在这种情况下,每个方法都将EF Person作为参数,最好使用PersonModel但是我必须显示与Flatten相反的方法。这是有效的,因为它们实际上是相同的。如果模型不同或者您正在使用类工厂,则会变得更加棘手。

我故意向您展示了所有CRUD操作。如果你没有将结果传回网格,那么它会很有趣并且在CREATE和UPDATE上给你重复或者没有正确显示更新。它会在DELETE上传回以传递可能有任何错误的ModelState。

最后是数据提供者,这样就没有任何想象力...... (省略名称空间声明。)

using System;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.Linq;
using Project.Business;

public class PersonDataProvider : ProviderBase, IPersonDataProvider
{
    public Person Create(Person person)
    {
        try
        {
            person.StampCreated = DateTime.Now;
            person.StampUpdated = DateTime.Now;

            Context.People.Attach(person);
            Context.Entry(person).State = EntityState.Added;
            Context.SaveChanges();
            return person;
        }
        catch (Exception e)
        {
            Debug.WriteLine(e.Message);
            throw;
        }
    }

    public IList<Person> Read(bool showAll)
    {
        try
        {
            return (from q in Context.People
                      orderby q.LastName, q.FirstName, q.StampCreated
                      where (q.IsActive == true || showAll)
                      select q).ToList();
        }
        catch (Exception e)
        {
            Debug.WriteLine(e.Message);
            throw;
        }
    }

...

}

注意Interface和ProviderBase继承,你必须做出那些。应该很简单,找到例子。

这可能看起来像很多编码,但是一旦你把它弄下来,只需复制粘贴。

快乐的编码。

答案 1 :(得分:0)

是的,您可以使用JsonResult发送JSON回Kendo UI,或者使用带有allow get指定的JSON。您可以在传输中设置URL并将json指定为类型。

关于你的上一个问题,目前没有可视化工具,但有一些帮助方法可用于kendo UI