学习ASP.NET MVC(三)——我的第一个ASP.NET MVC 视图
一、创建视图文件
上一篇文章中的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中的视图部分,就学习到这里,下次再继续。
推荐阅读
-
ASP.NET MVC 主要的四种过滤器和三种具体实现类
-
ASP.NET MVC3学习心得-----视图和模型
-
关于 ASP.NET MVC 中的视图生成
-
ASP.NET MVC 在控制器中获取某个视图动态的HTML代码
-
学习ASP.NET MVC5框架揭秘笔记-ASP.NET MVC路由(三)
-
转载——Asp.Net MVC+EF+三层架构的完整搭建过程
-
ASP.NET Core MVC基础学习之局部视图(Partial Views)
-
ASP.NET MVC学习之NuGet在VS中的运用浅谈
-
ASP.NET MVC5 高级编程-学习日记-第三章 视图
-
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(9)-TT模板的学习