kendo-ui - 使用 Web API 2 Controller 的 Kendo Grid MVC 包装器示例

Question

我试图找到一个使用 Web API 2 Controller 的 Kendo Grid MVC 服务器包装器的示例，但运气不佳。有没有办法将这些服务器包装器与 VS 生成的 Controller 一起使用，方法是使用“添加”->“ Controller ”->“带有操作的 Web API 2 Controller ，使用 Entity Framework ？”使用异步 Controller 操作会影响此吗？

我查看了 Telerik ( http://docs.telerik.com/kendo-ui/tutorials/asp.net/asp-net-hello-services ) 和示例项目 ( http://www.telerik.com/support/code-library/binding-to-a-web-apicontroller-6cdc432b8326 ) 的教程，但它们都没有使用 VS 可以自动生成的新 Web API 2 Controller 。

我希望能够使用 VS 生成的 Controller ，但我的技能显然无法适应现有的示例(这是我使用 MVC/Web API 的第一个项目)。有没有其他人这样做过，或者我应该像那些两年前的例子一样编写 Controller ？

预计到达时间:仅包含我当前得到的起点:

我使用 EF Code First 从数据库创建了模型。我用来测试这一点的简单方法是:

namespace TestProject.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;

    [Table("TP.Industry")]
    public partial class Industry
    {
        public Industry()
        {
            Companies = new HashSet<Company>();
        }

        public int IndustryId { get; set; }

        public int IndustryCode { get; set; }

        [Required]
        [StringLength(150)]
        public string IndustryName { get; set; }

        public virtual ICollection<Company> Companies { get; set; }
    }
}

然后，我使用“带有操作的 Web API 2 Controller ，使用 Entity Framework ”选项创建了 Controller ，并选中“使用异步 Controller 操作”以获得该模型的以下 Controller :

using System;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Threading.Tasks;
using System.Web.Http;
using System.Web.Http.Description;
using TestProject.Models;

namespace TestProject.Controllers
{
    public class IndustryController : ApiController
    {
        private TestProjectContext db = new TestProjectContext();

        // GET api/Industry
        public IQueryable<Industry> GetIndustries()
        {
            return db.Industries;
        }

        // GET api/Industry/5
        [ResponseType(typeof(Industry))]
        public async Task<IHttpActionResult> GetIndustry(int id)
        {
            Industry industry = await db.Industries.FindAsync(id);
            if (industry == null)
            {
                return NotFound();
            }

            return Ok(industry);
        }

        // PUT api/Industry/5
        public async Task<IHttpActionResult> PutIndustry(int id, Industry industry)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != industry.IndustryId)
            {
                return BadRequest();
            }

            db.Entry(industry).State = EntityState.Modified;

            try
            {
                await db.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!IndustryExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // POST api/Industry
        [ResponseType(typeof(Industry))]
        public async Task<IHttpActionResult> PostIndustry(Industry industry)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Industries.Add(industry);
            await db.SaveChangesAsync();

            return CreatedAtRoute("DefaultApi", new { id = industry.IndustryId }, industry);
        }

        // DELETE api/Industry/5
        [ResponseType(typeof(Industry))]
        public async Task<IHttpActionResult> DeleteIndustry(int id)
        {
            Industry industry = await db.Industries.FindAsync(id);
            if (industry == null)
            {
                return NotFound();
            }

            db.Industries.Remove(industry);
            await db.SaveChangesAsync();

            return Ok(industry);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool IndustryExists(int id)
        {
            return db.Industries.Count(e => e.IndustryId == id) > 0;
        }
    }
}

最后，我将以下 Kendo UI MVC 包装器代码放入 GridView 中:

@(Html.Kendo().Grid<TestProject.Models.Industry>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.IndustryId);
        columns.Bound(c => c.IndustryCode);
        columns.Bound(c => c.IndustryName);
        columns.Command(c =>
        {
            c.Edit();
            c.Destroy();
        });
    })
    .ToolBar(tools =>
    {
        tools.Create();
    })
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(c => c.IndustryId);
        })
        .Read(read => read.Url("../api/Industry").Type(HttpVerbs.Get))
        .Create(create => create.Url("../api/Industry").Type(HttpVerbs.Post))
        .Update(update => update.Url("../api/Industry").Type(HttpVerbs.Put))
        .Destroy(destroy => destroy.Url("../api/Industry").Type(HttpVerbs.Delete))
    )
)

<script>

    $(function () {
        var grid = $("#Grid").data("kendoGrid");

        // WebAPI needs the ID of the entity to be part of the URL e.g. PUT /api/Product/80
        grid.dataSource.transport.options.update.url = function (data) {
            return "api/Industry/" + data.IndustryId;
        }

        // WebAPI needs the ID of the entity to be part of the URL e.g. DELETE /api/Product/80
        grid.dataSource.transport.options.destroy.url = function (data) {
            return "api/Industry/" + data.IndustryId;
        }
    });

</script>

网格不返回任何数据，并且对 api 的请求返回此 500 内部服务器错误:

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
    <Message>An error has occurred.</Message>
    <ExceptionMessage>
        The 'ObjectContent`1' type failed to serialize the response body for content type 'application/xml; charset=utf-8'.
    </ExceptionMessage>
    <ExceptionType>System.InvalidOperationException</ExceptionType>
    <StackTrace/>
    <InnerException>
    <Message>An error has occurred.</Message>
    <ExceptionMessage>
        Type 'System.Data.Entity.DynamicProxies.Industry_5BBD811C8CEC2A7DB96D23BD05DB137D072FDCC62C2E0039D219F269651E59AF' with data contract name 'Industry_5BBD811C8CEC2A7DB96D23BD05DB137D072FDCC62C2E0039D219F269651E59AF:http://schemas.datacontract.org/2004/07/System.Data.Entity.DynamicProxies' is not expected. Consider using a DataContractResolver or add any types not known statically to the list of known types - for example, by using the KnownTypeAttribute attribute or by adding them to the list of known types passed to DataContractSerializer.
    </ExceptionMessage>
    <ExceptionType>
        System.Runtime.Serialization.SerializationException
    </ExceptionType>
    <StackTrace>
        at System.Runtime.Serialization.XmlObjectSerializerWriteContext.SerializeAndVerifyType(DataContract dataContract, XmlWriterDelegator xmlWriter, Object obj, Boolean verifyKnownType, RuntimeTypeHandle declaredTypeHandle, Type declaredType) at System.Runtime.Serialization.XmlObjectSerializerWriteContext.SerializeWithXsiTypeAtTopLevel(DataContract dataContract, XmlWriterDelegator xmlWriter, Object obj, RuntimeTypeHandle originalDeclaredTypeHandle, Type graphType) at System.Runtime.Serialization.DataContractSerializer.InternalWriteObjectContent(XmlWriterDelegator writer, Object graph, DataContractResolver dataContractResolver) at System.Runtime.Serialization.DataContractSerializer.InternalWriteObject(XmlWriterDelegator writer, Object graph, DataContractResolver dataContractResolver) at System.Runtime.Serialization.XmlObjectSerializer.WriteObjectHandleExceptions(XmlWriterDelegator writer, Object graph, DataContractResolver dataContractResolver) at System.Runtime.Serialization.XmlObjectSerializer.WriteObjectHandleExceptions(XmlWriterDelegator writer, Object graph) at System.Runtime.Serialization.DataContractSerializer.WriteObject(XmlWriter writer, Object graph) at System.Net.Http.Formatting.XmlMediaTypeFormatter.WriteToStream(Type type, Object value, Stream writeStream, HttpContent content) at System.Net.Http.Formatting.XmlMediaTypeFormatter.WriteToStreamAsync(Type type, Object value, Stream writeStream, HttpContent content, TransportContext transportContext, CancellationToken cancellationToken) --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd(Task task) at System.Runtime.CompilerServices.TaskAwaiter.GetResult() at System.Web.Http.WebHost.HttpControllerHandler.<WriteBufferedResponseContentAsync>d__1b.MoveNext()
    </StackTrace>
    </InnerException>
</Error>

事实上，如果我只是在该模型上构建一个 View ，如下所示:

@model IEnumerable<TestProject.Models.Industry>

@{
    ViewBag.Title = "Industries";
}

<h2>Industries</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.IndustryCode)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.IndustryName)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.IndustryCode)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.IndustryName)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.IndustryId }) |
            @Html.ActionLink("Details", "Details", new { id=item.IndustryId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.IndustryId })
        </td>
    </tr>
}

</table>

“@foreach (var item in Model) {”行生成“NullReferenceException:未将对象引用设置为对象的实例”。错误。

似乎即使 Kendo 部分不正确，至少所有 VS 生成的代码都应该正常工作，但似乎并非如此。

Answer 1

因此，根据我迄今为止的研究，似乎没有任何使用带有异步操作的 Web API 2 Controller 的 Kendo MVC 包装器的示例。

但是，现在似乎有一个Web API Editing Kendo UI 入门文档中的部分(我发誓以前不存在)，其中有一个更新的示例，该示例不依赖于将 DataSourceRequestModelBinder.cs 文件添加到项目中。

Controller 设置基本上与前面的示例类似，但网格包装器上的 .DataSource 现在如下所示:

.DataSource(dataSource => dataSource
    .WebApi()
    .Model(model =>
    {
        model.Id(i => i.IndustryId);
        model.Field(i => i.IndustryId).Editable(false);
    })
    .Create(create => create.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Industries" })))
    .Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Industries" })))
    .Update(update => update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Industries", id = "{0}" })))
    .Destroy(destroy => destroy.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Industries", id = "{0}" })))
)

那个 .WebApi() 方法没有出现在我的任何搜索中。这似乎可行，所以我将继续使用它。谢谢大家!