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

简介: 原文: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 下一节:ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework 源码下载:点我下载 View(视图)用来显示被controller处理好的数据。
原文: 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

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

源码下载:点我下载

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中都显示出来了。

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

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

目录
相关文章
|
2月前
|
XML 前端开发 应用服务中间件
Cannot resolve MVC View解决方案
Cannot resolve MVC View解决方案
77 0
Cannot resolve MVC View解决方案
|
2月前
|
前端开发
.net core mvc获取IP地址和IP所在地(其实是百度的)
.net core mvc获取IP地址和IP所在地(其实是百度的)
88 0
|
2月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
23 0
|
2月前
|
前端开发 JavaScript Java
springboot 出现 Cannot resolve MVC View ‘index‘ 问题解决办法,前后端不分离项目前端文件存放位置,已经如何访问
springboot 出现 Cannot resolve MVC View ‘index‘ 问题解决办法,前后端不分离项目前端文件存放位置,已经如何访问
28 0
|
4月前
|
开发框架 自然语言处理 前端开发
基于ASP.NET MVC开发的、开源的个人博客系统
基于ASP.NET MVC开发的、开源的个人博客系统
44 0
|
7月前
|
SQL 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(完:内附源码)
经过一段时间的准备,【ASP.NET Core MVC开发实战之商城系统】已经完成,目前代码已开发完成,先将全部内容整理分享,如有不足之处,还请指正。
92 0
|
7月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(六)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情,购物车等功能的开发,今天继续讲解订单管理功能开发,仅供学习分享使用,如有不足之处,还请指正。
193 0
|
7月前
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
95 0
|
8月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
60 0
|
8月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
99 0

相关产品

  • 云迁移中心
  • 相关实验场景

    更多