mvc（３）——渲染Web界面-蒲公英云

mvc（３）——渲染Web界面

　　在前面的mvc（1）——新建一个ASP.NET MVC项目demo中，我们输出的并不是HTML，而是一个简单的字符串“hello world”，为了产生一个对浏览器请求进行相应的HTML，则需要一个视图（view）。

　　我们继续以mvc（1）——新建一个ASP.NET MVC项目demo为基础进行修改。

1、我们首先修改Index方法中的动作。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Partylnvites.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ViewResult Index()//  需要修改的地方
        {
            return View();//  需要修改的地方
        }
    }
}

　　从修改后端代码中，我们可以看出，当从一个动作方法返回一个ViewResult对象时，便是在指示MVC去渲染一个视图。调用不带参数的View方法，便可以创建这个ViewResult对象。这是在告诉MVC，去渲染该动作的默认视图。

　　如果此时运行该应用程序便可以看到，MVC框架正试图查找要使用的默认视图，并显示如下图所示的错误消息。
这里写图片描述

　　该错误消息是很有帮助的。它不仅解释了MVC未找到该动作方法的视图，还显示出查找了哪些地方。这是MVC约定的另一个很好的例子：视图是通过命名约定与动作方法相关联的。这个动作方法称为”Index”，控制器称为”Home”，从上图可以看出，MVC试图在”Views”文件夹中查找具有这一名称的不同文件。

2、创建视图

　　在HomeController.“文件的代码编辑窗口中定义Index动作方法的任意地方右击，然后从弹出的菜单中选择”AddView（添加视图）”。
这里写图片描述
　　“AddView（添加视图）”对话框中，让你配置待创建视图文件的初始内容。
将”Viewname（视图名）”设置为”Index”（与该视图相关联的动作方法的名称，这是另一个约定），将”Template（模板）”设置为”Empty(withoutmodel)”（空模板无模型），让”Createasapartialview（创建为分部视图）”和”Usealayoutpage（使用布局页）”复选框处于未选状态，然后单击”Add（添加）”按钮，创建这一新的视图文件。

　　随后，VisualStudio将在Views\Home文件夹中创建一个名称为”Index.cshtml”的视图文件。这是MVC框架的另一个约定：视图被放置在Views文件夹中，文件夹的结构是与其关联的控制器名称相对应的。index.cshtml中的代码如下：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
    </div>
</body>
</html>

该文件主要含有HTML语句。不同的是，会看到如下所示的部分。

@{
    Layout = null;
}

　　这是一个将由Razor视图引擎进行解释的表达式，Razor引擎处理视图内容并生成发送给浏览器的HTML。这是一个简单的Razor表达式，它告诉Razor未选用布局，布局类似于发送给浏览器的HTML模板。现在对Index.cshtml文件添加一些内容:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
      hello the view world
    </div>
</body>
</html>

运行代码如下：
这里写图片描述
　　在最初编辑Index动作方法时，它返回的是一个字符串值。这意味着MVC除了把这个字符串值传递给浏览器之外，未做其他事情。现在Index方法返回了一个ViewResult，MVC框架渲染了一个视图并返回了它所产生的HTML,可是代码中并
未告诉MVC应该使用哪一个视图，因此它会运用命名约定自动寻找一个视图。该约定是，视图具有动作方法的名称，并包含在以控制器命名的文件夹之中：Views/Home/Index.cshtml。

补充：

　　现在有很多人都把“渲染”说成“呈现”，其实这种说法是不正确的。
　　Web页面从服务器到浏览器的整个呈现过程实际上分为三步：

第一步是通过视图引擎对视图文件进行解释，将视图文件中的代码转换成HTML标记，这一步叫做渲染；
第二步是将渲染后的HTML标记传递给客户端浏览器，这一步是页面的传递；
第三步是浏览器接收到HTML后对其进行处理并呈现为Web页面，这一步才叫做呈现。

　　由此可见，渲染是把页面的非HTML代码（控件、页面代码等）转换成HTML标记，这一步工作是由服务器完成的。而呈现是将HTML显示成Web页面，这一步工作是由浏览器完成的。渲染和呈现是整个页面处理过程的两个不同阶段，更不能把这两步工作混谈为只有“呈现”这一步。