学习ASP.NET MVC(三)——我的第一个ASP.NET MVC 视图

今天我将对前一篇文章中的示例进行修改，前一篇文章中并没有用到视图，这次将用到视图。对于前一个示例中的helloworldcontroller类进行修改，使用视图模板文件生成html响应给。 

 

一、创建视图文件

 

 

 

上一篇文章中的hellowordcontroller类中的index方法返回了一串硬编码的字符串消息。而这一次，我将新建一个list方法，用来返回一个view对象，如下面的代码所示：

 

 

 

复制代码

public actionresult list()

 

{

 

    return view();

 

}

 

 

复制代码

 

 

首先，创建一个使用razor视图引擎的视图模板文件，razor视图模板文件的扩展名为.cshtml，并提供一种比较优雅的方式使用c＃来创建html输出。razor视图模板减少了编写程序所需要输入的字符数量和敲击键盘的次数，并实现了快速、流畅的编码工作。

 

如何来创建视图呢？在visual studio中为hellowordcontroller.cs的list控制器方法使用一个视图模板来生成一个html的响应给浏览器。

 

控制器方法（也称为动作方法），如上面的list方法，通常返回一个actionresult（或是actionresult的派生类），而不是基本类型，如字符串，整形。 

下面就是添加一个视图方法的具体步骤：

 

1）先将光标置在list方法中，

 

2）单击鼠标右键，visual studio会弹出一个右键菜单，然后在弹出的右键菜单中，用鼠标左键单击“添加视图”菜单。 

 

  

 

其次，visual studio会弹出一个“添加视图”对话框。其中“视图名称”默认为list，其他设置可以修改，本文将保留默认设置，然后点击“添加”按钮： 

 

 

 

 

这样会在mapplication1\views\helloworld文件夹中创建一个list.cshtml文件。 

 

 

 

 

 

下图显示了所创建的list.cshtml文件的内容： 

 

 

 

添加<h2>html标记到以下文件(mvcapplication1\views\helloword\list.cshtml)中。

 

代码如下。

 

复制代码

@{

 

    viewbag.title = "list";

 

}

 

<h2>list</h2>

 

<p>hello from our view template!</p>

复制代码

 

 

第三，在visual studio中按“f5”运行之后，asp.net mvc默认调用的是index方法，而实际需要浏览到helloworld控制器的list方法，（如：https://localhost:xxxx/helloworld/list）。再来看一下控制器中的list方法，只有一行代码return view()。由于我们没有明确指定的视图文件中使用的名称，asp.net mvc默认为使用\views\helloworld\list.cshtml视图文件。 

 

 

程序运行起，效果如上图，看起来还不错。但是，请注意浏览器的标题栏显示“list——我的第一个asp.net mvc应用程序”和在页面顶部的“将你的徽标放置在此处”有些不协调，再进行一些改动。

 

二、修改视图文件和页面布局 

首先，我们要修改在页面顶部的“将你的徽标放置在此处”这个标题。该文本每一页都是相同的，它放在一个共享的视图文件中，这个共享的视图文件又称为布局文件，它是一个公共布局页面，供其他页面使用。在解决方案资源管理器中打开/views/shared文件夹中的“_layout.cshtml”文件。 

 

 

 

布局模板文件允许你在一个地方填写网站的布局代码之后，可以在多个页面中使用。在布局模板文件中找到@ renderbody（）行， renderbody是一个占位符，是用来显示我们所创建特定网页视图。例如，当你在页面中击“关于”链接时，\home\ about.cshtml视图文件就会显示在renderbody位置处。如下图中的红色方框部分就是。

 

 

从“将你的徽标放置在此处”更改布局模板网站标题标题为“我的第一个asp.net mvc 应用程序”。

 

     

 

  <p class="float-left">

 

                    <p class="site-title">@html.actionlink("我的第一个asp.net mvc 应用程序", "index", "home")</p>

 

                </p>

同时修改标题，把标题修改为如下内容：    

 

  <title>@viewbag.title - 我的第一个asp.net mvc 应用程序</title>

 

 

运行该应用程序，并注意浏览器中的标题，它会显示为“我的第一个asp.net mvc 应用程序”。点击页面上的所有链接，你会发现所有页面的标题都是“我的第一个asp.net mvc 应用程序”。这说明，我们只要对布局模板文件进行了修改，那么网站上的所有使用到布局模板的其他页面都会跟着变更。 

 

 

 

现在，让我们改变list 视图的标题。 

打开mvcapplication\views\ helloworld\list.cshtml文件，做以下修改：

 

第一，   对于页面的标题进行修改

 

第二，对页面中的二级标头（<h2>元素）进行修改。注意两种的修改需要有点不同，以便能直观的发现，我们修改的是应用程序的哪一部分。

 

复制代码

@{

 

    viewbag.title = "asp.net mvc 应用程序 list方法";

 

}

 

<h2>我的第一个asp.net mvc 应用程序 的方法 ——list</h2>

 

<p>hello from our view template!</p>

复制代码

 

 

“viewbag.title = "asp.net mvc 应用程序 list方法"”，上面的代码设置list.cshtml视图文件中的viewbag对象的title属性。为什么是viewbag.title属性呢，你可以打开_loyout.cshtml文件看看，你会发现在此文件中的<title>元素中会有viewbag.title。这样就可以方便的使用这种修改viewbag属性的方法，轻松修改视图文件和布局文件中的参数。

运行应用程序并浏览到https://localhost:36878/helloworld/list 。请注意，在浏览器中当前页面的标题，次级标题已经改变。 （如果您浏览器中没有发生变化，可能是由于浏览器缓存了之前的内容。请按ctrl + f5让浏览器强制从服务器加载响应。 ）浏览器页面中显示的标题与我们在list.cshtml文件中设定的viewbag.title属性的内容是一样的。如下图中的红色方框所标示的。

 

 

 

上面的示例当中，我们把所有要显示的数据都是硬编码在视图文件中的。虽然这个mvc应用程序有一个“v” （视图） ，有一个“c” （控制器） ，但是却没有“m” （模型）。

 

 

 

三、从控制器传递数据到视图

 

首先，从信息从控制器到视图说起，控制器类通过接收浏览器传入的url请求，从中检索数据，并最终决定以什么类型的响应发回浏览器，视图负责从一个控制器接收到的数据用于生成和格式化成html响应给浏览器。

控制器负责提供数据或对象给视图模板，让视图模板来根据控制器提供的数据或对象呈现给浏览器。最佳的做法是：一个视图模板不会执行业务逻辑或与数据库直接交互。相反，一个视图模板是否能正确工作是由给它提供数据的控制器所决定的。保持这种“关注点分离”有助于保持代码干净，可测试，更易于维护。

 

 

下面的示例是，在helloworldcontroller类中写了一个welcomname方法，这个方法需要两个参数（name与numtimes），然后经过控制器处理之后直接输出结果到浏览器。不是让该控制器直接硬编码为一个字符串输出，而是使用一个视图模板来代替。该视图模板将生成一个动态的响应，这意味着你需要从控制器传递相应的数据给视图，以生成响应。

 

打开 helloworldcontroller.cs文件并且修改welcomname方法，将numtimes与name值添加到viewbag对象。 viewbag是一个动态对象，这意味着你可以把任何数据类型添加到viewbag里面。在asp.net mvc模型绑定会自动从地址栏中获取方法参数的字符串，并映射命名参数（name和numtimes ） 。

 

 

 

复制代码

        public actionresult welcomename(string name, int numtimes = 1)

        {

 

            viewbag.message = "hello " + name;

            viewbag.numtimes = numtimes;

            return view();

 

        }

复制代码

 

 

上面的代码中把要传递给视图的数据包含在了viewbag对象中了。 

然后，你需要一个welcomename视图模板​​！ 

 

 

 

visual studio会弹出一个“添加视图”对话框。 

 

 

 

然后单击“添加”按钮，visual studio会添加一个新的welcomename.cshtml文件，在此文件的<h2>元素的下方添加以下代码。下面的完整welcomename.cshtml文件如下所示。

 

复制代码

@{

 

    viewbag.title = "这是我的asp.net mvc世界的欢迎welcomename";

 

}

 

 

 

<h2>welcomename</h2>

 

<ul>

 

   @for (int i=0; i < viewbag.numtimes; i++) {

 

      <li>@viewbag.message</li>

 

   }

 

</ul>

复制代码

 

 

1）运行应用程序并使用浏览器浏览以下网址： 

https://localhost:xx/helloworld/welcomename?name=dotnet菜园&numtimes=8

2）url中的数据是先从url中传递给指定的控制器

 

3）指定的控制器将数据打包成一个viewbag对象

 

4）控制器再把打包好的对象传递给视图，然后该视图显示数据给用户看。你会看到八条欢迎信息。

 

 

 

 

关于asp.net mvc中的视图部分，就学习到这里，下次再继续。