栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

您的主要问题是在

ajax
呼叫中使用的不是绝对URL 。错误的输入
web.config
也会造成问题。此外,您使用
datatype:getMovies
代替
datatype: 'json'
postdata:yourData
datatype
存在as函数的方式(请参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#function),但是由于jqGrid3.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/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")%>',    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内具有这些出色的功能,则应在WebService中定义其他方法,例如

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/413350.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号