Die Umsetzung jQuery jgGrid mit ASP.Net und JSON Formatierung
https://stackoverflow.com/questions/181029
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Hat jemand in der Lage, die JQuery Grid-Plugin, jqGrid zu implementieren? Ich versuche, das JSON-Paging zu implementieren, und ich fühle mich wie ich bin immer in der Nähe, aber das hat ich auch durch belanglose Details überschwemmt bin zu werden. Wenn jemand könnte einige Beispiel-Code schreiben, würde ich es sehr schätzen.
Lösung
Gefunden Ihren Beitrag, während ich versuche dies für mein Projekt zu tun. Ich habe es funktioniert. Für alle, die es in Zukunft brauchen, wird jqGrid nicht arbeitet aus der Box mit JSON und ASP.NET. Sie müssen ein paar kleine Änderungen vornehmen grid.base.js. Um die Linie 829, ersetzen Sie den json Fall Abschnitt mit dem folgenden:
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;
Dann fügen Sie die folgende Funktion:
function cleanUp(responseText) {
var myObject = JSON.parse(responseText); //more secure than eval
return myObject.d; //ASP.NET special
}
Sie müssen auch die JSON-Parser und stringifier . Zusammen mit mit ASP.NET arbeiten, ist diese überarbeitete Code auch sicherer weil die eval-Anweisung gegangen.
EDIT: Ich sollte auch festgestellt haben, dass Sie ähnliche Änderungen an grid.celledit.js, grid.formedit.js, grid.inlinedit.js und grid.subgrid.js wahrscheinlich machen .
Andere Tipps
Ich habe gerade jTemplates dafür clientseitige Paging mit jQuery und ASP.NET. Ich habe einen Blog-Post auf sie, die Sie hier finden: http: // www .aaron-powell.com / blog.aspx? id = 1209
Es sieht aus, wie eine Templat-Datenstelle zu erstellen, geben Sie die Daten aus ASP.NET und dann eine Paging-Lösung implementieren.
Sie können die ASP.Net MVC JsonResult verwenden, um das Raster zu füllen.
Person Klasse
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.
}
}
In Ihrem Controller würden Sie haben:
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
}
};
}
Und die jqGrid Konfiguration für die URL wäre:
url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',
Ich zappele nur versuchen, alles zusammen zu ziehen. Meine erste Sorge erzeugt einfach eine korrekte JSON-Antwort. Meine zurück Klasse erscheint serialisiert werden als eine Eigenschaft ‚d‘ genannt - ist dies eine JQuery Sache oder ASP.Net Web-Methode Konvention? Ich habe Angst, dass jqGrid werden versuchen, für die Daten der oberste Ebene sein, während asp.net es in einer Eigenschaft setzen wird ‚d‘ genannt:
[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);
}
});
});
Die Flexgrid-Plugin auf doumentation recht spärlich ist jedoch in einem kleinen Abschnitt auf der Demo-Seite gibt es eine tut ist ein Json serialisiert Objekts zum Erstellen, dies ein wenig irreführend, weil das Gitter ein bestimmtes Format erfordert, habe ich den PHP-Code portierte für xML-Option mit einem kleinen Affen Fett Sie das gleiche für die json Formatierung tun können,
herer mein xml Port
the setup for the grid
$("#tableToFlex").flexigrid({
url: 'WebService.asmx/getData'}
... *other configs* ...);
Sie bitte den folgenden Code in der Klasse WebService.asmx betrachten
<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
Ich denke, man kann jqGrid Arbeit mit json & asp.net ohne grid.base.js und andere jqGrid Dateien zu modifizieren, müssen Sie verwenden, um die Datentypeigenschaft definieren Ihren eigenen Ajax-Aufruf machen und einen json Leser, jqGrid Willen definieren verwenden Ihre benutzerdefinierten ajax-Aufruf und Leser dann jedes Mal das Gitter neu geladen.
Der Prozess ist ähnlich für xml Sie nur eine xmlreader anstelle eines jsonreader definieren.
Alle Eigenschaften des jsonreader sind in der Online-Dokumentation
Beispiele für benutzerdefinierte Datentypen siehe „Funktion als Datentyp“ in der Live-Demo-Seite unter "Neu in 3.3"
Meine Implement:
Daten: "{ 'Seite': '" + gdata.page + " ' 'Reihen':'" + gdata.rows + " ' 'Sidx':'" + gdata.sidx + „ '' sord ':' "+ gdata.sord +" ' 'nd':' "+ gdata.nd +" ' '_ Suche':' "+ gdata._search +" ' 'Suchfeld':'“+ ts. p.searchdata.searchField + " ' 'search':'" + ts.p.searchdata.searchString + " ' 'searchOper':'" + ts.p.searchdata.searchOper + "'}"
Erfolg: function (JSON, st) { if (st == "Erfolg") {addJSONData (JSON.d, ts.grid.bDiv); if (Loadcomplete) {Loadcomplete (); }}
Insted mit komplettem Ajax Ereignisse Verwendung Erfolgsereignis. Auf diese Weise ist der doppelten json seralize verhindern.
Nur eine Sache, die ich mit Zellbearbeitung realisieren didnt: Es sei angenommen, dass ich mehrere Zellen mit dem gleichen Datentyp (int) bearbeiten möchten. Ich habe nur eine Web-Methode! und ich kann nicht oveload mit einem gleichen Datentyp mit diffrent Namen! Ist jemand diese Art von Problemen lösen?
