Implémentation de jgGrid avec jQuery avec le formatage ASP.Net et JSON

Question

Quelqu'un a-t-il pu implémenter le plugin de grille JQuery, jqGrid? J'essaie d'implémenter la pagination JSON et j'ai l'impression de m'approcher, mais je suis également submergé par des détails sans importance. Si quelqu'un pouvait poster un exemple de code, je l'apprécierais grandement.

Answer 1

Vous avez trouvé votre publication pendant que j'essayais de le faire pour mon projet. Je l'ai fait travailler. Pour ceux qui en ont besoin à l'avenir, jqGrid ne fonctionnera pas immédiatement avec JSON et ASP.NET. Vous devez apporter quelques petites modifications à grid.base.js. Autour de la ligne 829, remplacez la section de cas JSON par la suivante:

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;

Ajoutez ensuite la fonction suivante:

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

Vous devrez également inclure analyseur JSON et identificateur de chaîne . En plus de travailler avec ASP.NET, ce code révisé est également plus sécurisé , car la déclaration eval est parti.

EDIT: J'aurais également dû noter que vous devrez peut-être apporter des modifications similaires à grid.celledit.js, grid.formedit.js, grid.inlinedit.js et grid.subgrid.js. .

Answer 2

Je viens de jTemplates pour faire de la pagination côté client avec jQuery et ASP.NET. J'ai écrit un article sur ce blog que vous pouvez trouver ici: http: // www .aaron-powell.com / blog.aspx? id = 1209

Il explique comment créer un emplacement de données basé sur un modèle, renvoyer les données à partir d'ASP.NET, puis implémenter une solution de pagination.

Answer 3

Vous pouvez utiliser ASP.Net MVC JsonResult pour remplir la grille.

Classe de personnes

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

Dans votre contrôleur, vous aurez:

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

Et la configuration de jqGrid pour l'URL serait:

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

Answer 4

Je suis juste en train d'essayer de tout rassembler. Ma première préoccupation est simplement de générer une réponse JSON correcte. Ma classe retournée semble être sérialisée en tant que propriété nommée 'd'. S'agit-il d'une chose JQuery ou d'une convention de méthode Web ASP.Net? Je crains que jqGrid ne recherche les données au niveau supérieur, alors qu'asp.net les placera dans une propriété appelée '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);
                }
            });
        });

Answer 5

Le plugin flexgrid est assez clairsemé sur la doumentation mais dans une petite section de la page de démonstration il y a un tut sur la création d’un objet sérialisé json, c’est un peu trompeur car la grille nécessite un format spécifique, j’ai porté le code php pour l'option xml avec un peu de graisse de singe, vous pouvez faire la même chose pour le formatage json

heres mon port XML

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

veuillez considérer le code suivant dans la classe 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

Answer 6

le d dans le json est une défense intégrée contre un exploit potentiel

exemple que j'ai trouvé qui utilise mvc

Toutes les informations ici

Answer 7

Je pense que jqgrid peut fonctionner avec json & amp; asp.net sans modifier grid.base.js et d’autres fichiers jqgrid, vous devez utiliser la propriété datatype pour définir votre propre appel ajax personnalisé et définir un lecteur json. jqgrid utilisera ensuite votre appel et lecteur ajax personnalisé à chaque rechargement de la grille. .

Le processus est similaire pour xml, vous définissez simplement un xmlreader au lieu d'un jsonreader.

Toutes les propriétés du lecteur jsonreader sont définies dans la documentation en ligne

Pour des exemples de types de données personnalisés, voir "Fonction en tant que type de données". dans la page de démonstration en direct sous " Nouveautés de la version 3.3 "

Answer 8

Mon outil implémenté:

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 == "quot success") {addJSONData (JSON.d, ts.grid.bDiv); if (loadComplete) {loadComplete (); }}

Institué à l'aide de l'événement de réussite d'utilisation de l'événement ajax complet. De cette façon, empêchez le double json de se séraliser.

Juste une chose que je ne réalisais pas avec l'édition de cellules: Supposons que je veuille éditer plusieurs cellules avec le même type de données (int). Je n'ai qu'une seule méthode Web! et je ne peux pas surcharger avec un même type de données avec un nom différent! Quelqu'un a-t-il résolu ce genre de problème?