• MVC3学习第五章 排山倒海第一变母版页,模型


    本章学习内容:

    1.了解MVC3中的母版页

    2.模型

     1.了解MVC3中的母版页

    大多数的网站在页面之间有许多共享的内容:导航,页首,页脚,公司的 Logo,样式表等等,实现这些内容的共享我们最常用的方式就是母版页,当然还有用户控件(这在后续会讲到),前文说到过共享内容保存在 /Views/Shared 文件夹中,Razor 引擎默认使用名为 /Views/Shared/ _Layout.cshtml 的布局来自动化管理,也就是说默认的母版页就是 /Views/Shared/ _Layout.cshtml,双击打开此文件代码如下

    <!DOCTYPE html>
    <html>
    <head>
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    </head>
    <body>
        <div class="page">
            <div id="header">
                <div id="title">
                    <h1>我的 MVC 应用程序</h1>
                </div>
                <div id="logindisplay">
                    @Html.Partial("_LogOnPartial")
                </div>
                <div id="menucontainer">
                    <ul id="menu">
                        <li>@Html.ActionLink("主页", "Index", "Home")</li>
                        <li>@Html.ActionLink("关于", "About", "Home")</li>
                    </ul>
                </div>
            </div>
            <div id="main">
                @RenderBody()
            </div>
            <div id="footer">
            </div>
        </div>
    </body>
    </html>

    之前我们在首页看到的内容只有红框内的内容是我们自定义的,诸如“我的MVC应用程序”,“主页”,“关于”等内容都不是我们编写的

    结合 _Layout.cshtml里的代码,我们不难得出结论,这些内容来自于母版页,为了证实我们的猜测,我们改动一下应用程序的标题,

    修改_Layout.cshtml代码如下

    <!DOCTYPE html>
    <html>
    <head>
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    </head>
    <body>
        <div class="page">
            <div id="header">
                <div id="title">
                    <h1>我的商店</h1>
                </div>
                <div id="logindisplay">
                   此处是预留注册登陆处
                </div>
                <div id="menucontainer">
                    <ul id="menu">
                        <li>@Html.ActionLink("主页", "Index", "Home")</li>
                        <li>@Html.ActionLink("关于", "About", "Home")</li>
                    </ul>
                </div>
            </div>
            <div id="main">
                @RenderBody()
            </div>
            <div id="footer">
            </div>
        </div>
    </body>
    </html>

    Ctrl+s保存代码,因为修改的Views,大多情况下我们无需重新编译项目,直接刷新页面

     

    修改的数据已经得到了展现。事实上在MVC3中引用母版页的方式是先建立一个母版页,然后在要引用该母版页的页面头部使用Layout = "~/Views/Shared/MyMaster.cshtml"实现引用

    接下来我们做一展示,首先右键单击Shared文件夹,添加>新建项

    在弹出新建窗口里选择MVC3布局页(此时你或许可以看到其他你熟悉的母版页,当然也是可以使用的,我们在此不做讨论,有兴趣你可以试试看),输入名称为MyMaster,点击确定


     我们的自定义母版页就创建创建成功了,可以看到代码如下

    <!DOCTYPE html>
    
    <html>
    <head>
        <title>@ViewBag.Title</title>
    </head>
    <body>
        <div>
            @RenderBody()
        </div>
    </body>
    </html>

    什么也没有,为了测试效果,我们改动一下这个母版页的内容,代码如下

    <!DOCTYPE html>
    
    <html>
    <head>
        <title>@ViewBag.Title</title>
    </head>
    <body>
    <div>
    这是我的自定义母版页
    </div>
        <div>
            @RenderBody()
        </div>
    </body>
    </html>

    母版页建立好了,我们还需要一个使用此母版页的页面来测试,右键Home下的About.cshtml,删除

    继续右键Home文件夹,添加视图

    视图命名为About,请注意勾选下方使用布局或母版页复选框(默认就是勾选状态),点击下方右侧浏览,弹出母版页选择界面,会自动定位到Shared文件夹,选择MyMaster,点击确定即可

    此时我们已经选择好了我们自定义的母版页,先不要急着点击确定创建完成,请注意选择母版页文件选择框下方的一句话

    如果在Razor_viewstart文件中设置了此选项,则留空。这句话是什么意思呢?先点击添加完成该视图的创建,重新编译项目,运行,点击关于

    运行成功,我们的自定义母版页的内容也得到了展示,此时回过头来看一下使用了自定义母版页页面的About和没有使用默认母版页页面的Index

    About代码如下:

    @{
        ViewBag.Title = "About";
        Layout = "~/Views/Shared/MyMaster.cshtml";
    }
    
    <h2>About</h2>

    Index代码如下:

    @{
        ViewBag.Title = "主页";
    }
    
    <h2>@ViewBag.Message</h2>
    <br />
    项目创建人:@ViewBag.MyName
    <br />
    项目名称:@ViewBag.ProjectName
    <br/>
    测试集合:@(ViewBag.List[0])
    <p>
        若要了解有关 ASP.NET MVC 的更多信息,请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC 网站">http://asp.net/mvc</a>。
    </p>

    前文说到引用母版页的方式应是Layout = "~/Views/Shared/MyMaster.cshtml",很明显Index.cshtml并没有此引用,但是它仍然成功的实现了母版页的嵌套,这就是“如果在Razor_viewstart文件中设置了此选项,则留空”这句话说明的问题了,如果在_ViewStart.cshtml项目中设置了全局的母版页,则不用在选择母版页了,系统会自动引用。打开Views/_ViewStart.cshtml文件,代码如下

    @{
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

    此处已设置好了母版页,到此处关于母版页的使用基本就说完了,应该还有一个关键点要说,在asp.net webform应用程序里我们使用的母版页是用ContentPlaceHolder标签来标明可变域的,无论任何母版页肯定都需要标明哪里是可变域,在Razor布局页中它使用的是@RenderBody()任何出现在网页中的公共内容就加入到 _Layout.cshtml 中,任何来自视图中的内容就会填充到母版页的@RenderBody(),结合上述代码,大家应该也能看出。

    2.模型

    仅仅使用硬编码的 HTML 不能创建令人感兴趣的网站,创建动态网站,我们需要从控制器的 Action 传送信息给视图模板。

    MVC 模式中,术语 Model 表示应用表现的数据,通常,模型对象用来表示数据库中保存在表中的数据,也不一定如此,对于用惯了werform中三层架构的人来说,更通俗一些的理解是Model表示的是BLL甚至DAL的操作,当然还有最基础的“Model”操作。

    控制器的 Action 方法通过返回的 ActionResult 可以传送模型对象给视图。这就允许控制器可以将所有生成回应需要的数据打包,然会传送给视图模板,以便生成适当的 HTML 回应,在 Action 方法中可以很容易理解。

    首先,在一个在线购物商城中用户是最基础的数据之一,我们先来创建用户的模型类,以便在后续进行商品操作时不用再回过头来创找用户。

    右键Models文件夹,添加>类

     

    命名为UserInfo,点击添加,创建成功

    修改该类代码如下

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MyShopTest.Models
    {
        public class UserInfo
        {
            public int Id { get; set; }
            public string UserName { get; set; }
            public string UserPwd { get; set; }
            public string Phone { get; set; }
            public string Email { get; set; }
            private DateTime addTime;
            public DateTime AddTime
            {
                get
                {
                    if (addTime == null)
                    {
                        return DateTime.Now;
                    }
                    return addTime;
                }
                set { addTime = value; }
            }
        }
    }

     在此模型类中与以往我们见到的实体类并没有什么不同,或许有人注意到最后一个AddTime属性和前几个不太一样,之所以要用两种写法,是要告诉大家这两种写法没有什么不同,很明显前者更简练,前者的 { get; set; } C# 的自动属性特性,这使得我们不需要在创建属性的时候,先创建一个成员字段.

  • 相关阅读:
    今日总结
    今日总结
    今日总结
    本周总结
    今日总结
    今日总结
    今日总结
    今日总结
    今日总结
    vue3函数setUp和reactive函数详细讲解
  • 原文地址:https://www.cnblogs.com/hswh/p/3150739.html
Copyright © 2020-2023  润新知