Как связать jqGrid с помощью asmx webservice C # - PullRequest
Новая
       13

Как связать jqGrid с помощью asmx webservice C #

3 голосов
/ 10 марта 2012

Пожалуйста, мне нужна помощь в том, как связать jqGrid с asmx webservice C #, я нашел несколько тем о том, как конвертировать asmx webservice в JSON, но мне не совсем понятно

С уважением

1 Ответ

2 голосов
/ 10 марта 2012

Прежде всего вы должны определить WebMethod, который предоставит данные для jqGrid. Если вы планируете осуществлять сортировку и разбиение на страницы на стороне сервера, веб-метод должен иметь как минимум следующие параметры 

public JqGridData TestMethod (int page, int rows, string sidx, string sord)

где JqGridData класс будет определен, например, как 

public class TableRow {
    public int id { get; set; }
    public List<string> cell { get; set; }
}
public class JqGridData {
    public int total { get; set; }
    public int page { get; set; }
    public int records { get; set; }
    public List<TableRow> rows { get; set; }
}

Существуют и другие варианты заполнения сетки, но сначала важно понять хотя бы один способ.

Важно, что для возврата данных JSON из веб-метода вам не нужно вручную преобразовывать возвращаемые данные в JSON . Вам просто нужно вернуть объект с данными, и веб-служба ASMX сериализует сам объект в XML или JSON на основе заголовков HTTP-запроса.

Если запрос к серверу будет содержать application/json; charset=utf-8 или application/json в части Content-Type заголовка HTTP, возвращаемые данные будут JSON и будут 

{
    "d": {
        "page": 1,
        "total": 4,
        "records": 4,
        "rows": [
            ...
        ]
    }
}

На стороне клиента вы должны использовать 

$("#list").jqGrid({
    url: 'MyTestWS.asmx/TestMethod',
    datatype: 'json',
    mtype: 'POST',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {
        return JSON.stringify(postData);
    },
    jsonReader: {
        root: "d.rows",
        page: "d.page",
        total: "d.total",
        records: "d.records"
    }
    gridview: true,
    ...
}

См. здесь для примера кода.

ОБНОВЛЕНО : Здесь и здесь Вы можете загрузить демонстрационные проекты Visual Studio. См. ответ для получения дополнительных ссылок на другие демонстрационные проекты.

...