布局:
如果不使用布局页,需要将Layout属性设置为null。
@{
Layout = null;
}
使用默认布局页:
使用Add View对话框,选择使用布局页(是布局页的名称文本框为空)就会自动创建几个目录和布局页。
_ViewStart.cshtml页面包含全部视图的默认配置。_ViewStart.cshtml:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
布局页包含了所有使用该布局页的页面所共有的HTML内容。基类WebPageBase的RenderBody方法呈现内容页的内容,因而定义了在什么位置放置内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title >@ViewBag.Title - My ASP.NET Application </title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></ script>
</head>
<body>
<script src="~/Scripts/jquery-1.10.2.min.js"></ script>
<script src="~/Scripts/bootstrap.min.js"></ script>
<h1> ASP.NET MVC Sample App</h1 >
<nav>
<ul>
<li>
@Html.ActionLink("Layout Sample", "LayoutSample")
</li>
<li>
@Html.ActionLink("Layout using Sections", "LayoutUsingSections")
</li>
</ul>
</nav>
<div>
@RenderSection("PageNavigation",required: false)//使用分区
</div>
<div>
@RenderBody()
</div>
<footer> Sample code for Profession C#</footer >
</body>
</html>
为动作LayoutSample创建视图(该视图不设置Layout属性,所以会使用默认布局)。设置ViewBag.Title,并在布局的HTML title元素中使用它:
@{
ViewBag.Title = "LayoutSample";
}
<h2> LayoutSample</h2 >
<p>
This content is merged with the layout page.
</p>
显示界面:
使用分区:
除呈现页面主题以及使用ViewBag在布局和视图之间交换数据,还可以使用分区定义把视图内定义的内容放在什么位置。上面使用了一个名为PageNavigation的分区。默认分区必须有,把required参数设置为false,该分区变为可选。
LayoutUsingSections.cshtml:
@{
ViewBag.Title = "LayoutUsingSections";
}
<h2> LayoutUsingSections</h2 >
Main content here
@section PageNavigation
{
<div >Navigation defined from the view</ div>
<ul >
<li> Nav1</li >
<li> Nav2</li >
</ul >
}
如下图:
部分视图:
布局为Web应用程序内的多个页面提供了整体性定义,而部分视图可用于定义视图内的内容。部分视图没有布局。部分视图使用与标准视图相同的基类。
首先是一个模型,它包含EventsAndMenus类定义的独立集合、事件和菜单的属性:
EventsAndMenus.cs文件:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVCtest.Models
{
public class EventsAndMenus
{
private IEnumerable <Event> events = null;
public IEnumerable <Event> Events
{
get
{
return events??(events=new List< Event>()
{
new Event {Id=1,Text="Formula 1 G.P. Abu Dhabi,Yas Marina",Day= new DateTime (2014,10,26)},
new Event {Id=2,Text="Formula 1 G.P. USA, Austin",Day= new DateTime (2014,11,9)},
new Event {Id=3,Text="Formula 1 G.P. Brasil, Sao Paulo",Day= new DateTime (2014,11,30)}
});
}
}
private List <Menu> menus = null;
public IEnumerable <Menu> Menus
{
get {
return menus ?? (menus = new List< Menu>()
{
new Menu {Id=1,Text="Baby Back Barbecue Ribs",Price=16.9,Category= "Main"},
new Menu {Id=2,Text="Chicken and Brown Rice Piaf",Price=12.9,Category= "Main"},
new Menu {Id=3,Text="Chicken Miso Soup with Shiitake Mushrooms",Price=6.9,Category="Soup"}
});
}
}
}
}
使用服务器端代码中的部分视图:
public ActionResult UseAPartialView1()
{
return View(new EventsAndMenus());
}
使用HTML Helper方法Html.Partial可以显示部分视图。Html.Partial返回一个MvcHtmlString。使用Razor语法时,该字符串被写为div元素的内容。Partial方法的第一个参数接收部分视图的名称。使用第二个参数,则Partial允许传递模型。如果没有传递模型,部分视图可以访问与视图相同的模型。这里,视图使用了EventsAndMenus类型的模型,部分视图只是使用了该模型的一部分,所用模型的类型为IEnumerable<Event>
@model MVCtest.Models. EventsAndMenus
@{
ViewBag.Title = "UseAPartialView1";
ViewBag.EventsTitle = "Live Events";
}
<h2> Use A PartialView1</h2 >
<div> This is the main view</div >
<div>
@ Html.Partial("ShowEvents" , Model.Events)
</div>
另一种在视图内呈现部分视图的方式是使用HTML Helper方法Html.RenderPartial,该方法定义为返回void。该方法将部分视图的内容直接写入响应流。这样一来,就可以在Razor代码块中使用RenderPartial了。
从控制器中返回部分视图
PartialView方法把包含事件列表的模型传递给部分视图:
//从控制器中返回部分视图
public ActionResult UseAPartialView2()
{
return View();
}
public ActionResult ShowEvents()
{
ViewBag.EventsTitle = "Live Events";
return PartialView(new EventsAndMenus().Events);
}
视图UseAPartialView2通过调用HTML Helper方法Html.Action来调用控制器。动作名称是ShowEvents,它使用了与视图相同的控制器。在Action方法内部也可以作为方法传递其他控制器和参数:
@model MVCtest.Models. EventsAndMenus
@{
ViewBag.Title = "Use A Partial View2";
}
<h2> UseAPartialView2</h2 >
<div> This is the main view</div >
<div>
@ Html.Action("ShowEvents" )
</div>
在JQuery中调用部分视图
部分视图也可以在客户端代码中直接加载。下面:事件处理程序被链接到按钮的单击事件。在单击事件处理程序内,向服务器发出了请求/ViewsDemo/ShowEvents的一个GET请求。该请求返回一个部分视图,部分视图的结果放到了名为events的div元素内。
@model MVCtest.Models. EventsAndMenus
@{
ViewBag.Title = "UseAPartialView3";
}
<script type="text/javascript">
$(function () {
$( "#getEvents").click(function () {
$( "#events").load("/ViewsDemo/ShowEvents" );
});
});
</script>
<h2> UseAPartialView3</h2 >
<div> This is the main view</div >
<button id="getEvents">Get Events </button>
<div id="events"></ div>
PS:JQuery等js文件的引入,要在页面顶端进行。如果在<script></script>代码块下面引用的话,没有作用。今天被这个问题坑了一会。。
ASP.NET MVC学习笔记 第三天
原文:http://www.cnblogs.com/lopengye/p/5133304.html