zoukankan      html  css  js  c++  java
  • 【译】ASP.NET MVC 5 教程

    在本节内容中,我们将修改HelloWorldController类,使用视图模板来干净利索的封装生成HTML响应客户端的过程。

    您将创建一个使用Razor 视图引擎的视图模板文件。.cshtml扩展名的文件都是基于 razor 视图模板文件,Razor 视图引擎将编写视图模板所需的代码降至最低。

    目前的 Index 方法返回一条消息,是在控制器类中直接写入的字符串。更改 Index 方法使其返回一个View对象,如以下代码所示:

    1 public ActionResult Index() 
    2 { 
    3     return View(); 
    4 }

    上面的Index方法使用一个视图模板来生成浏览器所需的 HTML 代码。控制器方法 (也称为操作方法),如上述,Index方法通常返回的 ActionResult(或从 ActionResult 派生的类),但他不像是基元类型的字符串。

    首先,对 HelloWorld 控制器创建一个视图文件夹。右键单击“View”,单击添加,然后单击新建文件夹

    右键单击HelloWorld文件夹并单击添加,然后单击支架

    添加支架对话框中,单击5 视图 MVC-空无模型然后单击添加

    添加视图对话框中,命名视图Index和保留的其他设置的默认值,然后单击添加

    创建的MvcMovieViewsHelloWorldIndex.cshtml文件。

    下面显示所创建的 Index.cshtml 文件:

    添加下面的 html 代码<h2>标记下。

    <p>Hello from our View Template!</p>

    下面是一个完整的MvcMovieViewsHelloWorldIndex.cshtml文件。

    1 @{
    2     ViewBag.Title = "Index";
    3 }
    4 
    5 <h2>Index</h2>
    6 
    7 <p>Hello from our View Template!</p>

    右键单击Index.cshtml文件,然后选择 View in Page Inspector.

    请参见教程页面检查器的详细信息。

    另外,运行程序,浏览到HelloWorld控制器(http://localhost:xxxx/HelloWorld)。控制器中的Index方法并没有做太多工作,它只是简单的运行了语句 return View(),指定Index方法应该使用一个视图模板文件呈现到浏览器的响应。因为你没有明确指定要使用的视图模板文件的名称,ASP.NET MVC 默认使用ViewsHelloWorld 文件夹下的Index.cshtml文件。下面图片中显示的“Hello from our View Template!”硬编码在视图中。

    看起来还不错。但是,注意浏览器标题栏显示的“Index - My ASP.NET Ap”和在页面顶部的大个儿的“Application name”链接。根据你窗口大小不同,你可能会看到右上角的三条杠,点击后会看到 Home、About、Contact、Register和Log in 链接。

    更改视图和布局页面

    首先,你希望改变页面顶部的“Application name”链接,这段文字在每个页面都有,是公用的。尽管它出现在程序中的每个页面,但实际上它只写在一个地方。在解决方案资源管理器中找到 /Views/Shared 文件夹,打开_Layout.cshtml 文件。这个页面叫做布局页,放在所有页面都能用的共享文件夹中。

    布局模板允许你在页面的某个地方指定HTML容器,然后在网站多个页面中应用。找到@RenderBody() 行,RenderBody 是一个占位符,所有你使用了_layout.cshtml文件的视图页面会被显示在这个地方,“包装”在布局页中。例如,如果你选择About链接,视图ViewsHomeAbout.cshtml 将被绘制在 RenderBody  方法中。

    修改布局模板中的ActionLink,将"Application name"改为"MVC Movie"。

     1 <body>
     2     <div class="navbar navbar-inverse navbar-fixed-top">
     3         <div class="navbar-inner">
     4             <div class="container">
     5                 <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
     6                     <span class="icon-bar"></span>
     7                     <span class="icon-bar"></span>
     8                     <span class="icon-bar"></span>
     9                 </button>
    10                 @Html.ActionLink("MVC Movie", "Index", "Home", null, new { @class = "brand" })
    11                 <div class="nav-collapse collapse">
    12                     <ul class="nav">
    13                         <li>@Html.ActionLink("Home", "Index", "Home")</li>
    14                         <li>@Html.ActionLink("About", "About", "Home")</li>
    15                         <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    16                     </ul>
    17                     @Html.Partial("_LoginPartial")
    18                 </div>
    19             </div>
    20         </div>
    21     </div>

    用下面的标签替换title元素的内容:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8" />
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>@ViewBag.Title - Movie App</title>
     7     @Styles.Render("~/Content/css")
     8     @Scripts.Render("~/bundles/modernizr")
     9 
    10 </head>

    运行应用程序,现在已将变成“MVC Movie”了。单击About链接,你会看到这个页面也显示“MVC Movie”。我们仅仅修改了布局模板,就为网站中的所有页面换上了新的标题。

    现在让我们来改变Index视图中的title吧。

    打开MvcMovieViewsHelloWorldIndex.cshtml 。有两个地方需要我们修改:浏览器标题栏中的文本,然后是次要的标题(<h2>元素)。你可以稍微修改一下代码,这样就可以看到哪些代码影响了哪些部分。

    1 @{
    2     ViewBag.Title = "Movie List";
    3 }
    4 
    5 <h2>My Movie List</h2>
    6 
    7 <p>Hello from our View Template!</p>

    为了指明HTML显示的标题,上面的代码中设置了ViewBag对象(在Index.cshtml视图模板中)的Title属性。在布局模板中(ViewsShared\_Layout.cshtml )的<head>节点的<title>标签使用了这个值。

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8" />
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>@ViewBag.Title - Movie App</title>
     7     @Styles.Render("~/Content/css")
     8     @Scripts.Render("~/bundles/modernizr")
     9 
    10 </head>

    使用此ViewBag的方法,你可以轻松地其他参数之间传递您的视图模板和布局文件。

    运行应用程序并浏览到http://localhost:xx/HelloWorld注意这个页面发生的变化:浏览器标题、主标题、此标题都发生了改变(如果你没有看到这些变化,可能是浏览器缓存了之前的内容,在浏览器中按CTRL+F5强制从刷新页面)。浏览器标题使我们在Index.cshtml中传递给布局页的参数,布局页又加上了“- Movie App”部分。通过这个例子你会看到,布局模板提供了一种简单的修改应用程序中全部页面的方式。

    到目前为止,我们用到的少量数据(像上面例子中的“Hello from our View Template!”)都是硬编码的。我们用到了MVC中的“V”(View)和“C”(Controller),但还没用到过“M”(Model)。接下来我们就演练一下如何创建数据库,并通过模型来获取数据。

    将数据从控制器传递到视图

    在讨论数据库和模型之前,让我们先说说容控制器传递数据给视图。控制器类在响应传入的请求时被调用,控制器类是你写代码处理浏览器请求、从数据库中检索数据、并最终决定发送什么类型的响应给浏览器。视图模板被控制器用来生成和格式化HTML响应给浏览器。

    控制器的责任是为视图模板提供必须的数据或对象,用来绘制HTML响应浏览器。一个最佳实践是:视图模板从来不参与业务逻辑,或直接与数据库交互。相反的,视图模板仅与控制器提供的数据一起工作。保持这种“关注点分离(separation of concerns)”有助于保持代码的整洁,可测试性和更容易维护。

    目前,HelloWorldController 类中的 Welcome 方法需要两个参数:name 和 numTimes,然后直接与将值输出给浏览器。让我们修改控制器,使用视图来替换直接相应string字符串。视图模板会生成一个动态响应,这意味着你需要通过控制器传递一些数据用来生成响应。要做到这些,你需要通过在控制器中将数据(参数)放到ViewBag对象中,视图可以访问ViewBag对象。

    回到 HelloWorldController.cs  文件中,修改Welcome方法,在ViewBag对象中添加一个Message和NumTimes值。ViewBag是dynamic 类型的对象,你可以为它添加任何你想要的数据,ViewBag对象在你添加数据之前,不具有任何属性。ASP.NET MVC 模型绑定系统从地址参数中自动映射命名的参数(name 和 numTimes)到方法中。完整的HelloWorldController.cs文件如下:

     1 using System.Web;
     2 using System.Web.Mvc;
     3 
     4 namespace MvcMovie.Controllers
     5 {
     6     public class HelloWorldController : Controller
     7     {
     8         public ActionResult Index()
     9         {
    10             return View();
    11         }
    12 
    13         public ActionResult Welcome(string name, int numTimes = 1)
    14         {
    15             ViewBag.Message = "Hello " + name;
    16             ViewBag.NumTimes = numTimes;
    17 
    18             return View();
    19         }
    20     }
    21 }

    现在ViewBag对象已经包含了数据,它会被自动传递给视图。

    接下来,你需要一个Welcome视图模板。在生成菜单中,选择生成解决方案(或使用快捷键 CTRL+SHIFT+B)确定项目已经编译了。

    ViewsHelloWorld 文件夹右键,选择“添加”>“支架”:

    在添加支架对话框中,选择“MVC 5 View - Empty without model”。

    在Add View对话框中,将视图命名为Welcome

    文件MvcMovieViewsHelloWorldWelcome.cshtml  已经创建好了。

    在文件Welcome.cshtml  的<h2>元素下添加如下的代码,完整的代码如下:

     1 @{
     2     ViewBag.Title = "Welcome";
     3 }
     4 
     5 <h2>Welcome</h2>
     6 
     7 <ul>
     8     @for (int i = 0; i < ViewBag.NumTimes; i++)
     9     {
    10         <li>@ViewBag.Message</li>
    11     }
    12 </ul>

    运行应用程序,在浏览器中查看如下地址:

    http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

    现在数据从URL取出来,通过模型绑定传递给控制器,控制器将数据封装在ViewBag对象中,传递给视图,然后视图将数据以HTML的方式呈现给用户。

    在上面的例子中,我们使用ViewBag对象将数据从控制器传递给视图。在家下来的章节中,我们会使用视图模型来传递数据。使用视图模型传递数据比用ViewBag要好得多。

    这也是模型“M”的一种,但并没有使用数据库。我们接下来要学习的是创建一个数据库,创建一个真正意义的视图模型。

  • 相关阅读:
    JSP(一)
    Servlet(二)
    Servlet(一)
    学而不思则罔,思而不学则殆
    spark运行模式之 ===> Standalone
    spark的运行模式之 ==> 本地运行模式
    Hbase Java API 测试代码
    hive的UDF函数 示例==> 时间格式转换
    自己编写MapReduce实现 Hive 的 join
    进阶程序 ==> 二次排序
  • 原文地址:https://www.cnblogs.com/DoduNet/p/3225640.html
Copyright © 2011-2022 走看看