Ваша главная проблема в том, что вы используете не абсолютные URL в вызове ajax. Неправильные записи в web.config также могут создавать проблемы. Более того, вы используете datatype: getMovies вместо datatype: 'json' и postData: yourData. Способ с datatype в качестве функций существует (см. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#function),, но начиная с jqGrid 3.6.5 у вас есть более прямой путь внутри jsonReader для чтения данных, возвращаемых с веб-сервера.
ОБНОВЛЕНИЕ:
Мне кажется, что описание возможностей редактирования я сделаю позже и объясню здесь, как получить данные JSON и заполнить их внутри jqGrid.
Прежде всего, jqGrid может запросить у себя данные JSON с сервера. Поэтому нам не нужно совершать отдельный звонок jQuery.ajax. Вам нужно только определить URL-адрес, указывающий на сервер, и указать дополнительные jQuery.ajax параметры, которые вы предпочитаете.
Вы не публикуете в своем вопросе определение класса Movie. Так что я сам определяю это следующим образом
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; }
}
Следует отметить, что Microsoft сериализует тип DataTime не как читаемую строку даты, а как строку /Date(utcDate)/, где utcDate - это число
(см. jQuery.param () - не сериализует объекты даты javascript? ). Чтобы в начале было меньше проблем, я определяю ReleaseDate как строку.
Метод IList<Movie> GetMovies() возвращает данные JSON как массив объектов Movie. Таким образом, jqGrid в ответ на запрос HTTP GET получает от URL MovieService.svc/GetMovies данные, подобные следующим:
[{"Id":1, "Name": "E.T.", "Director": "Steven Spielberg",...},{...},...]
Я могу сказать, что это не типичный формат данных, которые ожидают jqGrid (сравните с http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data). Чтобы иметь возможность разместить данные внутри jqGrid, мы должны определить jsonReader. Поэтому мы делаем следующее
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 });
REMARK : я удаляю из примера любые параметры сортировки, потому что в случае запроса данных JSON параметр сортировки будет отправляться только на сервер (некоторые дополнительные параметры добавляют URL-адрес сервера) и сервер должен вернуть отсортированные данные. Для получения дополнительной информации см. Описание параметра prmNames в http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options и описание параметра sopt в http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching.
Для datatype: 'json' мы определяем параметр dataType: 'json' для jQuery.ajax (не путайте регистр внутри параметра datatype). Имена всех полей внутри colModel, которые мы определяем , точные , совпадают с именами полей внутри наших объектов JSON. Некоторые дополнительные параметры viewrecords, rownumbers, sortable и headertitles не очень важны в этом примере, я выбрал там, потому что 1) мне нравится там и 2) я установил rowNum: 0, чтобы сделать возможными опции rownumbers: true работает правильно и не показывает нам отрицательные номера строк, начинающиеся с -5, если rowNum: 5, как в исходном примере.
С помощью ajaxGridOptions: { contentType: "application/json" } мы определяем дополнительные параметры, которые будут direct пересылаться в jQuery.ajax.
Самая сложная часть этого примера -
jsonReader: { repeatitems: false, id: "Id", root: function(obj) { return obj; }}
Он определяет, что id всех строк имеет имя "Id" (см. Определение class Movie). «repeatitems: false» говорит, что каждое поле данных, которое мы хотим идентифицировать по имени поля (определено в colModel) вместо определения по умолчанию для каждой позиции. Определение root немного странно, но оно определяет, как найти root из строк внутри данных JSON. Формат данных JSON по умолчанию следующий
{
total: "xxx",
page: "yyy",
records: "zzz",
rows : [
{id:"1", cell:["cell11", "cell12", "cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23"]},
...
]
}
и корень строк определяется как root: "rows". Таким образом, если данные JSON назначены переменной res, корень может быть возвращен как res.rows. Чтобы позволить jqGrid читать наши данные, мы определяем jsonReader.root как функцию (эта функция существует, поскольку jqGrid 3.6.5 см. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:change#additions_and_changes).. Вы можете убедиться, что этот странный метод работает. Типичные дополнительные параметры page, total (lastpage) и records не существуют внутри наших данных JSON, и они будут инициализированы следующим образом page:0, total:1, records:0. Поэтому мы не можем выполнять подкачку данных. Вы можете расширить jsonReader с помощью функций, определяющих page, total и records (также как функции) как
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; }
}
, который дополнит наш jsonReader. Тогда настройка rowNum: 0 больше не понадобится.
Я показал этот способ только для того, чтобы показать гибкость jqGrid. Вы должны использовать описанный способ, только если вы получаете доступ к веб-серверу, который вы не можете изменить. jqGrid имеет такие функции, как разбиение по страницам , сортировка и два вида поиска (больше как фильтрация с WHERE в соответствующем SELECT) данных: простые и расширенные. Если мы хотим, чтобы эти замечательные функции были внутри jqGrid на наших веб-страницах, мы должны определить в веб-сервисе дополнительный метод, такой как
[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)
где 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; }
}
Или, если мы хотим использовать наиболее компактную форму данных, передаваемых с сервера на клиент, тогда
// 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.
}
(вы можете узнать больше об этом виде передачи данных на http://www.trirand.com/blog/jqgrid/jqgrid.html, если вы выберете в левой части дерева «Отображение данных», а затем «Оптимизация данных»)
P.S .: О jsonReader вы можете прочитать больше на http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data. Один мой старый ответ Отображение данных JSON в JQGrid также может быть вам интересно.
ОБНОВЛЕНО 2 : Поскольку вы не помечаете ответ как принятый, у вас остаются некоторые проблемы. Поэтому я создал новый проект в Visual Studio 2010, который демонстрирует то, что я написал. Вы можете скачать исходный код с http://www.ok -soft-gmbh.com / jqGrid / jQueryMVC.zip . Сравните с вашим проектом, особенно часть с полным URL-адресом в качестве параметра jqGrid и часть web.config, которая описывает интерфейс службы WCF.
ОБНОВЛЕНО 3 : я использую VS2010 не так давно. Так что я мог бы очень быстро понизить это до VS2008. Таким образом, почти тот же код работает в Visual Studio 2008, но с ASP.NET MVC 2.0 вы можете загрузить его с http://www.ok -soft-gmbh.com / jqGrid / VS2008jQueryMVC.zip . Код в ASP.NET MVC 1.0 должен быть таким же, но необходимо пропатчить GUID из файла проекта и некоторые строки из Web.config (см. http://www.asp.net/learn/whitepapers/aspnet-mvc2-upgrade-notes).