ASP.NET MVC5 入门三——添加视图

在上一篇《ASP.NET MVC5 添加控制器》里面我们都是直接返回string 字符串或者html 。这样的话控制器不仅仅做了控制器的工作还做了VIEW(视图)的工作。通常我们不希望控制器直接返回HTML,因为那样子复杂的页面就会非常繁琐,所以我们通常会用一个单独的视图模板文件来辅助生产对应的html响应报文返回客户端。

接下来我们就来看看如何添加视图,先修改上篇博客的那个例子,我们来修改HelloWorldController类,这样才能让view的模板文件来封装要返回的html响应报文。

image

首先,创建一个视图文件夹 HelloWorld 。右键单击(view)——》添加——》新建文件夹。

image

注意名字一定要是 HelloWorld 因为控制器名字是 HelloWorldController 控制器必须是Controller结尾,视图文件夹的名字必须和控制器除了结尾的部分一样。也就是“约定优于配置”的理念。

image

接下来添加一个支架,选择 MVC5 视图—空 不带模型

image

点击添加,弹出的对话框把视图名字(View name)改为 Index 。其他保持默认然后确定。

image

可以看到多了一个 Index.cshtml的文件。在上面的</h2>后面添加如下的html代码:

<p>这是一个View模板,来自于:HelloWorld下面的Index视图!</p>

然后在index.cshtml文件上面右键,选择在页面检查器中查看。当然也可以按下F5进行运行,在浏览器地址栏输入地址进行查看。

image

但浏览器的地址发到服务器的时候,服务器解析给控制器,然后控制器里面只有一句 return View()语句,指定返回一个视图模板文件给浏览器,我们没有写指定什么名字的视图,默认就是Index。

更改视图和布局页面

首先,上一个页面我们需要修改标题,显示我们自己的信息。页面顶部在一个网站之中的每一页一般都是一样的所以我们来修改布局的页面也叫母版页。在解决方案资源管理器里面,打开/views/shared 里面的_Layout.cshtml文件。

image

可以看到,有很多@开头的内容,比如你能在body里面找到 @RenderBody() 这一行。这个什么意思呢?其实说白了就是一个占位符,到时候可以用具体的视图来填补这个信息。好比刚才那个Index.cshtml就是用来填补这里的。下面我们来修改标题,通过这个了解占位符,以及母版页(布局页)的作用。

在_Layout.cshtml 的头部,有个 <title>@ViewBag.Title – My ASP.NET Application</title> 我们修改为<title>@ViewBag.Title – 我的ASP.NET MVC5示例网站</title> 。body 里面的@Html.ActionLink(“Application name”, “Index”, “Home”, null, new { @class = “brand” }) 修改为 @Html.ActionLink(“MVC5示例网站”, “Index”, “Home”, null, new { @class = “brand” })

回到刚才的Index.cshtml ,修改成如下:

image然后按下F5运行看看。可以看到在浏览器顶端的标题是 首页1-我的ASP.NET。。。。 说明<title>@ViewBag.Title – 我的ASP.NET MVC5示例网站</title> 这句代码里面的 @ViewBag.Title 被Index.cshtml 里面对应的ViewBag.Title替换了。同时body里面被index.cshtml的内容填充了。

image

我们去About页面也能看到标题都变化了。这就是母版页的作用,我们能够在布局页面中修改一次,网站上的所有页面都显示新的标题。如果看不到效果的话可以CTRL+F5强制刷新看看。

上一篇的博文直接从M(模型)传HTML回去,这次貌似直接用V(视图),模型倒是没怎么用。接下来我们就创建一个数据库,通过M 模型 传递给 V 视图 来显示相应信息。

将数据从控制器传递到视图

在我们建立数据库和模型之前,简单说下数据从控制器传递到视图。当服务器接收到浏览器一个url的请求,某个控制器的某个方法会来响应这次请求。控制器类就是那个我们写代码来解析浏览器传入的请求、分析业务、从数据检索出数据经过处理后最终决定返回什么样的数据给浏览器。然后视图VIEW就可以获得控制器传入的数据,进行整理封装成HTML返回给浏览器。控制器提供视图返回给浏览器需要的数据或者对象。所以,最好让视图不执行业务逻辑不与数据打交道,需要的数据就从控制器拿。这样才能保证“关注点分离”(SOC)。

回到我们昨天写的另外一个方法 Welcome 它需要2个参数,一个是name一个是ID。代码如下:

image

ViewBage 是个动态的对象,意味着我们可以随时添加需要的属性。再添加之前ViewBag 并没有那个属性。借助于上个博客说的ASP.NET MVC的自动绑定模型,可以直接赋值给刚才动态创建的属性 Message 和 tiems。接下来我们按照之前的步骤在添加一个视图:Welcome 。

image

代码如下:

image

非常的简单,循环输出消息。F5运行在地址栏输入 http://localhost:xxxx/HelloWorld/Welcome/3?name=yjn

image

image

当我们输入上面地址栏的那个地址时候,服务器传递给相应的控制器处理,控制器获得参数,把数据打包成一个ViewBag对象,并将该对象传递给视图,视图获得对象后取到需要的数据,组织好HTML语句然后返回给客户的浏览器。

接下来的教程,将会介绍使用视图模型来将数据从控制器传递到视图。利用视图模型的方法会比一般的方法好(强类型)。

下一步:添加模型     M(model)的一种模型,不是数据库。

发表评论

邮箱地址不会被公开。