Я рассмотрю вопрос о встроенном редактировании и добавлении новой строки в jqGrid применительно к ASP.NET MVC 3 и Razor C #.Я также включу код контроллера C # для заполнения сетки и сохранения данных в сетке.Сначала давайте рассмотрим, как установить jqGrid 4.4.1 в веб-приложении MVC3 с помощью диспетчера пакетов NuGet.
- Установить jQuery 1.7.2 или выше.
- Установить jQuery.UI.Combined.
- Установка jqGrid 4.4.1
Вы можете скачать jqGrid отдельно от
http://www.trirand.com/blog/?page_id=6
и найти документацию jqGrid.в
http://www.trirand.com/jqgridwiki/doku.php
Я не собираюсь проверять код в этом посте, но он основан на работающем коде.Я собираюсь использовать метод грубой силы для решения сложной и сложной проблемы: заполнение jqGrid из метода действия, редактирование отдельной строки или добавление новой редактируемой строки, а затем сохранение строки в методе действия.Я уверен, что можно найти более оптимальные способы сделать это, но это хорошая отправная точка.Я не собираюсь показывать вам, как настроить внешний вид вашей jqGrid, я оставлю это вам.Я буду использовать JSON в качестве формата обмена данными между jqGrid и ASP.NET MVC 3. Я не собираюсь решать проблему удаления строки в сетке.
Давайте начнем с метода действия GET вКонтроллер
public JsonResult GetProduct(int productId = 0)
{
var productsQuery = dbContext.FirstOrDefault(p => p.ProductId == productId);
var productsList = new List<Products>();
// SQL does not understand ToString() so we have to do this or something like it
foreach(var p in productsQuery)
{
var product = new Product{
ProductId = p.ProductId,
Product.Name = p.Name,
Product.Date = p.Date.ToShortDateString()
// and so on...
};
productsList.Add(product);
}
// You must build an anonymous object that can then be converted into a 2-dimensional
// array formatted for jqGrid, convert it to a 2d array then Json. Note that all grid
// data must be in string format.
var jsonData = new {
total = 1,
page = 1,
records = productsQuery.Count(),
rows = productsList.Select(p => new {
id = p.id.ToString(),
cell = new string[] {
p.Name,
p.Date.ToShortDateString(),
// and so on...
}
}).ToArray();
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
И представление ...
<script type="text/javascript">
$(document).ready(function () {
var lastSelectedId;
var grid = $('#grid');
grid.jqGrid({
url: "@Url.Action("GetProducts", "Products")",
datatype: 'json',
mtype: 'post',
colNames: ['ProductId', 'Name', 'Date',
// and so on...
],
colModel: [
{ name: 'ProductId', index: 'ProductId', editable: false },
{ name: 'Name', index: 'Name', editable: true, edittype: 'text' },
{ name: 'Date', index: 'Date', editable: true, edittype: 'text' }
// and so on...
],
onSelectRow: function(rowid) {
if (rowid && rowid !== lastSelectedId) {
grid.jqGrid('resotreRow', lastSelectedId);
lastSelectedId = rowid;
}
grid.jqGrid('editRow', rowid, { keys: true });
},
editurl: "@Url.Action("SaveProducts", "Products");
rownum: [10],
rowList: [5,10,20,50],
pager: '#grid_pager',
sortName: 'Name',
viewrecords: true,
gridview: true,
caption: 'Sample Grid'
});
grid.jqGrid('navGrid', '#pager', { edit: false, add: false: del: false,
refresh: false });
grid.jqGrid('inlineNav', '#pager', {
addParams: {
position: 'first',
addRowParams: {
keys: true,
oneditfunc: onInlineEdit
}
add: true,
edit: false,
save: false,
cancel: true
});
function onInlineEdit(rowid) {
// add inline editing functionality here
}
</script>
@using (Html.BeginForm("","", FormMethod.Post, new { id = "ProductsForm" }))
{
<table id="grid">
</table>
<div id="pager">
</div>
}
, а затем метод POST
[HttpPost]
public JsonResult SaveProduct(FormCollection frm)
{
Product product;
if (frm["oper"] == "add")
{
product = new Product();
}
else
{
int productId = Int32.Parse(frm["id"]);
product = dbContext.Products.FirstOrDefault(p => p.ProductId == productId);
}
foreach (var key in frmAllKeys)
{
switch(key)
{
case "Name":
product.Name = frm[key];
break;
case "Date":
product.Date = DateTime.Parse(frm[key]);
break;
// and so on...
}
}
try
{
if (frm["oper"] == "add")
{
dbContext.AddObject(product);
}
dbContext.SaveChanges();
}
catch (Exception ex)
{
Debug.WriteLine(exception.StackTrace);
return Json(false);
}
return Json(true);
}
Есть более эффективные способы сделать это, но этохорошее начало.Я не занимаюсь проблемой динамической сетки.Я не уверен, как это можно сделать.Достаточно сказать, что для динамического jqGrid потребуется намного больше кода JavaScript и / или C #.Я бы взглянул на функциональность «сетка в сетке» в jqGrid для объединения статической сетки с динамической сеткой.
Я попытался создать функциональность, которая бы принимала тип объекта, список записей игенерировать данные массива jqGrid и Json для сетки, не выполняя всю дополнительную работу, показанную выше.Я думаю, что это можно сделать с помощью отражения, но у меня нет времени, чтобы сделать это прямо сейчас.
Наконец, я также попытался создать функциональность, которая бы извлекала данные из FormCollection и заполняла объект, учитывая толькотип объекта и FormCollection.Опять же, я думаю, что это можно сделать с помощью рефлексии, но у меня нет времени, чтобы сделать это прямо сейчас.Если кто-то захочет создать генератор и экстрактор Json MVC3 C # jqGrid, я рекомендую вам использовать метод Entity Framework Code First с классами POCO для вашей модели.С классами POCO гораздо проще работать, чем с объектами-сущностями для такой задачи.
Надеюсь, это поможет:)