Kendo MVC Grid call Webapi caught error.

[Suman]

I am using two project MVC Controller project and Web api Controller, I am having telerik MVC kendo grid(Client side grid), In the grid I have called web api (Server side), Get and Post is woking fine but PUT and DELETE is getting error. I have done the CORS but still getting error.

Please find the code snippet and error details below. 

MVC Controller Code :

@(Html.Kendo().Grid<EditableCity>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.iCityID).Hidden();
            columns.Bound(c => c.sCityDesc).Title("City Description");
            columns.Bound(c => c.sCountryCode).Title("Country");
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
        })
        .ToolBar(toolbar => { toolbar.Create(); })
        .Editable(ed => ed.Mode(GridEditMode.PopUp))
        .Selectable()
        .Filterable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))            
        .DataSource(dataSource => dataSource
            .WebApi()
            .PageSize(20)
            .Model(m => m.Id(p => p.iCityID))
            .ServerOperation(false)
            .Read(read => read.Url("http://localhost:60018/api/city"))
            .Create(create => create.Url("http://localhost:60018/api/city").Type(HttpVerbs.Post))
            .Update(Update => Update.Url("http://localhost:60018/api/city/").Type(HttpVerbs.Put))
            .Destroy(del => del.Url("http://localhost:60018/api/city/").Type(HttpVerbs.Delete))            
        )
)

CORS in WebApiConfig - Register

 var cors = new EnableCorsAttribute("http://localhost:60018", "*", "*");
            config.EnableCors(cors);

Web API controller Code:

//[RoutePrefix("api/catalog")]
    public class CityController : ApiController
    {
        CityBL cityBL = new CityBL();

        // GET: api/City
        //[Route("city")]
        [ResponseType(typeof(IQueryable<EditableCity>))]
        [CacheFilter(TimeDuration = 10)]
        //[Authorize]
        public async Task<DataSourceResult> Get([ModelBinder(typeof(WebApiDataSourceRequestModelBinder))] DataSourceRequest request)
        {
            var susername = HttpContext.Current.User.Identity.Name;
            var gridData = await cityBL.GetCity();
            var result = new DataSourceResult()
            {
                Data = gridData,
                Total = gridData.Count()
            };

            return result;
        }

        // GET: api/City/5
        //[Route("city/{id}")]
        [ResponseType(typeof(EditableCity))]
        public async Task<IHttpActionResult> Get(int id)
        {
            var result = await cityBL.GetCityById(id);
            return Json(result);
        }

        // POST: api/City
        public async Task<IHttpActionResult> Post(EditableCity value)
        {
            if (value.iCityID > 0)
                await cityBL.UpdateCity(value);
            else
                await cityBL.InsertCity(value);

            return Json(value);
        }

        //// PUT: api/City/5
        //public async Task<IHttpActionResult> Put(EditableCity value)
        //{
        //    await PutCity(value.iCityID, value);
        //    return Json(value);
        //}
       
        // DELETE: api/City/5
        [HttpDelete]
        public async Task<IHttpActionResult> Delete(int id)
        {
            await cityBL.DeleteCity(id);
            return Ok();
        }
    }

 

I am getting error.(PUT and Delete)

OPTIONS http://localhost:60018/api/city/ 400 (Bad Request)

XMLHttpRequest cannot load http://localhost:60018/api/city/. Response for preflight has invalid HTTP status code 400

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at Function.parse [as parseJSON] (<anonymous>)
    at init.error_handler (City:76)
    at init.trigger (kendo?v=GlJVUnHmCTfOQhn3vJxT3TaOscBWvurIgbVIZ_jm6_41:1)
    at init.error (kendo?v=GlJVUnHmCTfOQhn3vJxT3TaOscBWvurIgbVIZ_jm6_41:1)
    at Object.error (kendo?v=GlJVUnHmCTfOQhn3vJxT3TaOscBWvurIgbVIZ_jm6_41:1)
    at c (Scripts?v=rDiPocDqq4l1v5wzpbjulXqJqaXM1N6IzVYG_owHFO81:1)
    at Object.fireWith [as rejectWith] (Scripts?v=rDiPocDqq4l1v5wzpbjulXqJqaXM1N6IzVYG_owHFO81:1)
    at b (Scripts?v=rDiPocDqq4l1v5wzpbjulXqJqaXM1N6IzVYG_owHFO81:1)
    at XMLHttpRequest.<anonymous> (Scripts?v=rDiPocDqq4l1v5wzpbjulXqJqaXM1N6IzVYG_owHFO81:1)

 

Thanks

Suman

[Boyan Dimitrov]

Hello Suman,

Actually we do have such example with CRUD operations using Kendo UI Grid for ASP.NET MVC and web api transport. Please refer to the Web API Editing tutorial. Also please take a look at the example provided in the Edit Grids in Incell Batch Mode Using WebAPI Controller as well. 

Regards,
Boyan Dimitrov
Telerik by Progress