I am creating a jqGrid with MVC4 WebApi. I able to populate data into the grid but getting error while clicking on delete button. Here is my front end(htm) code. :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>My First Grid</title>
<link href="../Content/Site.css" rel="stylesheet"/>
<!--<link href="../Content/themes/base/jquery.ui.all.css" rel="stylesheet"/>-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css"/>
<!--<link href="../Content/ui.jqgrid.css" rel="stylesheet"/>-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.9.2/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<style>
html, body {
font-size: 75%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--<script src="../Scripts/jquery-1.9.1.min.js"></script>-->
<!--<script src="../Scripts/jquery-ui-1.10.4.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="../Scripts/free-jqGrid/jquery.jqgrid.src.js"></script>
<script>
//<![CDATA[
$(document).ready(function () {
"use strict";
var apiUrl = "/WebApiOne/api/task/";
jQuery("#gridMain").jqGrid({
url: apiUrl,
editurl: apiUrl,
datatype: "json",
gridview: true,
height: "auto",
iconSet: "fontAwesome",
autoencode: true,
sortable: true,
viewrecords: true,
loadonce: true,
jsonReader: { id: "TaskID" },
prmNames: { id: "TaskID" },
colNames: ["TaskID", "ProjectID", "ProjectName", "TaskName", "TaskStatus"],
colModel: [
{ name: "TaskID", width: 60, key: true, editable: false, sorttype: "int" },
{ name: "ProjectID", width: 90 },
{ name: "ProjectName", width: 190 },
{ name: "TaskName", width: 170, align: "right" },
{ name: "TaskStatus", width: 170, align: "right" }
],
cmTemplate: { editable: true },
//autowidth: true,
formEditing: {
width: 400,
reloadGridOptions: { fromServer: true },
serializeEditData: function (postdata) {
var copyOfPostdata = $.extend({}, postdata);
if (postdata.TaskID === "_empty") { // ADD operation
postdata.TaskID = 0; // to be easy to deserialize
}
delete copyOfPostdata.oper; // remove unneeded oper parameter
return copyOfPostdata;
}
},
formDeleting: {
mtype: "DELETE",
reloadGridOptions: { fromServer: true },
serializeDelData: function () {
return ""; // don't send any body for the HTTP DELETE
},
onclickSubmit: function (options, postdata) {
var p = $(this).jqGrid("getGridParam"); // get reference to internal parameters
p.datatype = "json";
options.url = apiUrl + encodeURIComponent(postdata[0]);
}
},
pager: true
}).jqGrid("navGrid", {addtext:"add" , deltext:"del", edittext:"edit"}, {
mtype: "PUT",
onclickSubmit: function (options, postdata) {
//var p = $(this).jqGrid("getGridParam"); // get reference to internal parameters
//p.datatype = "json"; // reset datatype to reload from the server
options.url = apiUrl + encodeURIComponent(postdata[this.id + "_id"]);
}
}).jqGrid("filterToolbar") // add searching toolbar for local sorting (bacsue of loadonce:true) in the grid
.jqGrid("gridResize");
});
//]]>
</script>
</head>
<body>
<table id="gridMain"></table>
</body>
</html>
I researched alot on this, made lot of variations but result was always same :(. Tried the solution provided here but still no success. I kept a breakpoint on Get and Delete method of my server side code. Only Get method hits the breakpoint when the page loads. Delete method breakpoint is never hitting. Here goes my Server Side Code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Mvc;
namespace WebApiOne.Controllers
{
public class Task
{
public int TaskID { get; set; }
public int ProjectID { get; set; }
public string ProjectName { get; set; }
public string TaskName { get; set; }
public string TaskStatus { get; set; }
}
public class TaskController : ApiController
{
// GET api/task
public IEnumerable<Task> Get()
{
Task[] tasks = new Task[2];
tasks[0] = new Task()
{
TaskID = 1,
ProjectID = 1,
ProjectName = "ProjectOne",
TaskName = "FirstPage Development",
TaskStatus = "InProgress"
};
tasks[1] = new Task()
{
TaskID = 2,
ProjectID = 1,
ProjectName = "ProjectOne",
TaskName = "Second Page Development",
TaskStatus = "Yet To Start"
};
return tasks;
}
// DELETE api/task/5
public void Delete(int id)
{
// Delete row in DB.
}
}
}
Here is the fiddler trace of Delete Request:
DELETE http://localhost/WebApiOne/api/task/2 HTTP/1.1
Host: localhost
Connection: keep-alive
Accept: */*
Origin: http://localhost
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36
Referer: http://localhost/WebApiOne/Views/JqGrid.htm
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
Here is the screen shot of the error :
All suggestions are invited :).
