asp.net MVC2 初探七

本节教你如何使用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>
这个页面通过向action请求数据,action返回Json格式数据,由Jqgrid显示数据。
action代码:
InBlock.gif public JsonResult GridData( string sidx, string sord, int page, int rows)
InBlock.gif                {
InBlock.gif                        DataClasses1DataContext dc = new DataClasses1DataContext();
InBlock.gif                         int pageIndex = Convert.ToInt32(page) - 1;
InBlock.gif                         int pageSize = rows;
InBlock.gif                         int totalRecords = dc.Movies.Count();
InBlock.gif                         int totalPages = ( int)Math.Ceiling(( float)totalRecords / ( float)pageSize);
InBlock.gif                        var orders = dc.Movies.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);
InBlock.gif                        var jsonData = new
InBlock.gif                        {
InBlock.gif                                total = totalPages,
InBlock.gif                                page = page,
InBlock.gif                                records = totalRecords,
InBlock.gif                            
InBlock.gif                                rows = (
InBlock.gif                                        
InBlock.gif                                        from order in orders
InBlock.gif                                        select new
InBlock.gif                                        {
InBlock.gif                                                cell = new[] { order.ID.ToString(), order.Movie_Name.ToString(),    order.Realease_Date.ToString() }
InBlock.gif                                        }).ToArray()
InBlock.gif                                        
InBlock.gif                        };
InBlock.gif                         return Json(jsonData,JsonRequestBehavior.AllowGet);
InBlock.gif                }
返回的数据格式一定要和前台Json格式一致运行效果如下
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值