使用 jqGrid 和 WCF 服务

• 下载演示 - 225 KB

引言

在这里，我将展示如何在 ASP.NET 应用程序中使用 jqGrid 和 WCF。jqGrid 是一个支持 AJAX 的 JavaScript 控件，它提供了在 Web 上表示和操作表格数据的解决方案。

使用代码

1. 首先，我们需要下载最新版本的 jQuery 和 jqGrid 插件。在撰写本文时，jqGrid 的最新版本是 jqGrid 3.5 beta。此版本的主要区别在于，从这个版本开始，jqGrid 不再使用加载器（逐个加载所需的文件），而是将所有需要的代码包含在一个文件中。可以使用 jqGrid 下载管理器构建所需的模块。为了使用它，首先应该加载一个语言文件，然后是 jqGrid 文件。
2. 接下来，您需要在您的项目中添加 JavaScript 并使用 script 标签引用。为了使用 jqGrid 3.5，首先应该加载一个 UI 主题 CSS 文件。详细的说明在下载的 jqGrid zip 文件中。然后，我们需要在我们的 ASP.NET Web 项目中创建一个支持 AJAX 的 WCF 服务。我们需要创建一个方法并向该方法添加以下属性

[OperationContract]
[WebInvoke(Method = "POST",
            BodyStyle = WebMessageBodyStyle.WrappedRequest,
            ResponseFormat = WebMessageFormat.Json
            )]
public string GetProducts()
{
    IList<product> personList = ProductRepository.GetProducts();
    int total = 1, page = 10;
    ProductJqGridView productJqGridView = 
       new ProductJqGridView(total, page, personList);
    return productJqGridView.ToJson();
}

GetProducts 方法将返回一个产品列表。之后，我实例化 ProductJqGridView 对象并调用 ToJson 方法，将对象序列化为正确的 JOSN 格式，以便 jqGrid 可以使用它。

3. 在我们查看 JavaScript 之前，我们需要看看在标记中需要什么。我们需要一个表格来显示数据，一个用于页面导航的 div，以及一个用于加载数据的按钮。请参阅源代码以获取详细信息。
4. 最后，我们将看看如何编写 JavaScript 以将 JSON 数据绑定到 jqGrid。我们使用一个函数作为我们的数据类型。我们使用的函数是 getProducts，它对服务器进行 AJAX 调用，并返回一个 JSON 字符串。在 successFunction 中，我们通过调用 grid.addJSONData 将所有数据插入到 jqGrid 中。

function successFunction(jsondata) {
    var thegrid = jQuery("#productGridView")[0];
    thegrid.addJSONData(JSON.parse(jsondata.d));
}
 
function getProducts() {
    $.ajax({
        url: DataLoader.svc/GetProducts,
        data: "{}",  // For empty input data use "{}",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        success: successFunction
    });
}
 
function dataBindToGrid() {
    jQuery("#productGridView").jqGrid({
        datatype: getProducts,
        colNames: ['ProductID', 'Name', 'ProductNumber', 'Color', 'Size', 'Style'],
        colModel: [{ name: 'ProductID', index: 'ProductID', width: 200, align: 'left' },
            { name: 'Name', index: 'Name', width: 200, align: 'left' },
            { name: 'ProductNumber', index: 'ProductNumber', width: 200, align: 'left' },
            { name: 'Color', index: 'Color', width: 200, align: 'left' },
            { name: 'Size', index: 'Size', width: 200, align: 'left' },
            { name: 'Style', index: 'Style', width: 200, align: 'left' }
                   ],
        rowNum: 10,
        rowList: [5, 10, 20, 50, 100],
        sortname: 'ProductID',
        pager: jQuery('#pageNavigation'),
        sortorder: "desc",
        viewrecords: true
    });
}
jQuery(document).ready(function() {
    jQuery("input#LoadData").live("click", dataBindToGrid);
});

温馨提示...

这只是一个使用 jqGrid 的简单示例，它的许多功能尚未实现。由于这只是一个类似于 "Hello World" 的示例，我将在其他文章中展示它的一些高级功能。

结论

使用 AJAX 和 jqGrid 最难的部分不是概念，而是 JavaScript 技能的水平。为了能够编写可维护的 AJAX 代码，您需要学习 JavaScript。我已经在我的博客上创建了一篇文章来帮助您学习 JavaScript。这是 链接。我希望我的示例可以帮助人们开始在 ASP.NET Web 应用程序中使用 jqGrid 使用 WCF。非常感谢您的反馈。