I am trying to find an example of a Kendo Grid MVC server shell using the Web API 2 controller and am not very successful. Is there a way to use these server shells with a controller created by VS using Add → Controller → Web API 2 Controller with Actions Using Entity Framework? Does using an asynchronous controller action use this?
I looked at the textbooks at Telerik ( http://docs.telerik.com/kendo-ui/tutorials/asp.net/asp-net-hello-services ) and the example project ( http://www.telerik.com/ support / code-library / binding-to-a-web-apicontroller-6cdc432b8326 ), but none of them use the new Web API 2 controllers that VS can automatically generate.
I would prefer to use VS controllers, but my skills, apparently, are not how to adapt existing examples to them (this is my first project with the MVC / Web API). Has anyone else done this or should they just write controllers, as in those two-year-old examples?
ETA: Just to indicate the starting point that I currently got:
I created models using EF Code First from the database. The simple one I use to test this with this:
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; }
}
}
Then I created the controllers using the "Web API 2 Controller with Actions using the Entity Framework" and checked the "Use async controller actions" checkbox to get the following controller for this model:
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();
public IQueryable<Industry> GetIndustries()
{
return db.Industries;
}
[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);
}
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);
}
[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);
}
[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;
}
}
}
Finally, I put the following Kendo UI MVC shell code into my grid view:
@(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");
grid.dataSource.transport.options.update.url = function (data) {
return "api/Industry/" + data.IndustryId;
}
grid.dataSource.transport.options.destroy.url = function (data) {
return "api/Industry/" + data.IndustryId;
}
});
</script>
The grid returns data and a request for api returns this internal server error:
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)
</StackTrace>
</InnerException>
</Error>
In fact, if I just look up at this model, for example:
@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 element in the model) {" string throws a "NullReferenceException: Object exception not set to the object instance." error.
, Kendo , , VS , , , .