ASP.Net MVC开发基础学习笔记(10):分部视图PartialView
前言
本节我们来看分部视图PartialView的用法。首先我们会创建一个简单的静态分部视图。然后向这个视图中传入Model数据,使其变成动态分部视图。接下来介绍使用ChildAction来调用分部视图,这样就可以加入一些对数据的分析处理。最后介绍用ajax无刷新更新分部视图数据以达到更好的用户体验。
简单分部视图
创建一个PartialView,在解决方案资源管理器中右键点击Shared文件夹选择添加->MVC 5 分部页(Razor)。如下图所示:
文件命名为PartialPage.cshtml,写入如下代码:
<h2>This is a partial page.</h2>
这样我们就创建好了一个简单的分部视图,现在我们来创建一个Controller和View来调用它。
在Controllers文件夹下创建PartialViewController.cs并写入如下代码:
- using System.Web.Mvc;
- namespace SlarkInc.Controllers
- {
- public class PartialViewController : Controller
- {
- public ActionResult Index()
- {
- return View();
- }
- }
- }
一个最简单的Controller,就是为了让大家好理解。
右键点击上面的"Index"函数名,选择添加视图。系统会在~\Views\PartialView\文件夹下创建Index.cshtml文件,在这个文件中写入如下代码:
- @{
- Layout = null;
- }
- <h2>Before PartialView</h2>
- <hr />
- @Html.Partial("PartialPage")
- <hr />
- @{
- Html.RenderPartial("PartialPage");
- }
- <hr />
- <h2>After PartialView</h2>
其显示效果如下图所示:
上面代码中第1-3行表示在分部视图中不用加载模板。<hr />是下图所示的分隔线。
从下面显示结果可以看出,PatialPage.cshtml中的内容被显示了两次,这对应两个不同的调用分部视图的函数。第6行Html.Partial函数的作用是返回所调用的PartialView中的内容。其所在的View会负责输出其返回的内容。而第9行的代码则是直接输出所调用的PartialView中的内容。
如果还是不清楚Partial和RenderPartial的关系,可以这样类比:比如我们有一个string叫s,Partial和RenderPartial的关系就相当于s.ToString()和Response.Write(s.ToString())的关系一样。前者是返回内容,后者是输出内容。
带Model的分部视图
前面只是创建了一个静态分部视图,下面我们来把它改造一下来显示Model数据。
修改~\Views\PartialView\Index.cshtml文件,代码如下:
- @{
- Layout = null;
- }
- <h2>Before PartialView</h2>
- <hr />
- @Html.Partial("PartialPage",1)
- <hr />
- @{
- Html.RenderPartial("PartialPage",2);
- }
- <hr />
- <h2>After PartialView</h2>
上面的第6和9行,加入了第二个参数,是一个数字。这个数字就是我们要传给PartialView的Model。
修改~\Views\Shared\PartialView.cshtml文件,内容如下:
@model int
<h2>This is a partial page @Model.</h2>
第1行表示传入的model是int类型。第2行吧这个数字显示出来。
显示结果如下:
使用ChildAction调用分部视图
前面调用PartialView的方式都是通过一个View来调用PartialView。下面我们来介绍通过View调用ChildAction来返回PartialView。
首先在PartialViewController.cs里面写一个ChildAction代码如下:
- [ChildActionOnly]
- public PartialViewResult ChildAction(DateTime time)
- {
- string greetings = string.Empty;
- if(time.Hour > 18)
- {
- greetings = "Good evening. Now is " + time.ToString("HH:mm:ss");
- }
- else if (time.Hour > 12)
- {
- greetings = "Good afternoon. Now is " + time.ToString("HH:mm:ss");
- }
- else
- {
- greetings = "Good morning. Now is " + time.ToString("HH:mm:ss");
- }
- return PartialView("ChildAction",greetings);
- }
第1行,在ChildAction函数的前面写上[ChildActionOnly]表示这个Action只能作为ChildAction使用。
ChildAction返回partialView的好处就是在Action里可以做一些处理和控制。这里第4到16行就是根据获得的时间返回不同的问候语。
第17行返回其对应的PartialView并传入greetings作为Model。
右键点击ChildAction函数名选择创建视图,取名为ChildAction。写入如下代码:
@model string
<h2>@Model</h2>
这个PartialView很简单,就是把传入的Model显示出来。
修改~\Views\PartialView\Index.cshtml文件,代码如下:
- @{
- Layout = null;
- }
- <h2>Before PartialView</h2>
- <hr />
- @Html.Action("ChildAction", new { time = DateTime.Now })
- <hr />
- @{
- Html.RenderAction("ChildAction", new { time = DateTime.Now.AddHours(12) });
- }
- <hr />
- <h2>After PartialView</h2>
如图中黄色所示,调用ChildAction同样有两种方法,Html.Action和Html.RenderAction。它们的区别跟Partial和RenderPartial是一样的。这两个函数的第一个参数是要调用的ChildAction的名字,第二个参数是要传递的参数。参数是用匿名对象的方法创建的Object。
运行结果如下:
ajax无刷新更新分部视图
要通过ajax来调用ChildAction返回PartialView,首先要去掉ChildAction开头写的[ChildActionOnly]。因为这种调用方法不算ChildAction调用。
然后修改~\Views\PartialView\Index.cshtml文件,代码如下:
- @{
- Layout = null;
- }
- <script src="~/Scripts/jquery-1.10.2.js"></script>
- <h2>Before PartialView</h2>
- <hr />
- <div id="header"></div>
- <hr />
- <h2>After PartialView</h2>
- <script>
- setInterval(LoadAction, 1000);
- function LoadAction()
- {
- var time = new Date();
- $.ajax({
- type: "POST",
- url: '@Url.Action("ChildAction", "PartialView")',
- data: { time: time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds()},
- datatype: "json",
- success: function (data) {
- $('#header').html(data);
- },
- error: function (XMLHttpRequest, textStatus, errorThrown) {
- alert(errorThrown);
- }
- });
- }
- </script>
显示的结果如下图所示,问候语和时间会每秒更新并且页面不刷新。
上面代码中15-27行用到了Jquery的ajax方法获取数据。第17行url的值是ChildAction对应的路由。第18行传递的数据是名为time的当前时间。第21行,如果成功获取数据则将数据显示出来。
第11行,通过SetInterval函数每秒调用一次LoadAction函数,更新一次数据。
这样就完成了无刷新更新局部页面数据。
ASP.Net MVC开发基础学习笔记(10):分部视图PartialView相关推荐
- ASP.Net MVC开发基础学习笔记(5):区域、模板页与WebAPI初步
http://blog.jobbole.com/85008/ ASP.Net MVC开发基础学习笔记(5):区域.模板页与WebAPI初步 2015/03/17 · IT技术 · .Net, Asp. ...
- ASP.Net MVC开发基础学习笔记(1):走向MVC模式
原文出处: Edison Chou的博客(@周旭龙EdisonChou) 一.ASP.Net的两种开发模式 1.1 ASP.Net WebForm的开发模式 (1)处理流程 在传统的WebFor ...
- [转]ASP.Net MVC开发基础学习笔记(3):Razor视图引擎、控制器与路由机制学习
[出处]http://www.cnblogs.com/edisonchou/p/3923475.html 关于机制的介绍,讲得不错,觉得可以参考着学习一下 1.1 千呼万唤始出来的MVC3.0 在MV ...
- ASP.Net MVC开发基础学习笔记:三、Razor视图引擎、控制器与路由机制学习
一.天降神器"剃须刀" - Razor视图引擎 1.1 千呼万唤始出来的MVC3.0 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用W ...
- ASP.Net MVC开发基础学习笔记(3):Razor视图引擎、控制器与路由机制学习
一.天降神器"剃须刀" - Razor视图引擎 1.1 千呼万唤始出来的MVC3.0 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用W ...
- ASP.Net MVC开发基础学习笔记:四、校验、AJAX与过滤器
一.校验 - 表单不是你想提想提就能提 1.1 DataAnnotations(数据注解) 位于 System.ComponentModel.DataAnnotations 命名空间中的特性指定对数据 ...
- ASP.Net MVC开发基础学习笔记(4):校验、AJAX与过滤器
原文出处: Edison Chou的博客(@周旭龙EdisonChou) 一.校验 - 表单不是你想提想提就能提 1.1 DataAnnotations(数据注解) 位于 System.Comp ...
- ASP.Net MVC开发基础学习笔记:五、区域、模板页与WebAPI初步
一.区域-麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念-区域(Area). 在项目上右击创建新 ...
- 多人网络游戏服务器开发基础学习笔记 II: 帧同步 | 游戏客户端预测原理分析 | FPS 游戏状态同步
这篇是对书本 网络多人游戏架构与编程 的学习第二篇(第一篇:多人网络游戏服务器开发基础学习笔记 I:基本知识 | 游戏设计模式 | 网游服务器层次结构 | 游戏对象序列化 | 游戏 RPC 框架 | ...
最新文章
- 聚类分析和主成分分析
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- linux目录和文件管理命令
- 04-CoreData Stack技术栈堆手动实现
- Linux——安装之磁盘分区
- Python生态概览(三):图形用户界面开发库、游戏开发库、虚拟现实库、图形艺术库
- linux svn启动失败,linux svn authorization failed错误
- 项目遇到OpenSessionInViewFilter的默认sessionFactoryBeanName的问题
- php laravel 理解,程序员-说一下PHP框架Laravel,如何理解她的思想
- python中 return self的作用
- postgresql客户端远程连接
- matlab时域频域信号特征提取资料整合
- Java获取外网ip地址
- 用python实现闯越顶岗实习签到
- 塔防类游戏 ——简单的角色合并逻辑示例
- 基于javaweb房屋租赁管理系统的设计与实现
- IOS课程期末项目报告
- 算法:求10万以内的质数
- 因果信号的傅里叶变换_信号与系统实验报告3实验3 傅里叶变换及其性质
- 理论计算机科学逻辑博导,清华大学计算机科学与技术系博士生导师简介:应明生...