你的位置:首页 > ASP.net教程

[ASP.net教程]ASP.NET MVC学习笔记 第三天


布局:
如果不使用布局页,需要将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>代码块下面引用的话,没有作用。今天被这个问题坑了一会。。