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