zoukankan      html  css  js  c++  java
  • MVC系列-4.布局页

    分部视图和布局页的使用

    1.创建分部视图

    1)右击“~/Views/Shared”文件夹,选择添加->视图。

    wpsF8D3.tmp

    输入View 名称”Footer”,选择复选框“Create as a partial view”,点击添加按钮。

    注意:View中的Shared 共享文件夹是为每个控制器都可用的文件夹,不是某个特定的控制器所属。

    2)打开Footer.cshtml,输入以下HTML 代码。

    <div >

    <nav class="navbar navbar-default">

    <ul class="nav navbar-nav navbar-right">

    <li><a href="#">版权所有@cheng</a></li>

    </ul>

    </nav>

    </div>

    3)打开Login.cshtml 文件,在表单DIV 标签后显示Footer 分部View,如下:

    wpsF8E4.tmp

    4)运行

    wpsF8E5.tmp

    2.创建布局页面

    右击views--shared文件夹,选择添加>>MVC5 Layout Page。输入名称”MyLayout“,点击确认。自动产生代码。

    <!DOCTYPE html>

    <html>

    <head>

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

    </head>

    <body>

    <div>

    @RenderBody()

    </div>

    </body>

    </html>

    3. 设计布局页面

    在布局页面添加页眉,页脚和内容,内容,三部分,如下:

    打开http://v3.bootcss.com/components/#nav ,拷贝并根据需要改造导航条

    wpsF8F6.tmp

    如上所示,布局页面包含三部分,TitleSection, HeaderSection 和 ContentBody,内容页面将使用这些部分来定义合适的内容。

    4.改造设计Index 的View

    在Body标签中复制保留的内容,并存放在某个地方。

    复制Title标签中的内容

    移除View中所有的HTML 内容,确保只移动了HTML,@model 且没有移动layout语句

    在复制的内容中定义TitleSection和 Contentbody

    wpsF906.tmp

    5.运行index

    wpsF907.tmp

    6.用上述方法改造注册页面Register.cshtml

    wpsF918.tmp

    7.AccountController里新建一个action命名为Detail

    wpsF919.tmp

    8.利用我们新建的布局页为Detail添加view

    wpsF92A.tmp

    自动生成代码:

    wpsF92B.tmp

    9.仿照index改造detail

    wpsF92C.tmp

    运行效果如下

    wpsF93D.tmp

  • 相关阅读:
    英语影视台词---三、Cinema Paradiso
    英语影视台词---二、Inception
    智课雅思短语---二、exert positive/ negative effects on…
    MVC 编程模型及其变种
    四:redis的sets类型
    HDU 2048 号码塔(DP)
    删除句子UITableView额外的底线和切割线
    css+html菜单适应性学习的宽度
    删RAC中间ASM和LISTENER 资源的正确方法
    联合县城市,采用ajax,而使用ul模拟select下拉
  • 原文地址:https://www.cnblogs.com/lingr/p/5563447.html
Copyright © 2011-2022 走看看