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>代码块下面引用的话,没有作用。今天被这个问题坑了一会。。
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    基于分布式锁解决定时任务重复问题
    基于Redis的Setnx实现分布式锁
    基于数据库悲观锁的分布式锁
    使用锁解决电商中的超卖
  • 原文地址:https://www.cnblogs.com/lopengye/p/5133304.html
Copyright © 2011-2022 走看看