1

我刚找到 JQGrid ，认为 JQgrid 非常成熟，非常适合与 Web API 一起使用

我有几个问题：我们正在使用 Web Api 并且有以下 HTML 代码和控制器。Image 字段在返回到控制器时会丢失其数据。Google 调试器在 HTML 上显示图像字段的数据，但如果我在控制器 Visual Studio 中的 Put 方法上设置断点，我可以看到产品实体的所有字段都填充了数据，但只有一个；图像字段为空。

我花了一些时间才让它工作，因此我决定与社区分享 HTML 代码 + WebApi 控制器。

1-我做对了吗（网格参数）？

2-为什么图像字段返回 null ？

3-如何实现搜索？这不会被调用

公共动态GetProducts4JqGrid1（字符串sidx，字符串sord，int page，int rows，bool _search，字符串searchField，字符串searchOper，字符串searchString）

4-为什么我必须将实体 ID 传递给控制器​​？我尝试了许多其他方法，它总是以“0”返回，所以必须将 Id 传递给 Put 方法，这是唯一的方法吗？

JQGrid 的 Web Api 很棒

很高兴把所有东西都放在一个屋檐下 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>
4

0 回答 0