Kendo MVC Grid call Webapi caught error.

2 posts, 0 answers
  1. Suman
    Suman avatar
    11 posts
    Member since:
    Mar 2017

    Posted 24 Mar Link to this post

    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

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1968 posts

    Posted 28 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top