C# .NETWebService+；填充网格的ExtJs_C#_Extjs_Extjs4.1

C# .NETWebService+；填充网格的ExtJs

c# extjs

C# .NETWebService+；填充网格的ExtJs,c#,extjs,extjs4.1,C#,Extjs,Extjs4.1,我用ExtJs和.NETWebService方法制作了一个填充gridPanel的小程序，但它没有填充。。我的代码在下面 //这是我的web服务方法 [WebMethod(EnableSession = true)] [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)] public List<Studen

我用ExtJs和.NETWebService方法制作了一个填充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 { 
            get{return this._stname;}
            set { this._stname = value; }
        }
        public string StService { get { return this._stservice; } set { this._stservice = value; } }
    }

我还包括

    <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>

请让我知道我错在哪里，谢谢你的帮助

您的代码似乎很好。你登记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>


ExtJS ASP.NET Web服务
Ext.onReady（函数（）{
var myStore=new Ext.data.JsonStore({
//立即加载数据
自动加载：对，
//覆盖默认http代理设置
代理：新Ext.data.HttpProxy({
//使用GET语法调用web服务方法
url:'Service.asmx/GetStudentList'，
//请求Json响应
标题：{'Content-type'：'application/json'}
}),
//根变量
根：‘d’，
//记录标识符
id:'性病'，
//读者：Jreader，
//字段声明
字段：['StId'，'StName'，'StService']，
});
var grid=新建Ext.grid.GridPanel({
//设置存储
商店：myStore，
//列定义
栏目：[
{dataIndex:'StId'，header:'St Id'}，
{dataIndex:'StName'，header:'St Name'}，
{dataIndex:'StService'，头：'St Service'}
],
//将网格渲染到id设置为panel的dom元素
renderTo:'divGrid'，
宽度：422，
身高：300
});
});

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; } }
    }
}

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.Web.Services；
使用System.Web.Script.Services；
命名空间WebService4ExtJS
{
/// 
///服务1的摘要说明
/// 
[脚本服务]
公共类服务：System.Web.Services.WebService
{
[WebMethod（EnableSession=true）]
[ScriptMethod（ResponseFormat=ResponseFormat.Json，UseHttpGet=true，XmlSerializeString=false）]
公共列表GetStudentList（）
{
列表义务=新列表（）；
义务添加（新学生（1，“约翰”、“多伊”）；
义务添加（新学生（2，“迈克尔”，“人群”）；
义务添加（新学员（3，“Gunnar”、“Rasmundsson”）；
义务添加（新生（4，“艾丽西亚”，“人类”）；
返还义务人；
}
}
公立班学生
{
私人国际贸易；
私有字符串\u stname；
私有字符串服务；
公立学生（）{}
公立学生（int-stid、string-stname、string-stservice）
{
this.StId=StId；
this.StName=StName；
this.StService=StService；
}
公共int StId
{
获取{返回此。_stid；}
设置{this.\u stid=value；}
}
公共字符串StName
{
获取{返回此。\ stname；}
设置{this.\u stname=value；}
}
公共字符串StService{get{返回此。_StService；}设置{this。_StService=value；}}
}
}

区别在于html代码的部分

编辑：添加解决方案（由Nitin Soni在评论中提供，在此处添加，以便搜索时不会混淆）

您可以看到Nitin在评论中说，该问题特定于ExtJS 4.1版：

我检查了你的代码，也做了同样的事情，是的，它对我也有效。。我我们进一步分析了ExtJs版本的问题。你的代码（代码项目代码）正在使用ExtJS2.2库文件，而我使用了Extjs 4.1最新的库文件。看来问题出在你身上特定的ext-all.js文件版本。我已将此文件替换为旧文件版本和它的工作

此外，他还提供了解决方案：（再次发表评论）

我已经找到了使用ExtJS4.1的解决方案。我也必须使用存储区方法读取器中的以下代码行：{type:'json'，root: 'd'}

下面是我的测试。出于测试目的，我制作了一个数据目录，该目录与其他目录（如app）的级别相同。我将Web服务文件移动到此目录中。我没有碰index.html中的任何内容

我还为WebMethod中的JSON格式添加了两行代码

JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(obList));

对于此更改，我还将WebMethod中Student的返回类型更改为void

JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(obList));

下面是我制作的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'
                }
            }
        }
    }]
})

});

这对我很有用。

谢谢你的回复，以下是我的Json回复{“d”：[{“Student”，“StId”：1，“StName”：“John”，“StService”：“Doe”}，{“Student”，“StId”：2，“StName”：“Michael”，“StService”：“Crowd”}，{“Student”，“StId”：3，“StName”：“Gunnar”，“StService”：“Rasmundsson”}，{“Student”，“StId”：4，“StName”：“Alicia”，“StService”：“St”：“St”“人类”}]}我在上找到了一个类似的实现，可能会有所帮助。是的，我读过同样的内容，并在这里实现了同样的内容，但没有成功。感谢Falaque的回复。我检查了你的代码并做了同样的操作，是的，它对我也有效。我进一步分析了这个问题与ExtJs版本有关。你的代码（代码项目代码）使用的是Extjs 2.2库文件，而我使用的是Extjs 4.1最新的库文件。问题似乎出在特定的ext-all.js文件版本上。我已将此文件替换为旧版本，并且可以正常工作。但在我的应用程序中，我们必须使用最新的库，这在我的应用程序中似乎不受支持