将数据从Web服务(asmx)加载到jqgrid.请帮我 [英] Load data from Webservice (asmx) to jqgrid. Please help me

查看：60
本文介绍了将数据从Web服务(asmx)加载到jqgrid.请帮我的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个样本来测试jqgrid.

I create a Sample to test jqgrid.

GetDataService.asmx:

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-LAPTOP\SQLEXPRESS;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

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

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

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.

When i alert jsondata string , it return null.

请查看并帮助我将数据加载到jqgrid

Please review and help me to load data to jqgrid

最好的问候

推荐答案

您的示例存在很多问题.例如

You example have a lot of problems. For example

  • 如果您在Web方法上使用[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]属性，在Web服务类上使用[ScriptService]属性，则输出参数将被自动转换为JSON . (请参阅 asmx Web服务，json，javascript/jquery?例如).然后，您将不需要实现JsonForJqgrid之类的功能.
  • 您使用的程序模板非常旧.不再需要将datatype用作JSON数据的功能. HTML中非常老的jqGrid参数imgpath和class="scroll"的用法不再使用，因为许多版本的jqGrid都表明您对程序使用了非常老的模板.
  • 一些小错误，例如type: "'GET'"而不是type: 'GET'或type: "GET".
  • If you use [WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)] attribute on the web method and [ScriptService] on the the web service class, then the output parameter will be automatically converted to JSON. (see asmx web service, json, javascript/jquery? for example). Then you will not need implementthe functions like JsonForJqgrid.
  • You use very old template for your program. The usage of datatype as function for JSON data is no more needed. The usage of very old jqGrid parameters imgpath and class="scroll" in HTML which no more used since many versions of jqGrid show also that you use an very old template for your program.
  • small errors like type: "'GET'" instead of type: 'GET' or type: "GET".

如果您将datatype用作功能，那么如果您决定在应用程序中实现搜索的数据分页，则会遇到问题.

If you will follow the way with the usage of datatype as function you will receive problems if you decide implement data paging of searching in your application.

我建议您最好看一些其他示例，例如 jqgrid第1页x pager ， jqgrid setGridParam数据类型:local 或 使用ASP.NET MVC的jQuery-调用启用了Ajax的Web服务.您也可以下载一个有效的示例 http://www.ok-soft-gmbh我创建的.com/jqGrid/WebServicesPostToJqGrid.zip 作为 http://www.ok-soft-gmbh.com/jqGrid/VS2008jQueryMVC.zip 或使用ASP.NET MVC进行的jQuery-调用启用了Ajax的Web服务)

I recommend you better look at some other examples like jqgrid Page 1 of x pager, jqgrid setGridParam datatype:local or jquery with ASP.NET MVC - calling ajax enabled web service. You can aslo download a working example http://www.ok-soft-gmbh.com/jqGrid/WebServicesPostToJqGrid.zip which I created as a part of the http://www.trirand.com/blog/?page_id=393/help/pager-not-working-for-me-where-am-i-doing-wrong answer or http://www.ok-soft-gmbh.com/jqGrid/VS2008jQueryMVC.zip or http://www.ok-soft-gmbh.com/jqGrid/jQueryMVC.zip (see the another old answer jquery with ASP.NET MVC - calling ajax enabled web service)

更新:您的JavaScript文件顺序也不正确. ui.multiselect.css未全部加载.您应该将其更改为

UPDATED: You have also the wrong order of the JavaScript files. The ui.multiselect.css is not loaded as all. You should change it to

不需要包含jqDnR.js和jqModal.js.如果您在 jqGrid下载jquery.jqGrid.js的一部分. >. jqGrid不需要jquery.layout.js.仅当单独使用它时，才应包括它.

Including of jqDnR.js and jqModal.js is not needed. It should be a part of jquery.jqGrid.js if you check the corresponding modules during jqGrid downloading. The jquery.layout.js are not needed for jqGrid. You should include it only if you use it separately.

这篇关于将数据从Web服务(asmx)加载到jqgrid.请帮我的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆