zoukankan      html  css  js  c++  java

  • ASP.NET MVC4 学习笔记-2

    渲染网页-Randering Web Pages

          前面示例的输出结果不是HTML，而是一个“Hello World”的字符串。为了响应浏览器的请求产生一个HTML网页，我们需要创建一个视图（View）。

    创建和渲染一个视图

          我们所要做的第一件事就是要修改Index方法，修改后的代码如下所示：

     1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Mvc;
 6 
 7 namespace PartyInvites.Controllers
 8 {
 9     public class HomeController : Controller
10     {
11         public ViewResult Index()
12         {
13             return View();
14         }
15     }
16 }

         需要修改的地方在上面的代码中已经加粗显示。当我们需要一个方法返回一个ViewResult对象时，我们就要使用MVC为我们渲染一个视图。我们通过调用没有参数的View()方法可以创建一个ViewResult对象。这就告诉MVC为这个方法去渲染一个默认的视图。

         如果我们现在运行程序，我们可以看到MVC框架尝试着查找一个默认的视图进行渲染，下图为运行结果，显示了程序的错误信息：

         这些错误信息是非常有用的，它不仅显示了MVC不能找到方法对应的一个视图，而写还显示了MVC所查找过的文件路径。这又是一个MVC规则的很好证明：视图通过命名的规则和控制器中的方法紧密的关联在一起。我们方法的名字为Index，控制器的名字为Home，从上图中我们可以看出，MVC机制试图在Views的文件夹下面查找不同的文件来查找与Index方法想关联的视图。

         创建一个视图，停止调试，在HomeController.cs文件的Index方法中右击（在函数名或者函数代码的内部右击均可），在弹出菜单中选择“添加视图”。弹出的“添加视图”对话框如下图所示：

         取消“使用布局或母版页”的选择。在这个示例中我们不使用布局，但是在以后的学习中会只用到布局。点击“添加”按钮，我们会看到Visual Studio在View/Home文件夹下创建了一个名字为Index.cshtml的文件。现在看一些前面运行时的错误，我们会发现新创建的这个文件正是MVC所要查找的目标文件。

         提示：格式为.cshtml的文件时C#认为将要被Razor处理的一种视图文件。在MVC的之前版本中被称为ASPX视图引擎，文件的格式为.aspx。

         Visual Studio在创建Index视图文件后自动打开该文件，我们可以进行编辑。我们将会看到该文件包含很多的HTML语言。唯一的例外部分看起来像这样：

    1 @{
2     Layout = null;
3 }

        这样的例外将会被Razor视图引擎所解释，这是一个很好的示例，这只是告诉Razor引擎我们没有使用母版页。现在我们先暂时的忽略Razor的相关知识，在以后的学习中会详细的讲解。在Index.cshtml文件中添加下面代码中加粗的部分：

     1 @{
 2     Layout = null;
 3 }
 4 
 5 <!DOCTYPE html>
 6 
 7 <html>
 8 <head>
 9     <meta name="viewport" content="width=device-width" />
10     <title>Index</title>
11 </head>
12 <body>
13     <div>
14         Hello World (from the view)
15     </div>
16 </body>
17 </html>

        运行程序并且测试我们的视图，运行结果如下图所示：

         在我们第一次编辑Index方法时，在运行结果中我们可以看到它返回的是一个字符串的值，也就是说MVC除了将一个字符串的值传递为浏览器之外没有做任何事情。现在Index方法的返回类型为ViewResult，我们使用MVC框架渲染了一个视图，并且返回的是一个HTML语言的网页。我们没有告诉MVC我们所要使用的视图，它确使用命名机制自动的查找到对应的视图。这种规则为：视图和方法的名字相同，并且视图文件存放在以控制器名字命名的文件夹下，如：~/Views/Home/Index.cshtml。

         在控制器的方法中我们除了可以返回string类型和ViewResult类型外还可以返回一些其他的类型。例如：如果我们返回一个RedirectResult类型，将会导致浏览器重新定向到另外一个URL；如果我们返回一个HttpUnauthorizedResult，则会强制用户登录。这些对象称为执行结果，他们都来自ActionResult类。

    增加动态输出-Adding Dynamic Output

         一个完整的Web应用程序平台是可以创建并且可以动态输出数据的。在MVC中，控制器的作用就是创建或者手机数据并且把这些数据传递到视图中，可以在HTML进行渲染的时候进行展示。

         一种从控制器向视图传递数据的方法时使用Controller基础类中的ViewBag对象。ViewBag是一种动态的数据类型，我们可以根据需要分配它的属性，这些属性可以在随后展现的页面中显示出对应的数据。下面的代码说明如何动态的在控制器和视图之间传递数据：

     1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Mvc;
 6 
 7 namespace PartyInvites.Controllers
 8 {
 9     public class HomeController : Controller
10     {
11         public ViewResult Index()
12         {
13             int hour = DateTime.Now.Hour;
14             ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon";
15             return View();
16         }
17     }
18 }

         在分配ViewBag.Greeting属性时，数据已经传递到对应的视图中。ViewBag只是一个动态对象的例子，它的Greeting属性只有在我们为它赋值后才存在，这使得我们在没有定义类的时候可以自由的将数据从控制器传递到视图中。

         在视图中我们通过再次引用ViewBag.Greeting属性来获取它的值，将Index.cshtml文件中的代码修改为：

     1 @{
 2     Layout = null;
 3 }
 4 
 5 <!DOCTYPE html>
 6 
 7 <html>
 8 <head>
 9     <meta name="viewport" content="width=device-width" />
10     <title>Index</title>
11 </head>
12 <body>
13     <div>
14         @ViewBag.Greeting World (from the view)
15     </div>
16 </body>
17 </html>

         上面代码中添加的内容是一个Razor表达式。当我们在控制器的Index方法中调用View()方法时，MVC框架将定位到Index.cshtml文件并要求Razor视图引擎解析文件的内容。Razor引擎查找到类似于上面我们所添加代码的形式并处理它们——也就是将我们在该视图对应的方法中为ViewBag.Greeting赋的值插入在视图中。

         属性名字Greeting是没有特殊的要求的，我们可以用任意的属性名字来代替它，产生的效果是相同的。我们甚至可以分配多个是属性值来达到从控制器传递多个值到视图的目的。运行程序，查看一下动态MVC输出的效果：

     ---<本节完>---

     

     
  • 相关阅读:
    Consul常用命令
    ECharts 避免变窄
    TP3.2 日期默认格式
    新订单提示效果
    php 按照字典序排序 微信卡券签名算法用到
    td宽度自适应 窄的地方自动收缩
    git 删除本地分支,删除远程分支
    分页Model
    chrome表单自动填充如何取消
    tp3.2 如何比较两个字段
  • 原文地址：https://www.cnblogs.com/zhang-guansheng/p/3431348.html
Copyright © 2011-2022 走看看