开发者社区> 技术小阿哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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格式一致运行效果如下


本文转自 BruceAndLee 51CTO博客,原文链接:http://blog.51cto.com/leelei/323153,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载