MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialView
2015-01-19 08:46
651 查看
原文:MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialViewSlark.NET-博客园 /article/5273361.html
系列教程:MVC5 + EF6 + Bootstrap3
上一节:MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据
源码下载:点我下载
简单分部视图
带Model的分部视图
使用ChildAction调用分部视图
ajax无刷新更新分部视图
结尾
文件命名为PartialPage.cshtml,写入如下代码:
这样我们就创建好了一个简单的分部视图,现在我们来创建一个Controller和View来调用它。
在Controllers文件夹下创建PartialViewController.cs并写入如下代码:
一个最简单的Controller,就是为了让大家好理解。
右键点击上面的"Index"函数名,选择添加视图。系统会在~\Views\PartialView\文件夹下创建Index.cshtml文件,在这个文件中写入如下代码:
其显示效果如下图所示:
上面代码中第1-3行表示在分部视图中不用加载模板。<hr />是下图所示的分隔线。
从下面显示结果可以看出,PatialPage.cshtml中的内容被显示了两次,这对应两个不同的调用分部视图的函数。第6行Html.Partial函数的作用是返回所调用的PartialView中的内容。其所在的View会负责输出其返回的内容。而第9行的代码则是直接输出所调用的PartialView中的内容。
如果还是不清楚Partial和RenderPartial的关系,可以这样类比:比如我们有一个string叫s,Partial和RenderPartial的关系就相当于s.ToString()和Response.Write(s.ToString())的关系一样。前者是返回内容,后者是输出内容。
修改~\Views\PartialView\Index.cshtml文件,代码如下:
上面的第6和9行,加入了第二个参数,是一个数字。这个数字就是我们要传给PartialView的Model。
修改~\Views\Shared\PartialView.cshtml文件,内容如下:
第1行表示传入的model是int类型。第2行吧这个数字显示出来。
显示结果如下:
首先在PartialViewController.cs里面写一个ChildAction代码如下:
第1行,在ChildAction函数的前面写上[ChildActionOnly]表示这个Action只能作为ChildAction使用。
ChildAction返回partialView的好处就是在Action里可以做一些处理和控制。这里第4到16行就是根据获得的时间返回不同的问候语。
第17行返回其对应的PartialView并传入greetings作为Model。
右键点击ChildAction函数名选择创建视图,取名为ChildAction。写入如下代码:
这个PartialView很简单,就是把传入的Model显示出来。
修改~\Views\PartialView\Index.cshtml文件,代码如下:
如图中黄色所示,调用ChildAction同样有两种方法,Html.Action和Html.RenderAction。它们的区别跟Partial和RenderPartial是一样的。这两个函数的第一个参数是要调用的ChildAction的名字,第二个参数是要传递的参数。参数是用匿名对象的方法创建的Object。
运行结果如下:
然后修改~\Views\PartialView\Index.cshtml文件,代码如下:
显示的结果如下图所示,问候语和时间会每秒更新并且页面不刷新。
上面代码中15-27行用到了Jquery的ajax方法获取数据。第17行url的值是ChildAction对应的路由。第18行传递的数据是名为time的当前时间。第21行,如果成功获取数据则将数据显示出来。
第11行,通过SetInterval函数每秒调用一次LoadAction函数,更新一次数据。
这样就完成了无刷新更新局部页面数据。
喜欢就推荐下吧!
上一节:MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据
作者:Slark.NET
出处:http://www.cnblogs.com/slark/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如有问题或建议,请多多赐教,非常感谢。
系列教程:MVC5 + EF6 + Bootstrap3
上一节:MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据
源码下载:点我下载
目录
前言简单分部视图
带Model的分部视图
使用ChildAction调用分部视图
ajax无刷新更新分部视图
结尾
前言
本节我们来看分部视图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函数,更新一次数据。
这样就完成了无刷新更新局部页面数据。
结尾
学习技术就好像登山,越往上走就越困难、越吃力。坚持下去,加油!喜欢就推荐下吧!
上一节:MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据
作者:Slark.NET
出处:http://www.cnblogs.com/slark/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如有问题或建议,请多多赐教,非常感谢。
相关文章推荐
- MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialView
- MVC |分部视图 PartialView()
- EF5+MVC4系列(11)在主视图中用Html.RenderPartial调用分部视图(ViewDate传值);在主视图中按钮用ajax调用子action并在子action中使用return PartialView返回分布视图(return view ,return PartialView区别)
- ASP.NET MVC3调用分部视图-PartialView的几种方式(集) 【转】
- ASP.Net MVC开发基础学习笔记(10):分部视图PartialView
- MVC |分部视图 PartialView()
- ASP.NET MVC3调用分部视图-PartialView的几种方式(集)
- MVC学习七:Razor布局之加载分部视图【PartialView】
- EF5+MVC4系列(12) 在主视图中直接用RenderAction调用子Action,并返回视图(Return View)或者分部视图(Return PartialView); 从主Action传值到子Action使用TempData传值;TempData高级用法
- ASP.NET MVC3调用分部视图-PartialView的几种方式(集)
- MVC如何将用户控件(分部视图,RenderPartial,ViewUserControl)内容转换为字符串并输出
- MVC |分部视图 PartialView()
- asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action,得到一个分部视图(PartialView)的HTML,进行渲染
- 关于分部视图(Partial View)
- MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统
- MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上)
- MVC PartialView视图使用心得
- MVC部分视图(Partial View)
- MVC5 + EF6 + Bootstrap3 (12) 新建数据
- MVC5 + EF6 + Bootstrap3 (8) HtmlHelper