Charger des données à partir d'un Webservice (asmx) à jqgrid. Merci de m'aider
J'ai créer un Échantillon pour test 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>
///Summary description for GetDataService
///</summary>
[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();
}
par défaut.asp
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="ExampleJqGrid._Default" %>
<script type="text/javascript" src="Resources/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="Resources/js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="Resources/js/ui.multiselect.js"></script>
<script type="text/javascript" src="Resources/js/jquery.layout.js"></script>
<script type="text/javascript" src="Resources/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Resources/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="Resources/js/jqDnR.js"></script>
<script type="text/javascript" src="Resources/js/jqModal.js"></script>
<link href="Resources/themes/ui.jqgrid.css" />
<link href="Resources/themes/redmond/jquery-ui-1.8.2.custom.css" />
<script type="text/javascript">
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: '<%= ResolveClientUrl("~/Resources/themes/redmond/images") %>',
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);
});
</script>
<table id="list" class="scroll">
</table>
<div id="pager" class="scroll" style="text-align:center;"></div>
<button id="btnAdd" >Load Data</button>
<asp:TextBox ID="hidenfield" runat = "server" style="display:none"></asp:TextBox>
</div>
</form>
Quand j'alerte jsondata chaîne , elle renvoie null.
Veuillez examiner et m'aider à charger des données à jqgrid
En ce qui concerne meilleur
Vous devez vous connecter pour publier un commentaire.
Vous exemple ont beaucoup de problèmes. Par exemple
[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
attribut sur le web méthode et[ScriptService]
sur la classe de service web, puis le paramètre de sortie sera automatiquement converties en JSON. (voir service web asmx, json, javascript/jquery? par exemple). Ensuite, vous n'aurez pas besoin implementthe fonctions commeJsonForJqgrid
.datatype
en fonction de données JSON n'est pas plus nécessaire. L'utilisation de très vieux jqGrid paramètresimgpath
etclass="scroll"
en HTML qui n'est plus utilisé depuis de nombreuses versions de jqGrid montrent également que vous utilisez un très vieux modèle de votre programme.type: "'GET'"
au lieu detype: 'GET'
outype: "GET"
.Si vous suivez le chemin à l'utilisation de
datatype
comme fonction, vous recevrez des problèmes si vous décidez de mettre en œuvre pagination de données de recherche dans votre demande.Je vous recommande de regarder quelques autres exemples comme jqgrid Page 1 de x pager, jqgrid setGridParam type de données:local ou
avec jquery ASP.NET MVC - appel ajax web service. Vous pouvez choisir de télécharger un exemple de travail http://www.ok-soft-gmbh.com/jqGrid/WebServicesPostToJqGrid.zip que j'ai créé comme une partie de la http://www.trirand.com/blog/?page_id=393/help/pager-not-working-for-me-where-am-i-doing-wrong réponse ou http://www.ok-soft-gmbh.com/jqGrid/VS2008jQueryMVC.zip ou http://www.ok-soft-gmbh.com/jqGrid/jQueryMVC.zip (voir l'autre vieille réponse avec jquery ASP.NET MVC - appel ajax web service)
Mis à JOUR: Vous avez également le mauvais ordre des fichiers JavaScript. Le
ui.multiselect.css
n'est pas chargé comme tous. Vous devez modifierY compris de
jqDnR.js
etjqModal.js
n'est pas nécessaire. Il devrait être une partie dejquery.jqGrid.js
si vous cochez la case correspondante des modules de cours de jqGrid téléchargement. Lejquery.layout.js
ne sont pas nécessaires pour jqGrid. Vous devez inclure uniquement si vous les utiliser séparément.