ASP.NET MVC 5 入门教程 (4) View和ViewBag

文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-view.html

上一节:ASP.NET MVC 5 入门教程 (3) 路由Route

源码下载:点我下载

View(视图)用来显示被controller处理好的数据。本节我们就来看看如何通过controller访问一个View页面,如何从controller向View传值。

打开Controllers文件夹下的FirstController.cs,我们把其中的代码从返回一个字符串改成返回一个View。代码如下:

using System.Web.Mvc;
namespace SlarkInc.Controllers
{
    public class FirstController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

这里表示名为First的Controller的Index Action执行后返回一个View。

FirstController对应的View都在Views文件夹下的First文件夹内。其Index Action对应的View应该是First文件夹内的Index.cshtml文件。因此,我们首先删除掉First文件夹内的文件。然后右键点击First文件夹选择添加->带有布局的 MVC 5视图页。

在弹出的项目名中输入Index,点击确定。

在选择布局页中保持默认并点击确定。

这样,一个View就创建好了,文件名为Index.cshtml。

文件内容如下:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

这段代码表示应用了这个路径下的模板。

右键点击Index.cshtml文件并选择在浏览器中查看。

运行结果如下图所示。注意下图的URL,由前两节控制器、路由以及本节的知识,我们可以总结出这个页面的调用流程:

浏览器通过url:“http://localhost:57231/First/Index”发出请求。由RouteConfig.cs解析路由,匹配规则url: "{controller}/{action}/{id}",得出要访问First Controller下的Index Action。然后Index Action返回一个View,其对应的View是在Views文件夹下的First文件夹里的Index.cshtml文件。此文件又加载"~/Views/Shared/_Layout.cshtml"模板,因此返回如下页面,页面中的内容就是模板的内容。

如果View不接受任何参数,那么这个页面只能是一个静态页面。想要在Controller调用View时向其传递参数,就要用到ViewBag。

ViewBag是一个很神奇的东西,它是一个动态对象。简单点说就是你可以给它添加任何属性,这个属性可以是任何类型。

ViewBag的主要用途就是在Controller里给ViewBag添加属性值,并在View中读取这些值并显示出来。

第一步,我们在FirstController.cs中添加一些数据进ViewBag。这些数据类型各不相同。

using System.Collections.Generic;
using System.Web.Mvc;
namespace SlarkInc.Controllers
{
    public class FirstController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Number = 8;
            ViewBag.Message = "This is index Page";
            ViewBag.Slarks = new List<string> { "Slark1", "Slark2", "Slark3" };
            return View();
        }
    }
}

然后再Index.cshtml中读取这些数据:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<p>Number: @ViewBag.Number</p>
<p>Message: @ViewBag.Message</p>
@{
    foreach (string slark in ViewBag.Slarks){
        <p>@slark</p>
    }
}

从上面代码中可以看到两种不同的代码,一种是带@{}的Razor代码,另一种是HTML代码。在一个cshtml中,Razor包裹的C#代码会在服务器端执行,执行完毕后再把输出的HTML页面返回到客户端。运行结果如下。

可以看到ViewBag传来的值在View中都显示出来了。

下一节我们将介绍Model,敬请期待。

您的推荐和留言是我写作动力,谢谢。

时间: 2024-10-03 22:15:30

ASP.NET MVC 5 入门教程 (4) View和ViewBag的相关文章

ASP.NET MVC 5 入门教程 (3) 路由route

文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-route.html 上一节:ASP.NET MVC 5 入门教程 (2) 控制器Controller 源码下载:点我下载 上一节我们讲了如何创建一个控制器,本节我们来讨论如何通过路由来访问控制器及其Action. 那么问题来了,怎么写url能访问到我想要访问的控制器呢? 要想正确访问路由器,就得知道路由规则.它被写在解决方案的App_Start文件夹下的Ro

ASP.NET MVC 5 入门教程 (2) 控制器Controller

上一节:ASP.NET MVC 5 入门教程 (1) 新建项目 源码下载:点我下载 顾名思义,一个MVC项目是由M-Model-模型.V-View-视图.C-Controller-控制器这三部分组成.关系图如下所示. 先撇开MVC的整体运行机制不谈,我们可以看到用户发起的请求首先会到达控制器Controller. 控制器的定义:控制器是一种类,它可以处理浏览器发来的请求,从模型(Model)中获取数据,然后将处理后的数据通过视图(View)发送给浏览器. 我们首先创建一个Controller.在

ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用

文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html 上一节:ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework 源码下载:点我下载 一.Razor简介 在解决方案资源管理器中查看Views文件夹下的文件,如下图所示. 文件的后缀名都是.cshtml.这是什么文件呢?顾名思义,cshtml = cs + html,就是一个包含C S

ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework

文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html 上一节:ASP.NET MVC 5 入门教程 (4) View和ViewBag 源码下载:点我下载 一.创建Model MVC中的Model是用来给View提供显示数据的对象. 这里我们首先创建一个Model对象. 在解决方案资源管理器中右键点击Models文件夹,选择添加->类.添加一个名为Employee.cs的Model类

[转]ASP.NET MVC 5 学习教程:快速入门

本教程将使用Visual Studio 2013手把手教你构建一个入门的ASP.NET MVC5 Web应用程序.本教程配套的C#源码工程可通过如下网址下载:C#版本源码链接.同时,请查阅 Building the Chapter Downloads 来完成编译源码和配置数据库. 在本教程中的源码工程,您可在Visual Studio中运行MVC 5应用程序.您也可以使Web应用程序部署到一个托管服务提供商上.微软提供免费的网络托管多达10个网站,free Windows Azure trial

ASP.NET MVC 5 入门指南汇总

经过前一段时间的翻译和编辑,我们陆续发出12篇ASP.NET MVC 5的入门文章.其中大部分翻译自ASP.NET MVC 5 官方教程,由于本系列文章言简意赅,篇幅适中,从一个web网站示例开始讲解,全文最终完成了一个管理影片的小系统,非常适合新手入门ASP.NET MVC 5 (新增.删除.查询.更新) ,并由此开始开发工作. 现将12篇文章汇总如下: 1. ASP.NET MVC 5 - 开始MVC 5之旅 2. ASP.NET MVC 5 - 控制器 3. ASP.NET MVC 5 -

【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)

目录 [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策略(MVC5+EF6) [第四篇]ASP.NET MVC快速入门之完整示例(MVC5+EF6) 请关注三石的博客:http://cnblogs.com/sanshi 新建项目 打开VS2015,找到菜单项[文件->新建->项目],打开向导对话框: 注意我们的选择项: 1.     运行平台:.NET FrameWork 4.5 2.     项目模板:ASP.NET W

【第三篇】ASP.NET MVC快速入门之安全策略(MVC5+EF6)

[第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策略(MVC5+EF6) [第四篇]ASP.NET MVC快速入门之完整示例(MVC5+EF6) [番外篇]ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6) 请关注三石的博客:http://cnblogs.com/sanshi 表单身份验证(Forms Authentication

【第二篇】ASP.NET MVC快速入门之数据注解(MVC5+EF6)

目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策略(MVC5+EF6) [第四篇]ASP.NET MVC快速入门之完整示例(MVC5+EF6) [番外篇]ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6) 请关注三石的博客:http://cnblogs.com/sanshi 数据库连接字符串 上一篇文章中,我们使用MVC的