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代码：

public JsonResult GridData(string sidx, string sord, int page, int rows)
                {
                        DataClasses1DataContext dc = new DataClasses1DataContext();
                        int pageIndex = Convert.ToInt32(page) - 1;
                        int pageSize = rows;
                        int totalRecords = dc.Movies.Count();
                        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
                        var orders = dc.Movies.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);
                        var jsonData = new
                        {
                                total = totalPages,
                                page = page,
                                records = totalRecords,
                            
                                rows = (
                                        
                                        from order in orders
                                        select new
                                        {
                                                cell = new[] { order.ID.ToString(), order.Movie_Name.ToString(),    order.Realease_Date.ToString() }
                                        }).ToArray()
                                        
                        };
                        return Json(jsonData,JsonRequestBehavior.AllowGet);
                }

返回的数据格式一定要和前台Json格式一致运行效果如下