目录

系列文章

概述

添加视图

总结

系列文章

[Asp.net MVC]Asp.net MVC5系列——第一个项目

概述

 在这一部分我们添加一个新的控制器HelloWorldController类,以便使用视图来向客户端展示HTML格式的响应结果。

我们将使用Razor视图引擎创建一个视图。Razor视图模板以.cshtml扩展名结尾,它提供了一种简洁的方式来创建HTML输出流。Razor视图大大减少了在书写视图模板文件时所需要输入的字符,提供了一个最快捷,最简便的编码方式。

(注意:之前版本的asp.net mvc,可以选择视图引擎,在Asp.net MVC5中,默认的只有一种方式,也就是会生成.cshtml的文件,这里也就称为Razor视图引擎了。)

 

添加视图

这里,我们在HelloWorldController类的Index方法中添加使用一个视图。在修改前的Index方法中返回一个字符串,我们修改这个方法来使它返回一个视图,代码如下所示。

1     public class HelloWorldController : Controller
2     {
3         //
4         // GET: /HelloWorld/
5         public ActionResult Index()
6         {
7             return View();
8         }
9     }

这段代码表示Index方法使用一个视图模板来在浏览器中生成HTML格式的页面文件。接着,让我们来添加一个Index方法所使用的视图模板。在Index方法中点击鼠标右键,然后点击“添加视图”,将会弹出一个“添加视图”对话框。

[Asp.net MVC]Asp.net MVC5系列——添加视图

版本 ASP.NET mvc3添加视图的方式(该图来源于网络)

[Asp.net MVC]Asp.net MVC5系列——添加视图

ASP.NET MVC5添加视图的方式

[Asp.net MVC]Asp.net MVC5系列——添加视图

在该对话框中,不做任何修改,直接点击添加按钮,观察解决方案资源管理器中,在项目下的Views文件夹下创建了一个HelloWorld文件夹,并且在该文件夹中创建了一个Index.cshtml文件,同时该文件呈打开状态,如图所示。

[Asp.net MVC]Asp.net MVC5系列——添加视图

视图模板文件被创建并呈打开状态

    让我们在 Index.cshtml视图模板文件中追加一些文字,代码如下:

1 @{
2     ViewBag.Title = "Index";
3 }
4 
5 <h2>首页</h2>
6 <p>这是我的第一个视图模版</p>

右键Index.cshtml文件,在浏览器中浏览。如图

[Asp.net MVC]Asp.net MVC5系列——添加视图

(注意:这地方跟之前版本也有区别,之前版本好像是不能直接右键在浏览器中查看的。印象中是,机子上只有一个版本,无法求证了。)

由于在Index方法中并没有做任何事情,只是简单地一行代码—“return View()”,该行代码表示我们使用一个视图模板文件来在浏览器中展示响应结果。因为我们并没有显式指定使用哪个视图模板文件,所以使用了默认的Views文件夹下的HelloWorld文件夹下的Index.cshtml视图模板文件。该视图模板文件中只有简单的两行文字,在浏览器中的显示结果如图所示。

[Asp.net MVC]Asp.net MVC5系列——添加视图

看一下url,发现url直接把完整的路由给拼上去了。右键在浏览器中浏览还是非常方便的,毕竟之前一直在做webform项目,习惯了。

至于为什么显示一个空按钮和Application name,是因为创建视图的时候,默认选择了空的布局页。

布局页代码:

 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 - My ASP.NET Application</title>
 7     <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
 8     <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
 9     <script src="~/Scripts/modernizr-2.6.2.js"></script>
10 </head>
11 <body>
12     <div class="navbar navbar-inverse navbar-fixed-top">
13         <div class="container">
14             <div class="navbar-header">
15                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
16                     <span class="icon-bar"></span>
17                     <span class="icon-bar"></span>
18                     <span class="icon-bar"></span>
19                 </button>
20                 @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
21             </div>
22             <div class="navbar-collapse collapse">
23                 <ul class="nav navbar-nav">
24                 </ul>
25             </div>
26         </div>
27     </div>
28 
29     <div class="container body-content">
30         @RenderBody()
31         <hr />
32         <footer>
33             <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
34         </footer>
35     </div>
36 
37     <script src="~/Scripts/jquery-1.10.2.min.js"></script>
38     <script src="~/Scripts/bootstrap.min.js"></script>
39 </body>
40 </html>
View Code

相关文章: