principiantes - Implementación de jQGrid asp.net mvc 3 desde cero

manual de asp net mvc en español

Question

Estoy tratando de implementar jQGrid en mi aplicación con algunas características básicas que incluyen filtrado y sub grilla. Miré numerosos artículos, pero muchos de ellos parecen viejos y obsoletos. Creo que estoy luchando con los principios básicos para implementarlo. Realmente apreciaré si puede proporcionar una estructura básica de vista de controlador o consultar cualquier tipo de tutorial desde cero con asp. net mvc 3. asp. net mvc 3.

Answer 1

Aquí está el código en la Vista (primer mark-up, luego JS):

@model SampleApp.SampleModel
@{
ViewBag.Title = " Title";
Layout = "~/Views/Shared/_defaultLayout.cshtml";
}
<link href="@Url.Content("~/Content/themes/cupertino/jquery-ui-1.8.13.custom.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/grid/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/ui/jquery-ui-1.8.12.custom.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/grid/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/grid/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/myJSHelper.js")" type="text/javascript"></script>
<script type="text/javascript" id="loadGridResultsScript1">
// This code LOADs the grid by calling the MVC Action to get Data
$(document).ready(function () { helper.loadSearchResults(''@Model.JobCode''); });
</script>
<!-- these are the jQuery Grid controls -->
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

Aquí está la función JS del archivo myHelper JS:

loadSearchResults: function (id) {
$("#list").jqGrid({
url: vpath + ''/Sample/GetTargets/'' + id,
datatype: ''json'', mtype: ''POST'', colNames: cols,
colModel: colModel, pager: $(''#pager''),
rowNum: 15, rowList: [5, 10, 15, 25, 50, 100], sortname: cols[1],
sortorder: "asc", viewrecords: true,
imgpath: '''', caption: '' ''
});
$("#list").setGridWidth(1000, true);
$("#list").setGridHeight(350, true);
}

y aquí está la acción que jQuery llama:

 public ActionResult GetTargets(string id, string sidx, string sord, int page, int rows)
{
var repo = IOCContainer.Resolve<DataRepository>();
////////////////////////////////////////////////////////////////////
var job = svc.GetJobByCode(id);
// job is my ''Model'', it is a System.Data.DataSet
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = (job.Targets == null) ? 0 : job.Tables[0].Rows.Count;
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
List<DataRow> pageSet = Enumerable.Empty<DataRow>().ToList();
if (totalRecords > 0)
{
// Get rows for current page!!!
if (sord == "asc")
{
if (sidx == " ") sidx = job.Tables[0].Columns[0].ColumnName;
pageSet = job.Tables[0].Rows.Cast<DataRow>()
.OrderBy(q => q[sidx])
.Skip(pageIndex * pageSize)
.Take(pageSize)
.ToList();
}
else
pageSet = job.Targets.Tables[0].Rows.Cast<DataRow>()
.OrderBy(q => q[sidx])
.Reverse()
.Skip(pageIndex * pageSize)
.Take(pageSize)
.ToList();
}
var cols = GetColumnNames(job.Tables[0]);
// Func to get Cells, called later on in code...
Func<DataRow, string[], string[]> getCells = (pkg, columns) =>
{
var cellList = new List<string>();
cellList.Add(pkg[0].ToString());
foreach (var col in columns)
{
if (col.StartsWith("_")) continue;
object cellContent = pkg[col];
string cellText = string.Empty;
if (cellContent is DateTime)
{
cellText = ((DateTime)cellContent).ToString("MM/dd/yyyy");
}
else if (cellContent is decimal || cellContent is double)
{
cellText = string.Format("{0:c}", cellContent);
}
else
{
cellText = String.Format("{0}", cellContent);
}
cellList.Add(cellText);
}
return cellList.ToArray();
};
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = (
from item in pageSet
select new
{
i = item[0].ToString(),
cell = getCells(item, cols)
}).ToArray()
};
return Json(jsonData);
}

Espero que encuentres esto útil. Avísame si hay alguna pregunta