JQgrid Web Api Json on a SPA - jqgrid

Question

I just found JQGrid , and think that JQgrid is very mature and perfect to use with Web API
I have a few questions:
we are using Web Api and have the following HTML code and Controller.
The Image field loses its data when It comes back to the controller. Google debugger shows data for the image field on the HTML, but if I set a breakpoint on the Put method inside the controller, Visual Studio , I can see the product entity with all its fields filled with data, all but one; the image field is null.
It took me some digging to get this working , therefore I decided to share the HTML code + the WebApi controller it with the community.
1- am I am doing this right (Grid parameters) ?
2-Why the image fields comes back null ?
3-How can I implement a search ?
this will not get called
public dynamic GetProducts4JqGrid1(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper, string searchString)
4-why i Must pass the Entity ID to the controller ? I tried many other ways and it always come back as "0" so must pass the Id to the Put method , is this the only way ?
JQGrid is awesome with Web Api
nice to have everything under one roof
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Net;
using System.Net.Http;
using RoboMVC.Contracts;
using RoboMVC.Model;
namespace RoboMVC.Web.Controllers.jQgrid
{
public class ProductsJQgridController : ApiControllerBase
{
public ProductsJQgridController(IRoboMVCUow uow)
{
Uow = uow;
}
public dynamic GetProducts4JqGrid(string sidx, string sord, int page, int rows)
{
//var products = Uow.Product.GetAllProducts().OrderBy(e => e.ProductId) as IEnumerable<Product>;
var pageIndex = Convert.ToInt32(page) - 1;
var pageSize = rows;
var totalRecords = Uow.Product.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var products = Uow.Product.GetAllProducts().OrderBy(e => e.ProductId).Skip(pageIndex * pageSize).Take(pageSize) as IEnumerable<Product>;
return new
{
total = totalPages,
page = page,
records = totalRecords,
rows =
(
from product in products
select new
{
id = product.ProductId,
cell = new object[]
{
product.ProductId,
product.Description,
product.SalePrice,
product.SaleCommissionFactor,
product.Stock,
product.StockMax,
product.StockMin,
product.DateOfEntry,
product.LastDateOfSale,
product.SKU,
product.LastCostPaid,
product.Weight,
product.Image,
product.Categoy,
}
}).ToList()
};
}
public HttpResponseMessage Put( int id, Product product)
{
product.ProductId = Convert.ToInt32(id);
Uow.Product.Update(product);
Uow.Commit();
var result = new HttpResponseMessage(HttpStatusCode.NoContent);
return result;
}
public HttpResponseMessage Post(int id, Product product)
{
product.ProductId = Convert.ToInt32(id);
product = Uow.Product.Add(product);
Uow.Commit();
var response = Request.CreateResponse<Product>(HttpStatusCode.Created, product);
string uri = Url.Route(null, new { id = product.ProductId });
response.Headers.Location = new Uri(Request.RequestUri, uri);
return response;
}
public HttpResponseMessage Delete(int id)
{
Uow.Product.Delete(id);
Uow.Commit();
var result = new HttpResponseMessage(HttpStatusCode.NoContent);
return result;
}
}
}
<script>
var API_URL = "/api/ProductsJQgrid/";
jQuery("#gridMain").jqGrid({
//http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
url: "/api/ProductsJQgrid/GetProducts4JqGrid/",
datatype: 'json',
mtype: 'GET',
pager: '#pagernav',
viewrecords: true,
height: '60%',
width: '100%',
hoverrows: true,
rownumbers: true,
shrinkToFit: true,
gridview: true,
search: true,
ignoreCase:true,
loadonce: false,
viewsortcols: [false, "horizontal", true],
imgpath: '../../Content/jquery.jqGrid/content/images/',
rowNum: 10,
cache: true,
rowList: [10, 20, 30],
sortable: true,
sortname: 'productId',
sortorder: "desc",
// sorttype: "text",
caption: "CRUD With ASP.NET Web API",
autowidth: true,
colNames: ['productId', 'Description', 'SalePrice', 'SaleCommissionFactor', 'Stock', 'StockMax', 'StockMin', 'DateOfEntry', 'LastDateOfSale', 'SKU', 'LastCostPaid', 'Weight', '<image src=images/arrow-right.gif width=16 height=16>', 'Categoy'],
colModel: [
//http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
{ key:true, name: 'productId', index: 'productId', width: 40, search : true , sorttype: "int", editable: false },
{ name: 'description', index: 'description', editable: true, edittype: 'text', width: 70 },
{ name: 'salePrice', index: 'salePrice', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "float", formatter: "number" },
{ name: 'saleCommissionFactor', index: 'saleCommissionFactor', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "float", formatter: "number" },
{ name: 'stock', index: 'stock', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "int" },
{ name: 'stockMax', index: 'stockMax', editable: true, cellEdit:true, edittype: 'text', width: 50, align: "right", sorttype: "int"},
{ name: 'stockMin', index: 'stockMin', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "int"},
{ name: 'dateOfEntry', index: 'dateOfEntry', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "date", formatter: "date" },
{ name: 'lastDateOfSale', index: 'lastDateOfSale', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "date", formatter: "date" },
{ name: 'sKU', index: 'sKU', editable: true, edittype: 'text', width: 70 },
{ name: 'lastCostPaid', index: 'lastCostPaid', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "float", formatter: "number" },
{ name: 'weight', index: 'weight', editable: true, edittype: 'text', width: 70 },
{ name: 'image', index: 'image', editable: false, search:false, width: 50, align: "right", },
{ name: 'categoy', index: 'categoy', editable: true, edittype: 'text', width: 70 }
],
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
id: "id", // from the controller returned value
cell: "cell",
search: "_search"
},
subGrid: true
});
function updateDialog(action) {
return {
url: "/api/ProductsJQgrid/"
, closeAfterAdd: true
, closeAfterEdit: true
, afterShowForm: function (formId) { }
, modal: true
, onclickSubmit: function (params) {
var list = $("#gridMain");
var selectedRow = list.getGridParam("selrow");
var rowData = list.getRowData(selectedRow);
params.mtype = action;
params.url += rowData.productId;
debugger;
// image has the right data here
}
, width: "600"
};
}
jQuery("#gridMain")
.jqGrid('navGrid', '#pagernav',
{ add: true, edit: true, del: true, search: true,refresh: true },
updateDialog('Put'),
updateDialog('Post'),
updateDialog('Delete'),
{ sopt: ["cn"] } // Search options. Some options can be set on column level
)
// .filterToolbar({ autoSearch: false, searchOnEnter: false, stringResult: true })
;
$(window).bind('resize', function () {
jQuery("#gridMain").setGridWidth($('#parentDiv').width() - 30, true);
}).trigger('resize');
</script>