Загрузите данные из Webservice (asmx) в jqgrid. пожалуйста, помогите мне - json


1

Я создаю образец для тестирования jqgrid.

GetDataService.asmx:

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Web.Script.Services;
using System.Web.Script.Serialization;
using System.Collections.Generic;
using System.Data.SqlClient;

namespace ExampleJqGrid
{
    /// <summary>
    /// Summary description for GetDataService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]
    [ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    // [System.Web.Script.Services.ScriptService]
    public class GetDataService : System.Web.Services.WebService
    {

        [WebMethod]
        public string GetProduct()
        {
            SqlConnection con = new SqlConnection(@"Data Source=NGUYEN-LAPTOPSQLEXPRESS;Initial Catalog=ProductDB;Integrated Security=True");
            //SqlCommand cmd = new SqlCommand("SELECT * FROM Products", con);
            SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM Products", con);
            DataSet ds = new DataSet();
            da.Fill(ds);
            DataTable dt = ds.Tables[0];            
            GetJSONFromDataTable getJsonDataTable = new GetJSONFromDataTable();
            string json = getJsonDataTable.GetJSONString(dt);
            string jonsData = GetJSONFromDataTable.JsonForJqgrid(dt, 10, 10, 2);
            return jonsData;
        }
    }
}

GetJSONFromDataTable.cs

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text;
using System.Web.Script.Serialization;

namespace ExampleJqGrid
{
    public class GetJSONFromDataTable
    {public static string JsonForJqgrid(DataTable dt, int pageSize, int totalRecords,int page) 
         {
             int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
             StringBuilder jsonBuilder = new StringBuilder();
             jsonBuilder.Append("{");
             jsonBuilder.Append(""total":" + totalPages + ","page":" + page + ","records":" + (totalRecords) + ","rows"");
             jsonBuilder.Append(":[");
             for (int i = 0; i < dt.Rows.Count; i++) 
             {
                 jsonBuilder.Append("{"i":"+ (i) +","cell":[");  
                 for (int j = 0; j < dt.Columns.Count; j++) 
                 {           
                     jsonBuilder.Append("""); 
                     jsonBuilder.Append(dt.Rows[i][j].ToString());
                     jsonBuilder.Append("",");
                 }
                 jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                 jsonBuilder.Append("]},");
             }
             jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
             jsonBuilder.Append("]");
             jsonBuilder.Append("}");
             return jsonBuilder.ToString();        
         }

    }
}

GetJSONFromDataTable.cs

public static string JsonForJqgrid(DataTable dt, int pageSize, int totalRecords,int page) 
{
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
    StringBuilder jsonBuilder = new StringBuilder();
    jsonBuilder.Append("{");
    jsonBuilder.Append(""total":" + totalPages + ","page":" + page + ","records":" + (totalRecords) + ","rows"");
    jsonBuilder.Append(":[");
    for (int i = 0; i < dt.Rows.Count; i++) 
    {
        jsonBuilder.Append("{"i":"+ (i) +","cell":[");  
        for (int j = 0; j < dt.Columns.Count; j++) 
        {           
            jsonBuilder.Append("""); 
            jsonBuilder.Append(dt.Rows[i][j].ToString());
            jsonBuilder.Append("",");
        }
        jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
        jsonBuilder.Append("]},");
    }
    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    jsonBuilder.Append("]");
    jsonBuilder.Append("}");
    return jsonBuilder.ToString();        
}

default.asp

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
         Inherits="ExampleJqGrid._Default" %>

<script type="text/javascript" src="Resources/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="Resources/js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="Resources/js/ui.multiselect.js"></script>
<script type="text/javascript" src="Resources/js/jquery.layout.js"></script>
<script type="text/javascript" src="Resources/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Resources/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="Resources/js/jqDnR.js"></script>
<script type="text/javascript" src="Resources/js/jqModal.js"></script>
<link href="Resources/themes/ui.jqgrid.css" />
<link href="Resources/themes/redmond/jquery-ui-1.8.2.custom.css" />


<script type="text/javascript">

function getProducts() 
{
    $.ajax({
        url: "/GetDataService.asmx/GetProduct",
        data:"{}",  // For empty input data use "{}",
        dataType: "json",
        type: "GET",
        contentType: "application/json; charset=utf-8",
        //success: successFunction
         /*complete*/success: function(jsondata) 
         {
         alert(jsondata);
            var thegrid = jQuery("#list")[0];
            thegrid.addJSONData(JSON.parse(jsondata));
         }
    });
}
function dataBindToGrid() 
{
    jQuery("#list").jqGrid({
        datatype: getProducts(), 
        colNames: [ProductId, ProductName, Description, Price],
        colModel: [{ name: ProductId, index: ProductId, width: 200, align: left },
                    { name: ProductName, index: ProductName, width: 200, align: left },
                    { name: Description, index: Description, width: 200, align: left },
                    { name: Price, index: Price, width: 200, align: left }
                   ],
        rowNum: 10,
        rowList: [5, 10, 20, 50, 100],
        pager: jQuery(#pager),
        //imgpath: <%= ResolveClientUrl("~/Resources/themes/redmond/images") %>,
        imgpath: ~/Resources/themes/redmond/images,
        width: 300,
        viewrecords: true
    }).navGrid(pager, { edit: true, add: false, del: false, search: false });

}
jQuery(document).ready(function() {
    $("#btnAdd").click(dataBindToGrid);  

});

</script>

         

        <table id="list" class="scroll">
        </table>            
        <div id="pager" class="scroll" style="text-align:center;"></div> 
        <button id="btnAdd" >Load Data</button>            
        <asp:TextBox ID="hidenfield" runat = "server" style="display:none"></asp:TextBox>
    </div>
</form>

Когда я предупреждаю строку jsondata, она возвращает null.

Пожалуйста, просмотрите и помогите мне загрузить данные в jqgrid

С наилучшими пожеланиями

  •  12
  •  1
  • 8 фев 2020 2020-02-08 08:05:20

1 ответ

3

У вас, к примеру, много проблем. Например

  • Если вы используете атрибут [WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)] для веб-метода и [ScriptService] в классе веб-службы, тогда выходной параметр будет автоматически преобразован в JSON. (например, веб-сервис asmx, json, javascript/jquery?). Тогда вам не понадобятся функции, такие как JsonForJqgrid.
  • Вы используете очень старый шаблон для своей программы. Использование функции datatype как функции для данных JSON больше не требуется. Использование очень старых параметров jqGrid imgpath и class="scroll" в HTML, которые больше не используются, поскольку многие версии jqGrid показывают также, что вы используете очень старый шаблон для своей программы.
  • небольшие ошибки, например type: "GET" вместо type: GET или type: "GET".

Если вы будете следить за использованием функции datatype как функция, вы получите проблемы, если решите внедрить поиск данных в вашем приложении.

Я рекомендую вам лучше посмотреть на другие примеры, например jqgrid Страница 1 из x pager, jqgrid setGridParam datatype: local или jquery с ASP.NET MVC - вызов веб-службы с поддержкой ajax. Вы также можете загрузить рабочий пример http://www.ok-soft-gmbh.com/jqGrid/WebServicesPostToJqGrid.zip, который я создал как часть http://www.trirand.com/blog/?page_id=393/help/pager-not-working-for-me-where-am-i-doing-wrong или http://www.ok-soft-gmbh.com/jqGrid/VS2008jQueryMVC.zip или http://www.ok-soft-gmbh.com/jqGrid/jQueryMVC.zip (см. другой старый ответ jquery с ASP.NET MVC - вызов веб-службы с поддержкой ajax)

ОБНОВЛЕНО. У вас также неправильный порядок файлов JavaScript. ui.multiselect.css не загружается как все. Вы должны изменить его на

Включение jqDnR.js и jqModal.js не требуется. Он должен быть частью jquery.jqGrid.js, если вы проверите соответствующие модули во время загрузки jqGrid. jquery.layout.js не нужны для jqGrid. Его следует включать, только если вы используете его отдельно.

  • 8 фев 2020 2020-02-08 08:05:21