.Net WebService + ExtJs для заполнения сетки

Я сделал небольшую программу для заполнения gridPanel с использованием метода веб-сервиса ExtJs и .NET, но она не заполняется. Мой код ниже

//Это мой метод веб-сервиса

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

//Это мой код заполнения сетки 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>

Пожалуйста, дайте мне знать, где я ошибаюсь, спасибо за любую помощь !!!!


person Nitin Soni    schedule 03.07.2012    source источник


Ответы (2)


Ваш код выглядит нормально. Вы проверили в firefox-firebug? просто проверьте трафик и посмотрите, какую ошибку вы получаете.

EDIT: добавление кода.

Ниже приведен полный рабочий пример, основанный на вашем примере:

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

Код службы.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-кода.

РЕДАКТИРОВАТЬ: добавление решения (предоставлено Нитином Сони в комментарии, добавлено здесь, чтобы не запутаться, если кто-то ищет)

Вы можете видеть, что Нитин говорит в комментарии, что проблема характерна для ExtJS версии 4.1:

Я проверил ваш код и сделал то же самое, и да, это работает и для меня. Я дополнительно проанализировал, что проблема связана с версией ExtJs. Ваш код (код проекта кода) использует файлы библиотеки Extjs 2.2, тогда как я использовал последние файлы библиотеки Extjs 4.1. Кажется, проблема связана с конкретной версией файла ext-all.js. Я заменил этот файл старой версией, и он работает.

Далее он предоставляет решение: (опять же в комментарии)

Я нашел решение, используя Extjs 4.1. также я должен использовать следующую строку кода в считывателе метода Store: { type: 'json', root: 'd' }

person Falaque    schedule 03.07.2012
comment
привет, спасибо за ответ, ниже мой ответ 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}]} - person Nitin Soni; 03.07.2012
comment
я нашел аналогичную реализацию в кодовом проекте, вероятно, что помог бы. - person Falaque; 03.07.2012
comment
да, я читал то же самое и реализовал то же самое здесь, но не добился успеха. - person Nitin Soni; 03.07.2012
comment
Может ли кто-нибудь предоставить мне небольшой рабочий пример кода или ссылку? Благодарность - person Nitin Soni; 03.07.2012
comment
эй, я использовал ваш пример, и это сработало для меня. в теге body просто поместите ‹div id=divGrid›‹/div› (удалить Scritmanager и т. д.) - person Falaque; 03.07.2012
comment
Спасибо Фалак за ответ. Я проверил ваш код и сделал то же самое, и да, это работает и для меня. Я дополнительно проанализировал, что проблема связана с версией ExtJs. Ваш код (код проекта кода) использует файлы библиотеки Extjs 2.2, тогда как я использовал последние файлы библиотеки Extjs 4.1. Кажется, проблема связана с конкретной версией файла ext-all.js. Я заменил этот файл старой версией, и он работает. Но в моем приложении мы должны использовать последние библиотеки, которые в данном случае не поддерживаются. Есть ли у вас какие-либо предложения по этому поводу? - person Nitin Soni; 03.07.2012
comment
Либо мне нужно вернуться к старой версии, либо использовать последнюю версию библиотеки любым другим способом. Спасибо за любую помощь!!!! - person Nitin Soni; 03.07.2012
comment
Я нашел решение, используя Extjs 4.1. также я должен использовать следующую строку кода в считывателе метода Store: { type: 'json', root: 'd' } - person Nitin Soni; 03.07.2012

Ниже мое тестирование. Для целей тестирования я создал каталог данных, который находится на том же уровне, что и другие каталоги, такие как app. И я переместил файл веб-сервиса в этот каталог. Я ничего не трогал в index.html.

И я также добавил две строки кода для формата JSON в WebMethod.

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

Для этого изменения я также изменил тип возвращаемого значения для Student на void в WebMethod.

Ниже приведены коды 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'
                }
            }
        }
    }]
})

});

Меня устраивает.

person asekang    schedule 31.12.2018