Проблема привязки jqGrid в ASP.NET

Question

Я новичок в использовании jqGrid и jquery. Я не могу связать свои данные json, которые я извлекаю из веб-метода, в jqGrid.

Я также использовал firebug для перекрестной проверки и получаю данныеот него.Некоторая помощь по этому поводу будет отличной.Я также хотел бы знать, нужно ли добавлять какие-либо другие ссылки.

Ниже приведен код, который я реализовал.

МЕТОД СТРАНИЦЫ

[WebMethod]
public static string GetData()
{
    Customer Cone = new Customer();
    Customer Ctwo = new Customer();
    Cone.CustomerID = "100";
    Cone.CustomerName = "abc";
    Ctwo.CustomerID = "101";
    Ctwo.CustomerName = "xyz";
    List<Customer> lstCustomer = new List<Customer>();
    lstCustomer.Add(Ctwo);
    lstCustomer.Add(Cone);
    JavaScriptSerializer jsonSerz = new JavaScriptSerializer();
    string serializedData = jsonSerz.Serialize(lstCustomer);
    return serializedData; 
}

кодирование на стороне клиента

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.jqGrid.min.js"></script>
<script type="text/javascript">
    function GetData() {
        alert('Inside GetData');
        var data = PageMethods.GetData(OnSuccess, OnFailed);
    }
    function OnFailed(error) {
        alert('Failed');
        alert(error.get_message());
    }
    function OnSuccess(data) {
            alert(data);
    }
    $(document).ready(function() {
        $('#submit').click(function() {
            alert('Button Clicked');
            $('#list').jqGrid({
                url: 'http://localhost:1405/WebSite1/Default.aspx/GetData',
                data: '{}',  // For empty input data use "{}",
                dataType: 'local',
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                colNames: ['CustomerID', 'CustomerName'],
                colModel: [
                    { name: 'CustomerID', index: 'CustomerID', width: 80,
                      align: 'left', editable: false },
                    { name: 'CustomerName', index: 'CustomerName', width: 120,
                      align: 'left', editable: true}],
                pager: $('#pager'),
                rowNum: 5,
                rowList: [10],
                sortname: 'CustomerID',
                sortorder: 'desc',
                viewrecords: true,
                width: 300
            });
        });
    });
</script>

И HTML-код

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
</asp:ScriptManager>
<input type="button" id="submit" value="Fetch" title="Fetch"
       onclick="javascript:GetData()" />
<table id="list">
</table>
<div id="pager">   
</div>

Answer 1

Прежде всего, я рекомендую вам немного поиграть с другим рабочим кодом, который вы можете загрузить здесь (см. Дополнительную информацию здесь ).Дополнительные ссылки на другие примеры вы можете найти здесь .

Я пытаюсь описать некоторые проблемы в вашем текущем коде.

1. Вы используете 'http://localhost:1405/WebSite1/Default.aspx/GetData' в качестве URL.Вам лучше использовать только такие патчи, как '/WebSite1/Default.aspx/GetData' или 'WebSite1 / Default.aspx / GetData', или вы можете легко получить та же политика происхождения проблема.следует использовать сервис ASMX вместо размещения кода внутри страницы ASPX (Default.aspx / GetData).Вам просто нужно добавить новый элемент в ваше решение ASP.NET и выбрать шаблон Web Serice.Соответствующий шаблон кода будет добавлен для вас, и файл web.config будет изменен.Таким же образом вы можете разместить сервис WCF внутри вашего проекта ASP.NET.Этот шаг не зависит от используемой вами технологии (WebForms, ASP.NET MVC и т. Д.).
2. Вместо ручной JSON-сериализации в отношении JavaScriptSerializer вы должны определить [ScriptMethod(ResponseFormat = ResponseFormat.Json)] атрибут вашего метода ивернуть объект из веб-метода (например, List<Customer> в вашем случае).Сериализация JSON будет выполнена автоматически .
3. Вы используете dataType: 'local', что является неверным параметром для jqGrid.Правильный параметр будет datatype:'json' (datatype вместо dataType и 'json' для отправки запроса на сервер).
4. Вместо type: 'POST' вы должны использовать mtype: 'POST'.
5. Вместо contentType: "application/json; charset=utf-8" следует использовать ajaxGridOptions: { contentType: "application/json" }.
6. Использование data: '{}' также неправильно.Возможно, вы пытаетесь использовать data параметр jQuery.ajax , как с параметром dataType.В jqGrid вы должны использовать pastData вместо data, а параметр data должен быть массивом и иметь другое значение.Я рекомендую вам взглянуть на код примера (см. Ссылку в начале моего ответа).
7. Вы не должны помещать $('#list').jqGrid({...}); внутри дескриптора click.Проблема в том, что код выполняет некоторые инициализации jqgrid и затем заполняет сетку.Что вы, вероятно, хотите, это создать сетку только один раз, а затем обновить ее с помощью другой входной вероятностной информации (я не уверен, что это так).Таким образом, вы должны переместиться на $('#list').jqGrid({...}); внутрь $(document).ready(function() {...};.При необходимости вы можете использовать $('#list').trigger("reloadGrid") внутри дескриптора события click.В качестве альтернативы вы можете использовать GridUnload , чтобы уничтожить существующую сетку перед созданием новой.

Я могу продолжить, но моя основная рекомендация - изучить другие примеры и использовать службу ASMX или WCF, котораяпредоставить данные для jqGrid.

Answer 2

Событие привязки всей сетки вызывается перед вашим методом страницы.Вы поместили его в документ. Готовое событие.Попробуйте вызвать его из события нажатия кнопки.

Я не уверен, но должен быть какой-то способ привязать данные JSON к сетке Jquery на стороне клиента без использования части URL.data: "до некоторого значения Json.