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

Ответ 1

Нашел свой пост, пока я пытался сделать это для своего проекта. Я заработал. Для тех, кому это нужно в будущем, 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.

Ответ 2

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

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

Ответ 3

Вы можете использовать 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") %>',

Ответ 4

Я просто барахтаюсь, пытаясь собрать все вместе. Моя первая забота - просто генерировать правильный ответ 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 content with the page method return.
                    $("#divResults").text(test.d.One);
                },
                error: function(msg) {
                    $("#divResults").text(msg);
                }
            });
        });

Ответ 5

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

heres my xml port

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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

Ответ 8

My Implement:

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 + "'}",

success: function (JSON, st) { if (st == "success" ) {addJSONData (JSON.d, ts.grid.bDiv); if (loadComplete) {loadComplete(); }}

Заполняется при использовании события успешного использования события ajax. таким образом, предотвращается двойное json seralize.

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