mvc（３）——渲染Web界面

「爱情、让人受尽委屈。」 2024-02-18 21:48 18阅读 0赞

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

我们继续以[mvc（1）——新建一个ASP.NET MVC项目][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框架正试图查找要使用的默认视图，并显示如下图所示的错误消息。  
![这里写图片描述][70]

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

### 2、创建视图 ###

在HomeController.“文件的代码编辑窗口中定义Index动作方法的任意地方右击，然后从弹出的菜单中选择”AddView（添加视图）”。  
![这里写图片描述][70 1]  
　　“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>

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

## 补充： ##

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

1.  第一步是通过视图引擎对视图文件进行解释，将视图文件中的代码转换成HTML标记，这一步叫做渲染；
2.  第二步是将渲染后的HTML标记传递给客户端浏览器，这一步是页面的传递；
3.  第三步是浏览器接收到HTML后对其进行处理并呈现为Web页面，这一步才叫做呈现。
    
    　　由此可见，渲染是把页面的非HTML代码（控件、页面代码等）转换成HTML标记，这一步工作是由服务器完成的。而呈现是将HTML显示成Web页面，这一步工作是由浏览器完成的。渲染和呈现是整个页面处理过程的两个不同阶段，更不能把这两步工作混谈为只有“呈现”这一步。

[mvc_1_ASP.NET MVC]: https://blog.csdn.net/aiming66/article/details/81165406
[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/077cbf0fd0ff4bd58e4263c16c7068f9.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fa00d657f47841648a81045b8ceb2d3a.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5001958360fe4ee391e54568df8e4d73.png