本节教你如何使用JQuery显示MVC数据。在这之前了解了解Json(张森)。前台代码
<
%@ Page
Title
="" Language="C#"
MasterPageFile
="~/Views/Shared/Site.Master"
Inherits
="System.Web.Mvc.ViewPage" %
>
< asp:Content ID ="Content1" ContentPlaceHolderID ="TitleContent" runat ="server" >
GridData
</asp:Content>
< asp:Content ID ="Content3" runat ="server" ContentPlaceHolderID ="HeadContent" >
<link rel="stylesheet" type="text/css" href="../../Scripts/Themes/steel/grid.css"
title="green" media="screen" />
< script src ="../../Scripts/jquery-1.3.2.js" type ="text/javascript" > </script>
< script src ="../../Scripts/js/min/grid.locale-en-min.js" type ="text/javascript" > </script>
< script src ="../../Scripts/jquery.jqGrid.js" type ="text/javascript" > </script>
< script type ="text/javascript" src ="../../Scripts/JS1/Common.js" > </script>
< script type ="text/javascript" >
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/Movie/GridData',
datatype: 'json',
colNames: ['电影编号', '电影名称', '播放时间'],
colModel: [
{ name: 'Id', index: 'Id', width: 100, align: 'left', sorttype: "int" },
{ name: 'Movie_Name', index: 'Movie_Name', width: 100, align: 'left' },
{ name: 'Realease_Date', index: 'Realease_Date', width: 100, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [1, 2, 3],
//autowidth: true,
width: '500',
sortname: 'Id',
sortorder: 'desc',
viewrecords: true,
imgpath: '../../Scripts/themes/coffee/images',
caption: '电影信息'
});
});
</script>
</asp:Content>
< asp:Content ID ="Content2" ContentPlaceHolderID ="MainContent" runat ="server" >
< table id ="list" class ="scroll" cellpadding ="0" cellspacing ="0" >
</table>
< div id ="pager" class ="scroll" style ="text-align: center;" >
</div>
< %: Html.ActionLink("跳转到主界面","Index") % >
</asp:Content>
< asp:Content ID ="Content1" ContentPlaceHolderID ="TitleContent" runat ="server" >
GridData
</asp:Content>
< asp:Content ID ="Content3" runat ="server" ContentPlaceHolderID ="HeadContent" >
<link rel="stylesheet" type="text/css" href="../../Scripts/Themes/steel/grid.css"
title="green" media="screen" />
< script src ="../../Scripts/jquery-1.3.2.js" type ="text/javascript" > </script>
< script src ="../../Scripts/js/min/grid.locale-en-min.js" type ="text/javascript" > </script>
< script src ="../../Scripts/jquery.jqGrid.js" type ="text/javascript" > </script>
< script type ="text/javascript" src ="../../Scripts/JS1/Common.js" > </script>
< script type ="text/javascript" >
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/Movie/GridData',
datatype: 'json',
colNames: ['电影编号', '电影名称', '播放时间'],
colModel: [
{ name: 'Id', index: 'Id', width: 100, align: 'left', sorttype: "int" },
{ name: 'Movie_Name', index: 'Movie_Name', width: 100, align: 'left' },
{ name: 'Realease_Date', index: 'Realease_Date', width: 100, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [1, 2, 3],
//autowidth: true,
width: '500',
sortname: 'Id',
sortorder: 'desc',
viewrecords: true,
imgpath: '../../Scripts/themes/coffee/images',
caption: '电影信息'
});
});
</script>
</asp:Content>
< asp:Content ID ="Content2" ContentPlaceHolderID ="MainContent" runat ="server" >
< table id ="list" class ="scroll" cellpadding ="0" cellspacing ="0" >
</table>
< div id ="pager" class ="scroll" style ="text-align: center;" >
</div>
< %: Html.ActionLink("跳转到主界面","Index") % >
</asp:Content>
这个页面通过向action请求数据,action返回Json格式数据,由Jqgrid显示数据。
action代码:
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
返回的数据格式一定要和前台Json格式一致运行效果如下
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
本文转自 BruceAndLee 51CTO博客,原文链接:http://blog.51cto.com/leelei/323153,如需转载请自行联系原作者