mit jquery ASP.NET MVC - Aufruf von ajax-fähigen web-service

Ihr Hauptproblem ist, dass Sie verwenden keine absoluten URLs in der ajax nennen. Falsche Einträge in web.config können machen auch Probleme. Außerdem verwenden Sie datatype: getMovies statt datatype: 'json' und postData: yourData. Die Art und Weise mit datatype als Funktionen vorhanden sind (siehe http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#function), aber da jqGrid 3.6.5 Sie haben mehr direkte Weg im inneren der jsonReader Lesen Sie die zurückgegebenen Daten aus web-server.

AKTUALISIERT:
Es scheint mir, dass die Beschreibung des Editier-Funktionen werde ich später machen und erklären hier nur, wie man JSON-Daten, und füllen Sie es innerhalb von jqGrid.

Zunächst jqGrid Wunsch können sich die JSON-Daten vom server. So brauchen wir nicht zu machen, eine separate jQuery.ajax nennen. Sie müssen nur definieren Sie eine URL, die auf die server aus und definieren Sie einige zusätzliche jQuery.ajax Parameter an, die Sie bevorzugen.
Sie nicht nach in deiner Frage die definition des Movie Klasse. So definiere ich es mir wie folgt

public class Movie {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Director { get; set; }
    public string ReleaseDate { get; set; }
    public string IMDBUserRating { get; set; }
    public string Plot { get; set; }
    public string ImageURL { get; set; }
}

Sollten Sie die Bemerkung, dass Microsoft serialisieren DataTime Typ nicht so eine lesbare Datum-Zeichenfolge, sondern als ein string /Date(utcDate)/, wo utcDate ist diese Zahl
(siehe jQuery.param() - nicht serialisieren javascript-Date-Objekte?). Machen weniger Probleme am Anfang definiere ich ReleaseDate als string.

Methode IList<Movie> GetMovies() gibt JSON-Daten, wie ein array von Objekten Movie. So jqGrid als Antwort auf die HTTP GET Anfrage erhalten Sie von der MovieService.svc/GetMovies URL die Daten wie folgt:

 [{"Id":1, "Name": "E.T.", "Director": "Steven Spielberg",...},{...},...]

Kann ich sagen, dass es nicht das typische format der Daten, die warten jqGrid (vergleichen Sie mit http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data). In der Lage sein, um die Daten innerhalb von jqGrid müssen wir definieren eine jsonReader. Also tun wir Folgendes

jQuery("#editgrid").jqGrid({
    url: '<%= Url.Content("~/MovieService.svc/GetMovies")%>',
    datatype: 'json',
    ajaxGridOptions: { contentType: "application/json" },
    jsonReader: { repeatitems: false, id: "Id", root: function(obj) { return obj; }},
    headertitles: true,
    sortable: true,
    colNames: ['Movie Name', 'Directed By', 'Release Date',
               'IMDB Rating', 'Plot', 'ImageURL'],
    colModel: [
        { name: 'Name', width: 250},
        { name: 'Director', width: 250, align: 'right' },
        { name: 'ReleaseDate', width: 100, align: 'right' },
        { name: 'IMDBUserRating', width: 100, align: 'right' },
        { name: 'Plot', width: 150 },
        { name: 'ImageURL', width: 55, hidden: true }
    ],
    pager: jQuery('#pager'),
    pginput: false,
    rowNum: 0,
    height: '100%',
    viewrecords: true,
    rownumbers: true,
    caption: 'Movies from 2008'
}).jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false });

BEMERKUNG: Entferne ich aus dem Beispiel-Sortieren-Parameter, weil im Falle der Anforderung von JSON-Daten, die Sortier-parameter nur senden an server (einige zusätzliche Parameter Anhängen, die server-URL) und der server muss wieder sortiert, die Daten. Weitere Informationen finden Sie unter Beschreibung der prmNames parameter auf http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options und Beschreibung von sopt parameter auf http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching.

Hinsichtlich der datatype: 'json' definieren wir dataType: 'json' parameter der jQuery.ajax (nicht zu verwechseln mit dem Fall innerhalb von datatype parameter). Die Namen aller Felder innerhalb der colModel definieren wir genaue die gleichen wie die Feldnamen in unserer JSON-Objekte. Einige zusätzliche Parameter viewrecords, rownumbers, sortable und headertitles sind nicht sehr wichtig in diesem Beispiel, wählte ich es, weil 1) ich mag es und 2) ich rowNum: 0 zu ermöglichen, die Optionen rownumbers: true arbeiten korrekt und zeigen uns, negative Zeilennummern begann mit -5 wenn rowNum: 5 wie in deinem ursprünglichen Beispiel.

Mit ajaxGridOptions: { contentType: "application/json" } wir zusätzliche Parameter definiert werden direkte an die jQuery.ajax.

Den komplexesten Teil der in diesem Beispiel ist

jsonReader: { repeatitems: false, id: "Id", root: function(obj) { return obj; }}

Definiert, dass die id von allen Zeilen, die den Namen "Id" (siehe definition des class Movie). "repeatitems: false" sagen, dass jedes Daten-Feld, das wir wollen, zu identifizieren, indem der name des Feldes (definiert in colModel) anstelle von Standard-definition-pro position. Die definition von root ist ein wenig seltsam, aber es wird definiert, wie finden Sie die root von Zeilen innerhalb von JSON-Daten. Standard-format von JSON-Daten ist mit folgenden

{
  total: "xxx", 
  page: "yyy", 
  records: "zzz",
  rows : [
    {id:"1", cell:["cell11", "cell12", "cell13"]},
    {id:"2", cell:["cell21", "cell22", "cell23"]},
      ...
  ]
}

und die Wurzel Zeilen sind definiert als root: "rows". Also, wenn die JSON-Daten der Variablen zugeordnet res, die Wurzel kann zurückgegeben werden, wie res.rows. Zu ermöglichen, jqGrid, um unsere Daten Lesen, definieren wir jsonReader.root als Funktion (diese Funktion gibt es bereits seit jqGrid 3.6.5 sehen http://www.trirand.com/jqgridwiki/doku.php?id=wiki:change#additions_and_changes). Sie können überprüfen, dass diese merkwürdige Methode arbeiten. Die typischen zusätzlichen Parameter page, total (lastpage) und records sind nicht vorhanden innerhalb der JSON-Daten und werden Sie initialisiert werden, wie folgt page:0, total:1, records:0. So sind wir nicht in der Lage, Daten auslagern. Sie können erweitern Sie jsonReader mit Funktionen definieren page, total und records (auch Funktionen) wie

jsonReader: {
    repeatitems: false,
    id: "Id",
    root: function (obj) { return obj; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.length; }
}

das unsere jsonReader. Dann die Einstellung der rowNum: 0 wird nicht mehr benötigt.

Ich zeigte diesen Weg, nur zeigen die Flexibilität von jqGrid. Sie sollten die Verwendung beschriebenen Weise nur, wenn Sie Zugriff auf einen web-server, die Sie nicht ändern können. jqGrid verfügt über Funktionen wie paging, Sortierung und zwei Arten von Suche (mehr als Filterung mit DENEN in den entsprechenden AUSWÄHLEN) von Daten: einfach und erweitert. Wenn wir wollen, dass diese schönen Funktionen innerhalb von jqGrid auf unseren web-Seiten, wir sollten definieren, in Web-Service eine zusätzliche Methode wie

[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json,
        UriTemplate = "jqGridGetTestbereiche?_search={_search}&page={page}&"+
                      "rows={rows}&sidx={sortIndex}&sord={sortDirection}&"+
                      "searchField={searchField}&searchString={searchString}&"+
                      "searchOper={searchOper}&filters={filters}")]
public jqGridTable jqGridGetMovies(
  int page, int rows, string sortIndex, string sortDirection,
  string _search, string searchField, string searchString,
  string searchOper, string filters)

wo jqGridTable

public class jqGridTable
{
    public int total { get; set; }      //total number of pages
    public int page { get; set; }       //current zero based page number
    public int records { get; set; }    //total number of records
    public List<jqGridRow> rows { get; set; }
}
public class jqGridRow
{
    public string id { get; set; }
    public List<string> cell { get; set; }
}

Oder, wenn wir wollen, verwenden Sie die kompakteste form der übertragenen Daten vom server zum client, dann

//jsonReader: { repeatitems : true, cell:"", id: "0" }
public class jqGridTable {
    public int total { get; set; }          //total number of pages
    public int page { get; set; }           //current zero based page number
    public int records { get; set; }        //total number of records
    public List<List<string>> rows { get; set; }//first element in every row must be id of row.
}

(Lesen Sie mehr über diese Art der Datenübertragung auf http://www.trirand.com/blog/jqgrid/jqgrid.html wenn Sie im linken Baum den Teil "Data Mapping" und dann "Data Optimization")

P. S.: Über jsonReader Lesen Sie mehr auf http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data. Einer meiner alten Antwort Mapping von JSON-Daten in JQGrid kann auch interessant sein für Sie.

AKTUALISIERT 2: Weil Sie nicht markieren der Antwort als akzeptiert, Sie bleiben einige Probleme haben. Also schuf ich ein neues Projekt in Visual Studio 2010, die zeigen, was ich geschrieben. Sie können die Quelle download http://www.ok-soft-gmbh.com/jqGrid/jQueryMVC.zip. Vergleichen Sie mit Ihrem Projekt, vor allem der Teil mit der vollständigen url als parameter von jqGrid und ein Teil des web.config, die beschreibt, WCF-service-Schnittstelle.

AKTUALISIERT 3: ich benutze VS2010 nicht so lange Zeit. So konnte ich sehr schnell dieses downgrade zu VS2008. Also fast den gleichen code arbeiten, arbeiten in Visual Studio 2008, aber mit ASP.NET MVC 2.0 you can download http://www.ok-soft-gmbh.com/jqGrid/VS2008jQueryMVC.zip. Den code in ASP.NET MVC 1.0 sollte der gleiche sein, aber eine GUID aus der Projekt-Datei und ein paar Texte aus dem Internet auf.config sollte gepatcht werden (siehe http://www.asp.net/learn/whitepapers/aspnet-mvc2-upgrade-notes).

InformationsquelleAutor Oleg

Ich hatte das gleiche Problem. Ich kam zu dem Schluss, dass die Routen waren sich mit den service-Aufruf. Haben Sie versucht, Phil Haack ist Route Debugger? Gespeichert mein Speck mehrmals.

In der endete, habe ich einen Endpunkt aus einem der Controller.

InformationsquelleAutor Chuck Conway