mit jquery ASP.NET MVC - Aufruf von ajax-fähigen web-service
Dies ist ein bisschen eine Fortsetzung der Vorherige Frage.
Ich nun versuche einen Anruf zu tätigen, um eine AJAX-fähigen web-Dienst, den ich definiert, innerhalb der ASP.NET MVC-Anwendung (d.h. die MovieService.svc
). Aber der service ist noch nie aufgerufen wird, in meinem getMovies
javascript-Funktion.
Diese Technik des Aufrufs der AJAX-web service funktioniert, ok, wenn ich versuche, es in einem nicht ASP.NET MVC-Anwendung, so dass es macht mich Frage mich, ob vielleicht die ASP MVC Routen stören sind Dinge, die irgendwie, wenn es versucht, die AJAX-web-service-Aufruf.
Haben Sie eine Idee, warum meine web-service ist nicht immer genannt? - Code unten.
<script src="<%= ResolveClientUrl("~/scripts/jquery-1.4.2.min.js") %>" type="text/javascript"></script>
<script src="<%= ResolveClientUrl("~/scripts/grid.locale-en.js") %>" type="text/javascript"></script>
<script src="<%= ResolveClientUrl("~/scripts/jquery-ui-1.8.1.custom.min.js") %>"
type="text/javascript"></script>
<script src="<%= ResolveClientUrl("~/scripts/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
var lastsel2;
function successFunction(jsondata) {
debugger
var thegrid = jQuery("#editgrid");
for (var i = 0; i < jsondata.d.length; i++) {
thegrid.addRowData(i + 1, jsondata.d[i]);
}
}
function getMovies() {
debugger
//***** the MovieService#GetMovies method never gets called
$.ajax({
url: 'MovieService.svc/GetMovies',
data: "{}", //For empty input data use "{}",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
success: successFunction
});
}
jQuery(document).ready(function() {
jQuery("#editgrid").jqGrid({
datatype: getMovies,
colNames: ['id', 'Movie Name', 'Directed By', 'Release Date', 'IMDB Rating', 'Plot', 'ImageURL'],
colModel: [
{ name: 'id', index: 'Id', width: 55, sortable: false, hidden: true, editable: false, editoptions: { readonly: true, size: 10} },
{ name: 'Movie Name', index: 'Name', width: 250, editable: true, editoptions: { size: 10} },
{ name: 'Directed By', index: 'Director', width: 250, align: 'right', editable: true, editoptions: { size: 10} },
{ name: 'Release Date', index: 'ReleaseDate', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
{ name: 'IMDB Rating', index: 'IMDBUserRating', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
{ name: 'Plot', index: 'Plot', width: 150, hidden: false, editable: true, editoptions: { size: 30} },
{ name: 'ImageURL', index: 'ImageURL', width: 55, hidden: true, editable: false, editoptions: { readonly: true, size: 10} }
],
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20],
sortname: 'id',
sortorder: "desc",
height: '100%',
width: '100%',
viewrecords: true,
imgpath: '/Content/jqGridCss/redmond/images',
caption: 'Movies from 2008',
editurl: '/Home/EditMovieData/',
caption: 'Movie List'
});
$("#bedata").click(function() {
var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow');
if (gr != null)
jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });
else
alert("Hey dork, please select a row");
});
});
</script>
<h2>
<%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
<table id="editgrid">
</table>
<div id="pager" style="text-align: center;">
</div>
<input type="button" id="bedata" value="Edit Selected" />
Hier mein RegisterRoutes-code:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.IgnoreRoute("*MovieService.svc*");
routes.MapRoute(
"Default", //Route name
"{controller}/{action}/{id}", //URL with parameters
new { controller = "Home", action = "Index", id = "" } //Parameter defaults
);
}
Hier ist, was mein MovieService-Klasse sieht wie folgt aus:
namespace jQueryMVC
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MovieService
{
//Add [WebGet] attribute to use HTTP GET
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json)]
public IList<Movie> GetMovies()
{
return Persistence.GetMovies();
}
}
}
Ich habe bearbeitet Sie meine Reaktion, um zu zeigen, die Routen. Ich fügte hinzu, die IgnoreRoute für die MovieService, aber es nicht etwas ändern, wird die web-service ist noch nicht genannt.
Könnte Sie post ein Prototyp (Schnittstelle) der GetMovies Funktion innerhalb der MovieService.svc. Das problem in deinem code ist klar. Ich würde umschreiben, ein wenig den code und machen es einfach (und fixieren Sie Ihre wichtigsten problem der Ursache).
Interessant. Habe gerade versucht dies mit einem neuen Projekt testen und kann bestätigen das Verhalten. Scheint sich nicht um ein routing-Problem, da können Sie navigieren Sie zu der web-service-direkt. Ich werde mal ein wenig spielen, wenn ich mehr Zeit und sehen, ob ich dies herausfinden.
Ich hoffe mein code funktioniert in deiner Umgebung. Ich hatte keine Probleme mit routing, aber
routes.IgnoreRoute("*MovieService.svc*")
scheint mir eine gute Idee. Wenn etwas nicht mit MVC/WFC wir vergleichen können, mehr Teile von Ihr und meine Projekte. Noch eine Bemerkung: wie Sie sehen konnte, mein Englisch ist nicht gut, so es Sie finden einige deutliche Fehler, bitte Bearbeiten Sie meine Antwort, und beheben diese.
InformationsquelleAutor dcp | 2010-05-14
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ihr Hauptproblem ist, dass Sie verwenden keine absoluten URLs in der
ajax
nennen. Falsche Einträge inweb.config
können machen auch Probleme. Außerdem verwenden Siedatatype: getMovies
stattdatatype: 'json'
undpostData: yourData
. Die Art und Weise mitdatatype
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 derjsonReader
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ätzlichejQuery.ajax
Parameter an, die Sie bevorzugen.Sie nicht nach in deiner Frage die definition des
Movie
Klasse. So definiere ich es mir wie folgtSollten Sie die Bemerkung, dass Microsoft serialisieren
DataTime
Typ nicht so eine lesbare Datum-Zeichenfolge, sondern als ein string/Date(utcDate)/
, woutcDate
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 ObjektenMovie
. So jqGrid als Antwort auf die HTTPGET
Anfrage erhalten Sie von derMovieService.svc/GetMovies
URL die Daten wie folgt: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 FolgendesBEMERKUNG: 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 vonsopt
parameter auf http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching.Hinsichtlich der
datatype: 'json'
definieren wirdataType: 'json'
parameter derjQuery.ajax
(nicht zu verwechseln mit dem Fall innerhalb vondatatype
parameter). Die Namen aller Felder innerhalb dercolModel
definieren wir genaue die gleichen wie die Feldnamen in unserer JSON-Objekte. Einige zusätzliche Parameterviewrecords
,rownumbers
,sortable
undheadertitles
sind nicht sehr wichtig in diesem Beispiel, wählte ich es, weil 1) ich mag es und 2) ichrowNum: 0
zu ermöglichen, die Optionenrownumbers: true
arbeiten korrekt und zeigen uns, negative Zeilennummern begann mit -5 wennrowNum: 5
wie in deinem ursprünglichen Beispiel.Mit
ajaxGridOptions: { contentType: "application/json" }
wir zusätzliche Parameter definiert werden direkte an diejQuery.ajax
.Den komplexesten Teil der in diesem Beispiel ist
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 incolModel
) anstelle von Standard-definition-pro position. Die definition vonroot
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 folgendenund die Wurzel Zeilen sind definiert als
root: "rows"
. Also, wenn die JSON-Daten der Variablen zugeordnetres
, die Wurzel kann zurückgegeben werden, wieres.rows
. Zu ermöglichen, jqGrid, um unsere Daten Lesen, definieren wirjsonReader.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 Parameterpage
,total
(lastpage
) undrecords
sind nicht vorhanden innerhalb der JSON-Daten und werden Sie initialisiert werden, wie folgtpage:0, total:1, records:0
. So sind wir nicht in der Lage, Daten auslagern. Sie können erweitern SiejsonReader
mit Funktionen definierenpage
,total
undrecords
(auch Funktionen) wiedas 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
wo
jqGridTable
Oder, wenn wir wollen, verwenden Sie die kompakteste form der übertragenen Daten vom server zum client, dann
(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).
Sollte ich zu qualifizieren, was ich meinte, als ich sagte, die Beispiele sind schlecht. Das JQGrid Beispiele selbst sind sehr gut, aber Sie sind alle in php, müssen Sie nicht alle in asp.net. Ich denke, dies ist aufgrund der Tatsache, dass Sie wollen, dass Sie kaufen die kommerzielle Steuerung :).
Ich benutze jqGrid in einem Projekt geschrieben ASP.NET MVC mit einem Erholsamen WCF-service die ist ein Teil der gleichen ASP.NET Website. So verwenden wir die gleiche Technik. Ich Spiele ein bisschen mit meiner Tochter und buchen Sie ein Beispiel
Vielen Dank für die tolle Hilfe. Ich werde das ausprobieren Ihrer Lösung sehr schnell, ich habe nur noch nicht die chance hatten noch, weil ich war beschäftigt mit anderen Projekten. Ich werde Sie wissen lassen, was ich finde. Wieder, ich Schätze die ausführliche Erklärung.
Ist das ein VS 2010 Lösung? Ich habe nur VS 2008, so kann ich nicht öffnen Sie die Projektmappen-Datei :(. Wie auch immer, Sie haben lange genug auf diese, ich gehe vor ein akzeptieren der Antwort so bekommen Sie Ihre rep-Punkte.
InformationsquelleAutor Oleg
Das ist, weil die eingetragene route in der global.asax, nicht dies zu erkennen .svc-Datei. Sie werden versuchen, Suche nach, dass der controller mit der action getmovies und wird scheitern. probieren Sie das Debuggen mit firebug.
Sie können dieses Problem beheben, durch das ignorieren dieser route in der global.asax
hat u versuchen, Zugriff auf den Dienst von browser?
Was ich sagen kann, funktioniert es über den browser. Natürlich können wir nicht aufrufen, WCF-Methoden, die vom browser (im Gegensatz zu den asmx-web-Methoden).
InformationsquelleAutor Sundararajan S
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
Oleg,
Haben Sie das Beispiel, das Sie redeten darüber, wie ich arbeite, mit jqgrid/asp.net mvc und Rest-Dienst und ein Kerl von einer Zeit. Es würde helfen zu sehen, wie ich bin auf eine Wand. Thx
SEM
InformationsquelleAutor user351978