带有 ASP.NET MVC 的 jquery - 调用启用了 ajax 的 Web 服务-前端问题

jquery with ASP.NET MVC - calling ajax enabled web service(带有 ASP.NET MVC 的 jquery - 调用启用了 ajax 的 Web 服务)

本文介绍了带有 ASP.NET MVC 的 jquery - 调用启用了 ajax 的 Web 服务的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是上一个问题的延续.

现在我正在尝试调用我在 ASP.NET MVC 应用程序中定义的启用 AJAX 的 Web 服务(即 MovieService.svc).但该服务从未在我的 getMovies javascript 函数中被调用.

如果我在非 ASP.NET MVC 应用程序中尝试这种调用 AJAX Web 服务的相同技术，它可以正常工作，所以我想知道当它尝试创建 AJAX 时，ASP MVC 路由是否会以某种方式干扰事物网络服务调用.

你知道为什么我的网络服务没有被调用吗?代码如下.

 <script src="<%= ResolveClientUrl("~/scripts/jquery-1.4.2.min.js") %>"type="text/javascript"></script><script src="<%= ResolveClientUrl("~/scripts/grid.locale-en.js") %>"type="text/javascript"></script><script src="<%= ResolveClientUrl("~/scripts/jquery-ui-1.8.1.custom.min.js") %>"type="text/javascript"></script><script src="<%= ResolveClientUrl("~/scripts/jquery.jqGrid.min.js") %>"type="text/javascript"></script><脚本类型="文本/javascript">var lastsel2;函数成功函数(jsondata){调试器var thegrid = jQuery("#editgrid");for (var i = 0; i < jsondata.d.length; i++) {thegrid.addRowData(i + 1, jsondata.d[i]);}}函数 getMovies() {调试器//***** MovieService#GetMovies 方法永远不会被调用$.ajax({url: 'MovieService.svc/GetMovies',data: "{}",//对于空输入数据使用 "{}",数据类型:json"，类型:获取"，contentType: "应用程序/json; charset=utf-8",成功:成功函数});}jQuery(文档).ready(函数() {jQuery("#editgrid").jqGrid({数据类型:getMovies，colNames: ['id', '电影名称', '导演', '上映日期', 'IMDB Rating', 'Plot', 'ImageURL'],col型号:[{ name: 'id', index: 'Id', width: 55, sortable: false, hidden: true, editable: false, editoptions: { readonly: true, size: 10} },{名称:'电影名称'，索引:'名称'，宽度:250，可true，编辑选项:{大小:10}}，{名称:'导演'，索引:'导演'，宽度:250，对齐:'right'，可true，编辑选项:{大小:10}}，{名称:'发布日期'，索引:'ReleaseDate'，宽度:100，对齐:'right'，可true，编辑选项:{大小:10}}，{ name: 'IMDB Rating', index: 'IMDBUserRating', width: 100, align: 'right', editable: true, editoptions: { size: 10} },{名称:'Plot'，索引:'Plot'，宽度:150，隐藏:false，可true，editoptions:{大小:30}}，{名称:'ImageURL'，索引:'ImageURL'，宽度:55，隐藏:真，可假，编辑选项:{只读:真，大小:10}}],寻呼机:jQuery('#pager')，行号:5，行列表:[5,10,20]，排序名称:'id'，排序顺序:desc"，高度:'100%'，宽度:'100%'，观看记录:真实，imgpath: '/Content/jqGridCss/redmond/images',标题:2008 年的电影"，editurl: '/Home/EditMovieData/',标题:电影清单"});$("#bedata").click(function() {var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow');如果(gr！= null)jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });别的alert("你好笨蛋，请选择一行");});});</脚本><h2><%= Html.Encode(ViewData["Message"]) %></h2><p>要了解有关 ASP.NET MVC 的更多信息，请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC 网站">http://asp.net/mvc</a>.</p><table id="editgrid"></表><div id="pager" style="text-align: center;"></div><input type="button" id="bedata" value="Edit Selected"/>

这是我的 RegisterRoutes 代码:

public static void RegisterRoutes(RouteCollection routes){routes.IgnoreRoute("{resource}.axd/{*pathInfo}");routes.IgnoreRoute("*MovieService.svc*");路线.MapRoute("Default",//路由名称"{controller}/{action}/{id}",//带参数的 URLnew { controller = "Home", action = "Index", id = "" }//参数默认值);}

我的 MovieService 类如下所示:

命名空间 jQueryMVC{[ServiceContract(命名空间 = "")][AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]公共类电影服务{//添加 [WebGet] 属性以使用 HTTP GET[运营合同][WebGet(ResponseFormat = WebMessageFormat.Json)]公共 IList<电影>获取电影(){返回 Persistence.GetMovies();}}}

解决方案

您的主要问题是您在 ajax 调用中使用的不是绝对 URL.web.config 中的错误条目也会产生问题.此外，您使用 datatype: getMovies 而不是 datatype: 'json' 和 postData: yourData.datatype 作为函数的方式存在(见 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#function)，但从 jqGrid 3.6.5 开始，您可以在 jsonReader 读取从 web 服务器返回的数据.

更新:在我看来，我将在稍后描述编辑功能，并在这里解释如何获取 JSON 数据并在 jqGrid 中填充.

首先 jqGrid 可以从服务器请求自己的 JSON 数据.所以我们不需要进行单独的 jQuery.ajax 调用.您只需要定义一个指向服务器的 URL 并定义一些您喜欢的附加 jQuery.ajax 参数.您没有在问题中发布 Movie 类的定义.所以我自己定义如下

公共类电影{公共 int ID { 获取；放;}公共字符串名称 { 获取；放;}公共字符串导演{得到；放;}公共字符串 ReleaseDate { 获取；放;}公共字符串 IMDBUserRating { 获取；放;}公共字符串绘图 { 获取；放;}公共字符串 ImageURL { 获取；放;}}

您应该注意，Microsoft 序列化 DataTime 类型不是作为可读日期字符串，而是作为字符串 /Date(utcDate)/，其中 utcDate 是这个号码(请参阅 jQuery.param() - 不序列化 javascript 日期对象?).为了在开始时减少问题，我将 ReleaseDate 定义为字符串.

方法IList;GetMovies() 像 Movie 对象数组一样返回 JSON 数据.所以 jqGrid 作为对 HTTP GET 请求的响应，从 MovieService.svc/GetMovies URL 接收如下数据:

 [{"Id":1, "Name": "E.T.", "Director": "Steven Spielberg",...},{...},...]

我可以说它不是典型的数据格式，它正在等待 jqGrid(与 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data).为了能够将数据放入 jqGrid 中，我们必须定义一个 jsonReader.所以我们做以下

jQuery("#editgrid").jqGrid({url: '<%= Url.Content("~/MovieService.svc/GetMovies")%>',数据类型:'json'，ajaxGridOptions: { contentType: "application/json" },jsonReader:{repeatitems:false，id:Id"，root:function(obj){return obj；}},标题:是的，可排序:真，colNames: ['电影名称', '导演', '上映日期','IMDB 评级'、'情节'、'ImageURL']、col型号:[{名称:'名称'，宽度:250}，{名称:'导演'，宽度:250，对齐:'右'}，{名称:'ReleaseDate'，宽度:100，对齐:'right'}，{名称:'IMDBUserRating'，宽度:100，对齐:'right'}，{ 名称:'绘图'，宽度:150 }，{名称:'ImageURL'，宽度:55，隐藏:真}],寻呼机:jQuery('#pager')，pginput:假，行号:0，高度:'100%'，观看记录:真实，行号:真，标题:2008 年的电影"}).jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false });

备注:我从示例中删除了所有排序参数，因为在请求 JSON 数据的情况下，排序参数将仅发送到服务器(一些附加参数附加服务器 URL)和服务器必须返回已排序的数据.有关详细信息，请参阅上的 prmNames 参数说明http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options 和 sopt 参数说明.com/jqgridwiki/doku.php?id=wiki:singe_searching" rel="nofollow noreferrer">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching.p>

关于 datatype: 'json' 我们定义 jQuery.ajax 的 dataType: 'json' 参数(不要混淆datatype 参数中的大小写).colModel 中所有字段的名称我们定义 exact 与 JSON 对象中的字段名称相同.一些附加参数 viewrecords、rownumbers、sortable 和 headertitles 在这个例子中不是很重要，我选择那里是因为1)我喜欢那里 2)我设置 rowNum: 0 以使选项 rownumbers: true 工作正确并且不向我们显示以 -5 开头的负行号 if rowNum: 5 就像你原来的例子一样.

使用 ajaxGridOptions: { contentType: "application/json" } 我们定义了额外的参数，这些参数将被 direct 转发到 jQuery.ajax.

这个例子最复杂的部分是

jsonReader: { repeatitems: false, id: "Id", root: function(obj) { return obj;}}

它定义了所有行的 id 都具有名称Id"(参见 class Movie 的定义)."repeatitems: false" 表示我们希望通过字段名称(在 colModel 中定义)而不是每个位置的默认定义来识别每个数据字段.root 的定义有点奇怪，但它定义了如何在 JSON 数据中找到 rows 的 root.JSON数据的默认格式如下

<代码>{总计:xxx"，页:年年"，记录:zzz"，行:[{id:1"，单元格:[cell11"，cell12"，cell13"]}，{id:2"，单元格:[cell21"，cell22"，cell23"]}，...]}

并且行的根被定义为root: "rows".因此如果将 JSON 数据分配给变量 res，则根可以作为 res.rows 返回.为了让 jqGrid 读取我们的数据，我们将 jsonReader.root 定义为一个函数(这个特性自 jqGrid 3.6.5 起就存在，请参阅 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:change#additions_and_changes).您可以验证这种奇怪的方法是否有效.典型的附加参数 page、total (lastpage) 和 records 在我们的 JSON 数据中不存在，它们将被初始化为 page:0, total:1, records:0.所以我们无法进行数据分页.您可以使用定义 page、total 和 records(也作为函数)的函数来扩展 jsonReader，例如

jsonReader: {重复项:错误，身份证:身份证"，根:函数(obj){返回obj；},页面:函数(obj){返回1；},总计:函数(obj){返回1；},记录:函数(obj){返回obj.length；}}

这将完成我们的 jsonReader.那么rowNum: 0的设置就不再需要了.

我展示这种方式只是为了展示 jqGrid 的灵活性.仅当您访问无法更改的 Web 服务器时，才应使用所述方式.jqGrid具有分页、排序和两种搜索(更多是在相应的SELECT中使用WHERE过滤)数据:简单和高级.如果我们想在我们的网页上的 jqGrid 中拥有这些不错的功能，我们应该在 Web Service 中定义一个额外的方法，例如

[OperationContract][WebGet(ResponseFormat = WebMessageFormat.Json,UriTemplate = "jqGridGetTestbereiche?_search={_search}&page={page}&"+"rows={rows}&sidx={sortIndex}&sord={sortDirection}&"+"searchField={searchField}&searchString={searchString}&"+"searchOper={searchOper}&filters={filters}")]公共 jqGridTable jqGridGetMovies(int page, int rows, string sortIndex, string sortDirection,字符串_search，字符串searchField，字符串searchString，字符串搜索操作，字符串过滤器)

在哪里 jqGridTable

公共类 jqGridTable{公共 int 总计 { 获取；放;}//总页数公共 int 页面 { 获取；放;}//当前从零开始的页码公共 int 记录 { 获取；放;}//总记录数公共列表<jqGridRow>行{得到；放;}}公共类 jqGridRow{公共字符串 ID { 获取；放;}公共列表<字符串>细胞{得到;放;}}

或者如果我们想使用从服务器传输到客户端的最紧凑的数据形式，那么

//jsonReader: { repeatitems : true, cell:"", id: "0" }公共类 jqGridTable {公共 int 总计 { 获取；放;}//总页数公共 int 页面 { 获取；放;}//当前从零开始的页码公共 int 记录 { 获取；放;}//总记录数公共列表<列表<字符串>>行{得到；放;}//每行的第一个元素必须是行的id.}

(您可以在 http://www 上阅读有关此类数据传输的更多信息.trirand.com/blog/jqgrid/jqgrid.html 如果您在左侧树部分选择数据映射"，然后选择数据优化")

PS:关于 jsonReader 你可以在 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data.我的一个旧答案在 JQGrid 中映射 JSON 数据也很有趣你.

更新 2:因为您没有将答案标记为已接受，所以您会遇到一些问题.因此，我在 Visual Studio 2010 中创建了一个新项目来演示我编写的内容.您可以从 http://www.ok-soft-gmbh 下载源代码.com/jqGrid/jQueryMVC.zip.对比一下你的项目，尤其是jqGrid的参数为完整url的部分和描述WCF服务接口的web.config部分.

UPDATED 3:我用VS2010的时间不长.所以我可以很快把它降级到VS2008.所以几乎相同的代码在 Visual Studio 2008 中工作，但使用 ASP.NET MVC 2.0，您可以从 http://www.ok-soft-gmbh.com/jqGrid/VS2008jQueryMVC.zip.ASP.NET MVC 1.0 中的代码应该是相同的，但是应该修补项目文件中的 GUID 和 Web.config 中的一些字符串(请参阅 http://www.asp.net/learn/whitepapers/aspnet-mvc2-upgrade-notes).

This is a bit of a continuation of a previous question.

Now I'm trying to make a call to an AJAX enabled web service which I have defined within the ASP.NET MVC application (i.e. the MovieService.svc). But the service is never being called in my getMovies javascript function.

This same technique of calling the AJAX web service works ok if I try it in a non ASP.NET MVC application, so it makes me wonder if maybe the ASP MVC routes are interfering with things somehow when it tries to make the AJAX web service call.

Do you have any idea why my web service isn't getting called? Code below.

    <script src="<%= ResolveClientUrl("~/scripts/jquery-1.4.2.min.js") %>" type="text/javascript"></script>

    <script src="<%= ResolveClientUrl("~/scripts/grid.locale-en.js") %>" type="text/javascript"></script>

    <script src="<%= ResolveClientUrl("~/scripts/jquery-ui-1.8.1.custom.min.js") %>"
        type="text/javascript"></script>

    <script src="<%= ResolveClientUrl("~/scripts/jquery.jqGrid.min.js") %>" type="text/javascript"></script>

    <script type="text/javascript">
        var lastsel2;

        function successFunction(jsondata) {
            debugger
            var thegrid = jQuery("#editgrid");
            for (var i = 0; i < jsondata.d.length; i++) {
                thegrid.addRowData(i + 1, jsondata.d[i]);
            }
        }

        function getMovies() {
            debugger
            // ***** the MovieService#GetMovies method never gets called
            $.ajax({
                url: 'MovieService.svc/GetMovies',
                data: "{}",  // For empty input data use "{}",
                dataType: "json",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                success: successFunction
            });
        }

        jQuery(document).ready(function() {
            jQuery("#editgrid").jqGrid({
                datatype: getMovies,
                colNames: ['id', 'Movie Name', 'Directed By', 'Release Date', 'IMDB Rating', 'Plot', 'ImageURL'],
                colModel: [
                  { name: 'id', index: 'Id', width: 55, sortable: false, hidden: true, editable: false, editoptions: { readonly: true, size: 10} },
                  { name: 'Movie Name', index: 'Name', width: 250, editable: true, editoptions: { size: 10} },
                  { name: 'Directed By', index: 'Director', width: 250, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'Release Date', index: 'ReleaseDate', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'IMDB Rating', index: 'IMDBUserRating', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'Plot', index: 'Plot', width: 150, hidden: false, editable: true, editoptions: { size: 30} },
                  { name: 'ImageURL', index: 'ImageURL', width: 55, hidden: true, editable: false, editoptions: { readonly: true, size: 10} }
                ],
                pager: jQuery('#pager'),
                rowNum: 5,
                rowList: [5, 10, 20],
                sortname: 'id',
                sortorder: "desc",
                height: '100%',
                width: '100%',
                viewrecords: true,
                imgpath: '/Content/jqGridCss/redmond/images',
                caption: 'Movies from 2008',
                editurl: '/Home/EditMovieData/',
                caption: 'Movie List'
            });

            $("#bedata").click(function() {
                var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow');
                if (gr != null)
                    jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });
                else
                    alert("Hey dork, please select a row");
            });            

        });

    </script>

    <h2>
        <%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
            http://asp.net/mvc</a>.
    </p>
    <table id="editgrid">
    </table>
    <div id="pager" style="text-align: center;">
    </div>
    <input type="button" id="bedata" value="Edit Selected" />

Here's my RegisterRoutes code:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    routes.IgnoreRoute("*MovieService.svc*");

    routes.MapRoute(
        "Default",                                              // Route name
        "{controller}/{action}/{id}",                           // URL with parameters
        new { controller = "Home", action = "Index", id = "" }  // Parameter defaults
    );
}

Here's what my MovieService class looks like:

namespace jQueryMVC
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class MovieService
    {
        // Add [WebGet] attribute to use HTTP GET
        [OperationContract]
        [WebGet(ResponseFormat = WebMessageFormat.Json)]
        public IList<Movie> GetMovies()
        {
            return Persistence.GetMovies();
        }

    }
}

解决方案

Your main problem is that you use not absolute URLs in the ajax call. Wrong entries in web.config can make also problems. Moreover you use datatype: getMovies instead of datatype: 'json' and postData: yourData. The way with datatype as functions exist (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#function), but since jqGrid 3.6.5 you have more direct way inside of jsonReader to read the data returned from web server.

UPDATED: It seems to me that describing of editing features I'll make later and explain here just how to get JSON data and fill there inside of jqGrid.

First of all jqGrid can request itself the JSON data from the server. So we don’t need to make a separate jQuery.ajax call. You need only define a URL which point to the server and define some additional jQuery.ajax parameters which you prefer. You don’t post in your question the definition of the Movie class. So I define it myself like following

public class Movie {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Director { get; set; }
    public string ReleaseDate { get; set; }
    public string IMDBUserRating { get; set; }
    public string Plot { get; set; }
    public string ImageURL { get; set; }
}

You should remark, that Microsoft serialize DataTime type not as a readable date string but as a string /Date(utcDate)/, where utcDate is this number (see jQuery.param() - doesn't serialize javascript Date objects?). To make fewer problems at the beginning I define ReleaseDate as string.

Method IList<Movie> GetMovies() returns JSON data like an array of objects Movie. So jqGrid as a response to HTTP GET request receive from the MovieService.svc/GetMovies URL the data like following:

 [{"Id":1, "Name": "E.T.", "Director": "Steven Spielberg",...},{...},...]

I can say that it is not typical format of data, which are waiting jqGrid (compare with http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data). To be able to place the data inside of jqGrid we must define a jsonReader. So we do following

jQuery("#editgrid").jqGrid({
    url: '<%= Url.Content("~/MovieService.svc/GetMovies")%>',
    datatype: 'json',
    ajaxGridOptions: { contentType: "application/json" },
    jsonReader: { repeatitems: false, id: "Id", root: function(obj) { return obj; }},
    headertitles: true,
    sortable: true,
    colNames: ['Movie Name', 'Directed By', 'Release Date',
               'IMDB Rating', 'Plot', 'ImageURL'],
    colModel: [
        { name: 'Name', width: 250},
        { name: 'Director', width: 250, align: 'right' },
        { name: 'ReleaseDate', width: 100, align: 'right' },
        { name: 'IMDBUserRating', width: 100, align: 'right' },
        { name: 'Plot', width: 150 },
        { name: 'ImageURL', width: 55, hidden: true }
    ],
    pager: jQuery('#pager'),
    pginput: false,
    rowNum: 0,
    height: '100%',
    viewrecords: true,
    rownumbers: true,
    caption: 'Movies from 2008'
}).jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false });

REMARK: I remove from the example any sorting parameters, because in case of request of JSON data, the sorting parameter will be only send to server (some additional parameters append the server URL) and server must give back sorted data. For more information see description of prmNames parameter on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options and description of sopt parameter on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching.

With respect of datatype: 'json' we define dataType: 'json' parameter of jQuery.ajax (don’t confuse the case inside of datatype parameter). The names of all fields inside of colModel we define exact the same as the field names inside our JSON objects. Some additional parameters viewrecords, rownumbers, sortable and headertitles are not very important in this example, I choosed there because 1) I like there and 2) I set rowNum: 0 to make possible the options rownumbers: true works correct and not show us negative row numbers started with -5 if rowNum: 5 like in your original example.

With ajaxGridOptions: { contentType: "application/json" } we define additional parameters which will be direct forwarded to the jQuery.ajax.

The most complex part of this example is

jsonReader: { repeatitems: false, id: "Id", root: function(obj) { return obj; }}

It defines that id of all rows have the name "Id" (see definition of the class Movie). "repeatitems: false" say that every data field we want identify by the field name (defined in colModel) instead of default definition per position. The definition of root is a little strange, but it defines how to find the root of rows inside of JSON data. Default format of JSON data is following

{
  total: "xxx", 
  page: "yyy", 
  records: "zzz",
  rows : [
    {id:"1", cell:["cell11", "cell12", "cell13"]},
    {id:"2", cell:["cell21", "cell22", "cell23"]},
      ...
  ]
}

and the root of rows are defined as root: "rows". So if the JSON data assigned to the variable res, the root can be returned as res.rows. To allow jqGrid to read our data we define jsonReader.root as a function (this feature exist since jqGrid 3.6.5 see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:change#additions_and_changes). You can verify that this strange method work. The typical additional parameters page, total (lastpage) and records are not exist inside of our JSON data and they will be initialized as following page:0, total:1, records:0. So we are not able to make data paging. You can expand jsonReader with functions defining page, total and records (also as functions) like

jsonReader: {
    repeatitems: false,
    id: "Id",
    root: function (obj) { return obj; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.length; }
}

which will complete our jsonReader. Then setting of rowNum: 0 will not more needed.

I showed this way only to show the flexibility of jqGrid. You should use described way only if you access a web server which you cannot change. jqGrid has features like paging, sorting and two kind of searching (more as filtering with WHERE in the corresponding SELECT) of data: simple and advanced. If we want have these nice features inside of jqGrid on our web pages we should define in Web Service an additional method like

[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json,
        UriTemplate = "jqGridGetTestbereiche?_search={_search}&page={page}&"+
                      "rows={rows}&sidx={sortIndex}&sord={sortDirection}&"+
                      "searchField={searchField}&searchString={searchString}&"+
                      "searchOper={searchOper}&filters={filters}")]
public jqGridTable jqGridGetMovies(
  int page, int rows, string sortIndex, string sortDirection,
  string _search, string searchField, string searchString,
  string searchOper, string filters)

where jqGridTable

public class jqGridTable
{
    public int total { get; set; }      // total number of pages
    public int page { get; set; }       // current zero based page number
    public int records { get; set; }    // total number of records
    public List<jqGridRow> rows { get; set; }
}
public class jqGridRow
{
    public string id { get; set; }
    public List<string> cell { get; set; }
}

Or if we want use the most compact form of data transferred from server to client then

// jsonReader: { repeatitems : true, cell:"", id: "0" }
public class jqGridTable {
    public int total { get; set; }          // total number of pages
    public int page { get; set; }           // current zero based page number
    public int records { get; set; }        // total number of records
    public List<List<string>> rows { get; set; }// first element in every row must be id of row.
}

(you can read more about this kind of data transfer on http://www.trirand.com/blog/jqgrid/jqgrid.html if you choose on the left tree part "Data Mapping" and then "Data Optimization")

P.S.: About jsonReader you can read more on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data. One my old answer Mapping JSON data in JQGrid can be also interesting for you.

UPDATED 2: Because you don't mark the answer as accepted, you stay have some problems. So I created a new Project in Visual Studio 2010 which demonstrate what I written. You can download the source from http://www.ok-soft-gmbh.com/jqGrid/jQueryMVC.zip. Compare with your project, especially the part with full url as a parameter of jqGrid and a part of web.config which describes WCF service interface.

UPDATED 3: I use VS2010 not so long time. So I could very quickly downgrade this to VS2008. So almost the same code working working in Visual Studio 2008, but with ASP.NET MVC 2.0 you can download from http://www.ok-soft-gmbh.com/jqGrid/VS2008jQueryMVC.zip. The code in ASP.NET MVC 1.0 should be the same, but a GUID from the project file and some strings from Web.config should be patched (see http://www.asp.net/learn/whitepapers/aspnet-mvc2-upgrade-notes).

这篇关于带有 ASP.NET MVC 的 jquery - 调用启用了 ajax 的 Web 服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！