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


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

相关文章
|
3月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
51 7
|
3月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
82 0
|
4月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
60 0
|
4月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
|
4月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
151 0
|
7月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
87 0
|
7月前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
|
7月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
214 0
|
7月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
365 5
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
176 0