Реализация jgGrid jQuery с форматированием ASP.Net и JSON

Я просто барахтаюсь, пытаясь все собрать воедино. Моя первая проблема - это просто создание правильного ответа JSON. Мой возвращенный класс кажется сериализованным как свойство с именем 'd' - это вещь JQuery или соглашение о веб-методах ASP.Net? Боюсь, что jqGrid будет искать данные верхнего уровня, тогда как asp.net поместит их в свойство с именем 'd':

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static object GetData() {
        TestClass tc = new TestClass() { One = "Hello", Two = "World" };
        return tc;
    }


        $("#divResults").click(function() {
            $.ajax({
                type: "POST",
                url: "GridData_bak.aspx/GetData",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(test) {
                    // Replace the div's content with the page method's return.
                    $("#divResults").text(test.d.One);
                },
                error: function(msg) {
                    $("#divResults").text(msg);
                }
            });
        });

Плагин flexgrid довольно скуден по документации, однако в небольшом разделе на демонстрационной странице есть урок по созданию сериализованного объекта json, это немного вводит в заблуждение, потому что сетка требует определенного формата, я портировал код php для опции xml с небольшой обезьяньей смазкой вы можете сделать то же самое для форматирования json

вот мой порт xml

the setup for the grid
 $("#tableToFlex").flexigrid({
                 url: 'WebService.asmx/getData'}
                   ... *other configs* ...);

пожалуйста, рассмотрите следующий код в классе webservice.asmx

<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> _
Public Function getData(ByVal page As Integer, _
    ByVal qtype As String, _
    ByVal Query As String, _
    ByVal rp As Integer, _
    ByVal sortname As String, _
    ByVal sortorder As String) As System.Xml.XmlDocument
    'note these parameters are inputted to determine paging and constrains for the   resultant rows

    'Sample list to send to the grid
    Dim list = New List(Of ApplicationStateInformation)
    'Sample row object that holds name , surname , address, idnumber ...
    list.Add(New RowObjects( "test1", "test1", "test1", "12345"))
    list.Add(New RowObjects( "test2", "test2", "test2", "12345"))
    list.Add(New RowObjects( "test3", "test3", "test3", "12345"))
    list.Add(New RowObjects( "test4", "test4", "test4", "12345"))
    'retun a xml doc, as we are using the xml format on the flexgrid

    Dim returnDoc = New System.Xml.XmlDocument()
    returnDoc.Load(New IO.StringReader(ToXmlResult(list)))
    Return returnDoc
End Function

Private Function ToXmlResult(ByVal list As List(Of RowObjects)) As String
    'this is the xml document format the grid understands
    Dim result As String = "<?xml version = ""1.0"" encoding = ""utf-8""?>" & vbCrLf
    result += "<rows>" & vbCrLf
    result += String.Format("<page>{0}</page>" & vbCrLf, "1")
    result += String.Format("<total>{0}</total>" & vbCrLf, "10")
    For Each item In list
        result += ConvertRowData(item)
    Next
    result += "</rows>" & vbCrLf
    Return result
End Function

Private Function ConvertRowData(ByVal row As RowObjects) As String

    Dim result As String = String.Format("<row id='{0}'>" & vbCrLf, row.IdNumber.ToString)
    'THESE SHOULD BE HTML ENCODED (the format arg) but I left it out
    result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.Name)
    result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.Surname)
    result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.IdNumber)

    result += "</row>" & vbCrLf
    Return result
End Function

d в json - это встроенная защита от потенциального эксплойта

пример Я обнаружил, что использует mvc

Полная информация здесь

Нашел ваш пост, когда пытался сделать это для своего проекта. У меня все заработало. Для тех, кому это понадобится в будущем, jqGrid не будет работать сразу с JSON и ASP.NET. Вам нужно внести несколько небольших изменений в grid.base.js. В районе строки 829 замените раздел json case следующим:

case "json":
    gdata = JSON.stringify(gdata); //ASP.NET expects JSON as a string
    $.ajax({ url: ts.p.url, 
             type: ts.p.mtype, 
             dataType: "json", 
             contentType: "application/json; charset=utf-8", //required by ASP.NET
             data: gdata, 
             complete: function(JSON, st) { if (st == "success") { addJSONData(cleanUp(JSON.responseText), ts.grid.bDiv); if (loadComplete) { loadComplete(); } } }, 
             error: function(xhr, st, err) { if (loadError) { loadError(xhr, st, err); } endReq(); }, 
             beforeSend: function(xhr) { if (loadBeforeSend) { loadBeforeSend(xhr); } } });
    if (ts.p.loadonce || ts.p.treeGrid) { ts.p.datatype = "local"; }
    break;

Затем добавьте следующую функцию:

function cleanUp(responseText) {
    var myObject = JSON.parse(responseText);  //more secure than eval
    return myObject.d;  //ASP.NET special
}

Вам также нужно будет включить Парсер и стрингификатор JSON. Помимо работы с ASP.NET, этот исправленный код также называется более безопасный, потому что отсутствует оператор eval.

Обновлено: Я также должен был отметить, что вам, возможно, придется внести аналогичные изменения в grid.celledit.js, grid.formedit.js, grid.inlinedit.js и grid.subgrid.js.

Я просто jTemplates для выполнения подкачки страниц на стороне клиента с помощью jQuery и ASP.NET. Я написал об этом в блоге, который вы можете найти здесь: http://www.aaron-powell.com/blog.aspx?id=1209

В нем рассматривается, как создать шаблонное расположение данных, вернуть данные из ASP.NET и затем реализовать решение для разбиения на страницы.

Я думаю, вы можете заставить jqgrid работать с json и asp.net без изменения grid.base.js и других файлов jqgrid, вы должны использовать свойство datatype, чтобы определить свой собственный вызов ajax и определить читатель json, тогда jqgrid будет использовать ваш пользовательский вызов ajax и считыватель каждый раз при перезагрузке сетки.

Процесс аналогичен для xml, вы просто определяете xmlreader вместо jsonreader.

Все свойства jsonreader определены в онлайн-документация

Примеры пользовательского типа данных см. В разделе «Функция как тип данных» в живая демонстрационная страница в разделе «Новое в версии 3.3».

Мой орудие:

data: "{'page': '" + gdata.page + "', 'rows': '" + gdata.rows + "', 'sidx': '" + gdata.sidx + "', 'sord': '"+ gdata.sord +"', 'nd': '"+ gdata.nd +"', '_ search': '"+ gdata._search +"', 'searchField': '"+ ts.p.searchdata .searchField + "',' searchString ':'" + ts.p.searchdata.searchString + "',' searchOper ':'" + ts.p.searchdata.searchOper + "'}",

успех: функция (JSON, st) { если (st == "успех") {addJSONData (JSON.d, ts.grid.bDiv); если (loadComplete) {loadComplete (); }}

Insted с использованием полного события успеха использования события ajax. таким образом предотвращается двойная серализация json.

Только одна вещь, которую я не осознавал при редактировании ячеек: Предположим, я хочу отредактировать несколько ячеек с одинаковым типом данных (int). У меня только один веб-метод! и я не могу работать с одним и тем же типом данных с другим именем! Кто-нибудь решает такую ​​проблему?

Вы можете использовать ASP.Net MVC JsonResult для заполнения сетки.

Класс человека

public class Person
{
    public int ID { get; set; }
    public string Name { get; set; }
    public DateTime Birthday { get; set; }

    public static IEnumerable<Person> GetABunchOfPeople()
    {
       // Get a bunch of People.
    }
}

В вашем контроллере у вас будет:

public JsonResult GetABunchOfPeopleAsJson()
{
    var rows = (Person.GetABunchOfPeople()
        .Select(c => new
                         {
                             id = c.ID,
                             cell = new[]
                                        {
                                            c.ID.ToString(),
                                            c.Name,
                                            c.Birthday.ToShortDateString()
                                        }
                         })).ToArray();

    return new JsonResult
               {
                   Data = new
                              {
                                  page = 1,
                                  records = rows.Length,
                                  rows,
                                  total = 1
                              }
               };
}

И конфигурация jqGrid для URL-адреса будет:

url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',