为了账号安全,请及时绑定邮箱和手机立即绑定

使用ASP.NET MVC进行jquery-调用启用了Ajax的Web服务

/ 猿问

使用ASP.NET MVC进行jquery-调用启用了Ajax的Web服务

慕码人8056858 2020-02-01 16:18:44

这是一个有点的延续以前的问题。


现在,我试图调用已在ASP.NET MVC应用程序(即MovieService.svc)中定义的启用AJAX的Web服务。但是,从来没有在我的getMoviesjavascript函数中调用该服务。


如果我在非ASP.NET MVC应用程序中尝试该调用AJAX Web服务的相同技术,则可以正常工作,因此它使我怀疑ASP MVC路由在尝试进行AJAX Web服务调用时是否会以某种方式干扰事物。 。


您是否知道为什么没有调用我的Web服务?下面的代码。


    <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

            });

        }


查看完整描述

3 回答

?
明月笑刀无情

您的主要问题是在ajax呼叫中使用的不是绝对URL 。错误的输入web.config也会造成问题。此外,您使用datatype: getMovies代替datatype: 'json'和postData: yourData。datatype存在as函数的方式(请参阅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类的定义。所以我自己定义如下


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; }

}

您应该指出,Microsoft序列化DataTime类型不是可读的日期字符串,而是作为string /Date(utcDate)/,utcDate此数字在哪里(请参阅jQuery.param()-不序列化javascript Date对象吗?)。为了在开始时减少问题,我将其定义ReleaseDate为字符串。


方法IList<Movie> GetMovies()返回JSON数据,就像对象数组一样Movie。因此,jqGrid作为对HTTP GET请求的响应,从MovieService.svc/GetMoviesURL 接收数据,如下所示:


 [{"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")%>',

    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 });

备注:我从示例中删除了任何排序参数,因为在请求JSON数据的情况下,排序参数将仅发送到服务器(某些附加参数附加在服务器URL上),并且服务器必须返回已排序的数据。欲了解更多信息,请参阅的说明prmNames对参数http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options和描述sopt的参数http://www.trirand.com/jqgridwiki/doku.php? id = wiki:singe_searching。


关于datatype: 'json' 我们定义dataType: 'json'参数jQuery.ajax(不要混淆datatype参数内部的大小写)。colModel我们内部所有字段的名称 定义与JSON对象内部的字段名称完全相同。一些额外的参数viewrecords,rownumbers,sortable和headertitles在这个例子中不是很重要,我选用那里,因为1)我喜欢那里,2)我将rowNum: 0做出可能的选项rownumbers: true工作正确的,而不是告诉我们开始-5负的行号,如果rowNum: 5喜欢你原始的例子。


通过ajaxGridOptions: { contentType: "application/json" } 我们定义其他参数,这些参数将直接转发给jQuery.ajax。


此示例最复杂的部分是


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

它定义所有行的id都具有名称“ Id”(请参阅的定义class Movie)。“ repeatitems: false”表示我们要通过字段名称(在中定义colModel)而不是每个位置的默认定义来标识每个数据字段。的定义root是有点怪,但它定义了如何找到根的行 JSON数据内。以下是JSON数据的默认格式


{

  total: "xxx", 

  page: "yyy", 

  records: "zzz",

  rows : [

    {id:"1", cell:["cell11", "cell12", "cell13"]},

    {id:"2", cell:["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。因此,我们无法进行数据分页。您可以jsonReader使用定义的函数page(total以及records(也作为函数))扩展


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; }

}

这将完成我们的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}")]

public jqGridTable jqGridGetMovies(

  int page, int rows, string sortIndex, string sortDirection,

  string _search, string searchField, string searchString,

  string searchOper, string filters)

哪里 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; }

}

或者,如果我们要使用从服务器到客户端的最紧凑形式的数据传输,则


// 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.

}

(如果您在左侧树形部分中选择“数据映射”,然后选择“数据优化”,则可以在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下载源。与您的项目进行比较,尤其是将具有完整url的部分作为jqGrid的参数以及将web.config的一部分描述为WCF服务接口的部分。


更新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-升级说明)。


查看完整回答
反对 2020-02-01
?
萧十郎

这是因为在global.asax中注册的路由将无法识别此.svc文件。它将尝试使用动作getmovies搜索该控制器,并且将失败。尝试使用Firebug进行调试。您可以通过在global.asax中忽略此路由来解决此问题


查看完整回答
反对 2020-02-01
?
尚方宝剑之说

当我正在使用jqgrid / asp.net mvc和一个宁静的服务并有一段时间的bug时,您是否有您正在谈论的示例。就像我在墙上一样,看到一个例子会有所帮助。谢谢

查看完整回答
反对 2020-02-01

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信