.Net WebService + ExtJs 填充网格
Posted
技术标签:
【中文标题】.Net WebService + ExtJs 填充网格【英文标题】：.Net WebService + ExtJs to Fill Grid 【发布时间】：2012-07-03 04:36:18 【问题描述】：我做了一个小程序，使用 ExtJs 和 .NET webservice 方法填充 gridPanel，但它没有填充..我的代码如下
//这是我的web服务方法
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
public List<Student> GetStudentList()
List<Student> obList = new List<Student>();
obList.Add(new Student(1, "John", "Doe"));
obList.Add(new Student(2, "Michael", "Crowd"));
obList.Add(new Student(3, "Gunnar", "Rasmundsson"));
obList.Add(new Student(4, "Alicia", "Mankind"));
return obList;
public class Student
private int _stid;
private string _stname;
private string _stservice;
public Student()
public Student(int stid, string stname, string stservice)
this.StId = stid;
this.StName = stname;
this.StService = stservice;
public int StId
get return this._stid;
set this._stid = value;
public string StName
getreturn this._stname;
set this._stname = value;
public string StService get return this._stservice; set this._stservice = value;
//这是我的 ExtJs 网格填充代码
Ext.onReady(function ()
var myStore = new Ext.data.JsonStore(
// Load data at once
autoLoad: true,
// Override default http proxy settings
proxy: new Ext.data.HttpProxy(
// Call web service method using GET syntax
url: 'GetStudent.asmx/GetStudentList',
// Ask for Json response
headers: 'Content-type': 'application/json'
),
// Root variable
root: 'd',
// Record identifier
id: 'StId',
//reader:Jreader,
// Fields declaration
fields: ['StId', 'StName', 'StService'],
);
var grid = new Ext.grid.GridPanel(
// Set store
store: myStore,
// Columns definition
columns: [
dataIndex: 'StId', header: 'St Id' ,
dataIndex: 'StName', header: 'St Name' ,
dataIndex: 'StService', header: 'St Service'
],
// Render grid to dom element with id set to panel
renderTo: 'divGrid',
width: 422,
height: 300
);
);
我也加入了
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/GetStudent.asmx" />
</Services>
</asp:ScriptManager>
<div id="divGrid"></div>
</form>
</body>
请让我知道我错在哪里，感谢您的帮助！！！！
【问题讨论】：
【参考方案1】：您的代码看起来不错。你检查了firefox-firebug吗？只需检查流量，看看您遇到了什么错误。
编辑：添加代码。
以下是基于您给定示例的完整工作示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ExtJS ASP.NET WebService</title>
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<link rel="stylesheet" href="js/ext/resources/css/ext-all.css"/>
<script type="text/javascript">
Ext.onReady(function ()
var myStore = new Ext.data.JsonStore(
// Load data at once
autoLoad: true,
// Override default http proxy settings
proxy: new Ext.data.HttpProxy(
// Call web service method using GET syntax
url: 'Service.asmx/GetStudentList',
// Ask for Json response
headers: 'Content-type': 'application/json'
),
// Root variable
root: 'd',
// Record identifier
id: 'StId',
//reader:Jreader,
// Fields declaration
fields: ['StId', 'StName', 'StService'],
);
var grid = new Ext.grid.GridPanel(
// Set store
store: myStore,
// Columns definition
columns: [
dataIndex: 'StId', header: 'St Id' ,
dataIndex: 'StName', header: 'St Name' ,
dataIndex: 'StService', header: 'St Service'
],
// Render grid to dom element with id set to panel
renderTo: 'divGrid',
width: 422,
height: 300
);
);
</script>
</head>
<body>
<div id="divGrid"></div>
</body>
</html>
Service.asmx 代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
namespace WebService4ExtJS
/// <summary>
/// Summary description for Service1
/// </summary>
[ScriptService]
public class Service : System.Web.Services.WebService
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
public List<Student> GetStudentList()
List<Student> obList = new List<Student>();
obList.Add(new Student(1, "John", "Doe"));
obList.Add(new Student(2, "Michael", "Crowd"));
obList.Add(new Student(3, "Gunnar", "Rasmundsson"));
obList.Add(new Student(4, "Alicia", "Mankind"));
return obList;
public class Student
private int _stid;
private string _stname;
private string _stservice;
public Student()
public Student(int stid, string stname, string stservice)
this.StId = stid;
this.StName = stname;
this.StService = stservice;
public int StId
get return this._stid;
set this._stid = value;
public string StName
get return this._stname;
set this._stname = value;
public string StService get return this._stservice; set this._stservice = value;
不同的是html代码的部分。
编辑：添加解决方案（由 Nitin Soni 在评论中提供，在此处添加，以便搜索的人不要混淆）
您可以看到 Nitin 在评论中说该问题特定于 ExtJS 4.1 版：
我检查了你的代码并做了同样的事情，是的，它也对我有用.. 我 进一步分析该问题与 ExtJs 的版本有关。你的代码 （代码项目代码）正在使用 Extjs 2.2 库文件，而我有 使用了 Extjs 4.1 最新的库文件。看来问题出在 特定的 ext-all.js 文件版本。我已将此文件替换为旧文件 版本和它的工作原理。
他进一步提供了解决方案：（再次在评论中）
我找到了使用 Extjs 4.1 的解决方案。我也必须使用 Store 方法阅读器中的以下代码行： type: 'json', root: 'd'
【讨论】：
嗨，感谢您的回复，以下是我的 Json 回复 "d":["__type":"Student","StId":1,"StName":"John","StService" :"Doe","__type":"Student","StId":2,"StName":"Michael","StService":"Crowd","__type":"Student","StId" :3,"StName":"Gunnar","StService":"Rasmundsson","__type":"Student","StId":4,"StName":"Alicia","StService":"Mankind" ] 我在code project 上找到了类似的实现，可能会有帮助。 是的，我已经阅读了相同的内容，并在这里实现了相同的内容，但没有成功。 感谢 Falaque 的回复。我检查了你的代码并做了同样的事情，是的，它也对我有用。我进一步分析了这个问题与 ExtJs 的版本有关。您的代码（代码项目代码）使用的是 Extjs 2.2 库文件，而我使用的是 Extjs 4.1 最新的库文件。似乎问题出在特定的 ext-all.js 文件版本上。我已经用旧版本替换了这个文件，它可以工作。但是在我的应用程序中，我们必须使用在这种情况下似乎不支持的最新库。您对此有什么建议吗？ 我找到了使用 Extjs 4.1 的解决方案。同样，我必须在 Store 方法阅读器中使用以下代码行： type: 'json', root: 'd' 【参考方案2】：以下是我的测试。出于我的测试目的，我创建了与其他目录（例如 app）相同级别的数据目录。我在这个目录中移动了 Web 服务文件。 我没有在 index.html 中碰任何东西。
我还在WebMethod中添加了两行JSON格式的代码。
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(obList));
为此，我还在 WebMethod 中将 Student 的返回类型更改为 void。
下面是我自己做的app.js代码
Ext.onReady(function ()
Ext.create("Ext.panel.Panel",
width: 800,
height: 500,
renderTo: Ext.getBody(),
layout: 'fit',
items: [
xtype: 'grid',
columns: [
text: 'Id',
dataIndex: 'StId',
flex: 1
,
text: 'Name',
dataIndex: 'StName',
flex: 1
,
text: 'Service',
dataIndex: 'StService',
flex: 1
],
store:
autoLoad: true,
fields: ['StId', 'StName', 'StService'],
proxy:
type: 'ajax',
url: './data/GetStudent.asmx/GetStudentList',
reader:
type: 'json',
rootProperty: 'd'
]
)
);
它对我有用。
【讨论】：
以上是关于.Net WebService + ExtJs 填充网格的主要内容，如果未能解决你的问题，请参考以下文章