zoukankan      html  css  js  c++  java
  • 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>代码块下面引用的话,没有作用。今天被这个问题坑了一会。。
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    android视频录制
    UIWebView 缓存
    (Detected problems with API compatibility(visit g.co/dev/appcompat for more info)
    二、为什么要安装jdk?
    一、java为什么叫java?
    jstl标签
    J2EE(八)——myeclipse开发servlet
    J2EE(七)——myeclipse开发servlet
    J2EE(六)——servlet生命周期
    J2EE(五)——servlet初识
  • 原文地址:https://www.cnblogs.com/lopengye/p/5133304.html
Copyright © 2011-2022 走看看