tutorial principiantes para net mvc facturacion español desde curso con cero asp asp.net-mvc-3 jqgrid jqgrid-asp.net

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



manual de asp net mvc en español (1)

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.


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