Cargue datos desde el servicio web (asmx) a jqgrid. por favor, ayúdame

Creo una muestra para probar jqgrid.

GetDataService.asmx:

using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.Web.Script.Services; using System.Web.Script.Serialization; using System.Collections.Generic; using System.Data.SqlClient; namespace ExampleJqGrid { ///  /// Summary description for GetDataService ///  [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] [ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. // [System.Web.Script.Services.ScriptService] public class GetDataService : System.Web.Services.WebService { [WebMethod] public string GetProduct() { SqlConnection con = new SqlConnection(@"Data Source=NGUYEN-LAPTOP\SQLEXPRESS;Initial Catalog=ProductDB;Integrated Security=True"); //SqlCommand cmd = new SqlCommand("SELECT * FROM Products", con); SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM Products", con); DataSet ds = new DataSet(); da.Fill(ds); DataTable dt = ds.Tables[0]; GetJSONFromDataTable getJsonDataTable = new GetJSONFromDataTable(); string json = getJsonDataTable.GetJSONString(dt); string jonsData = GetJSONFromDataTable.JsonForJqgrid(dt, 10, 10, 2); return jonsData; } } } 

GetJSONFromDataTable.cs

 using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Text; using System.Web.Script.Serialization; namespace ExampleJqGrid { public class GetJSONFromDataTable {public static string JsonForJqgrid(DataTable dt, int pageSize, int totalRecords,int page) { int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize); StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("{"); jsonBuilder.Append("\"total\":" + totalPages + ",\"page\":" + page + ",\"records\":" + (totalRecords) + ",\"rows\""); jsonBuilder.Append(":["); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{\"i\":"+ (i) +",\"cell\":["); for (int j = 0; j < dt.Columns.Count; j++) { jsonBuilder.Append("\""); jsonBuilder.Append(dt.Rows[i][j].ToString()); jsonBuilder.Append("\","); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]},"); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]"); jsonBuilder.Append("}"); return jsonBuilder.ToString(); } } } 

GetJSONFromDataTable.cs

 public static string JsonForJqgrid(DataTable dt, int pageSize, int totalRecords,int page) { int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize); StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("{"); jsonBuilder.Append("\"total\":" + totalPages + ",\"page\":" + page + ",\"records\":" + (totalRecords) + ",\"rows\""); jsonBuilder.Append(":["); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{\"i\":"+ (i) +",\"cell\":["); for (int j = 0; j < dt.Columns.Count; j++) { jsonBuilder.Append("\""); jsonBuilder.Append(dt.Rows[i][j].ToString()); jsonBuilder.Append("\","); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]},"); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]"); jsonBuilder.Append("}"); return jsonBuilder.ToString(); } 

default.asp

  

            function getProducts() { $.ajax({ url: "/GetDataService.asmx/GetProduct", data:"{}", // For empty input data use "{}", dataType: "json", type: "'GET'", contentType: "application/json; charset=utf-8", //success: successFunction /*complete*/success: function(jsondata) { alert(jsondata); var thegrid = jQuery("#list")[0]; thegrid.addJSONData(JSON.parse(jsondata)); } }); } function dataBindToGrid() { jQuery("#list").jqGrid({ datatype: getProducts(), colNames: ['ProductId', 'ProductName', 'Description', 'Price'], colModel: [{ name: 'ProductId', index: 'ProductId', width: 200, align: 'left' }, { name: 'ProductName', index: 'ProductName', width: 200, align: 'left' }, { name: 'Description', index: 'Description', width: 200, align: 'left' }, { name: 'Price', index: 'Price', width: 200, align: 'left' } ], rowNum: 10, rowList: [5, 10, 20, 50, 100], pager: jQuery('#pager'), //imgpath: '', imgpath: '~/Resources/themes/redmond/images', width: 300, viewrecords: true }).navGrid(pager, { edit: true, add: false, del: false, search: false }); } jQuery(document).ready(function() { $("#btnAdd").click(dataBindToGrid); });  

  

Cuando alerté cadena jsondata, devuelve nulo.

Por favor revise y ayúdeme a cargar datos a jqgrid

Atentamente

Tu ejemplo tiene muchos problemas. Por ejemplo

  • Si utiliza el [WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)] en el método web y [ScriptService] en la clase de servicio web, el parámetro de salida se convertirá automáticamente a JSON . ( Consulte el servicio web de asmx, json, javascript / jquery? por ejemplo). Entonces no necesitará implementar las funciones como JsonForJqgrid .
  • Usas una plantilla muy antigua para tu progtwig. El uso del datatype de datatype como función para los datos JSON ya no es necesario. El uso de parámetros imgpath muy antiguos imgpath y class="scroll" en HTML que no se usan más, ya que muchas versiones de jqGrid muestran también que se usa una plantilla muy antigua para su progtwig.
  • pequeños errores como type: "'GET'" vez de type: 'GET' o type: "GET" .

Si sigue el camino con el uso del datatype de datatype como función, recibirá problemas si decide implementar la búsqueda de datos en su aplicación.

Te recomiendo que veas mejor otros ejemplos como jqgrid Página 1 de x pager , jqgrid setGridParam tipo de datos: local o jquery con ASP.NET MVC – llamando al servicio web habilitado para javascript . También puede descargar un ejemplo de trabajo http://www.ok-soft-gmbh.com/jqGrid/WebServicesPostToJqGrid.zip que he creado como parte de la http://www.trirand.com/blog/?page_id=393 / help / pager-not-working-for-me-where-estoy-haciendo- respuesta incorrecta o http://www.ok-soft-gmbh.com/jqGrid/VS2008jQueryMVC.zip o http: // www. ok-soft-gmbh.com/jqGrid/jQueryMVC.zip (vea la otra respuesta anterior jquery con ASP.NET MVC – llamando al servicio web habilitado para javascript )

ACTUALIZADO : También tiene el orden incorrecto de los archivos de JavaScript. El ui.multiselect.css no se carga como todo. Debes cambiarlo a

La inclusión de jqDnR.js y jqModal.js no es necesaria. Debería ser una parte de jquery.jqGrid.js si comprueba los módulos correspondientes durante la descarga de jqGrid . Los jquery.layout.js no son necesarios para jqGrid. Debe incluirlo solo si lo usa por separado.