上一章中我们创建了控制器HelloWorldController.cs,现在我们根据HelloWorldController来创建视图

在HelloWorldController中重写Index方法

public ActionResult Index()

{

return View();

}

在view()上点击右键选择Add View

出现添加视图对话,运用默认的模板,直接点击Add

视图文件夹下直接出现了Views/HelloWorld/Index.cshtml这个视图文件。

在图示标签<h2>下面添加

<p>Hello from our View Template!</p>

是html代码变为

@{ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

注意:在IE9运行你有可能会看不到<p>Hello from our View Template!</p>这句话,你需要打开兼容模式

如果IDE用的是VS2012,可以右键点击index.cshtml然后选择View in Page Inspector如图:

或者运行程序,浏览http://localhost:xxxx/HelloWorldIndex事件直接return View()返回给视图。

修改视图和模板页面

可以看到index.cshtml中只有

<h2>Index</h2>

<p>Hello from our View Template!</p>

这些东西从何而来呢

就像asp.net中的masterpage一样,这里MVC有在/Views/Shared文件夹下的_Layout.cshtml完成累死的工作

在layout中@RenderBody()是一个占位符,类似Index.cshtml就是通过@RenderBody()插入到HTML里。

在site-title里修改Your Logo Here

<div class="float-left"><p class="site-title">@Html.ActionLink("Hello World", "Index", "Home")</p>
</div>

然后在title也做对应修改

<title>@ViewBag.Title – Hello World</title>

刷新页面将会看到新的页面

我们再回到HelloWorld\Index.cshtml

首先修改窗口的Title

令ViewBag.Title = "Hello World";

然后改变小标题,把index变为Hello World

修改后的代码应该是:

@{

ViewBag.Title = "Hello World";

}

<h2>Hello World</h2>

<p>Hello from our View Template!</p>

修改后的页面如图

从控制器往视图中传递数据

我们发现到目前为止我们都是在页面上写一些死代码,没有和数据库的交互,这是之后模型中要讲到的,现在我们还有一个问题要解决,就是从控制器向视图中传递数据的问题。

这里我们讨论一下控制器如何传递信息给视图。控制器的类在url被接收后会被调用,我们可以在控制器类中写入一些页面的业务逻辑,或者从数据库获取数据,然后视图根据控制器生成HTML代码。最理想的情况是视图中不做任何和业务逻辑或者数据库相关的操作,只做一个单纯的显示。

我们来看到现在HelloWorldController类中的方法

现在的Welcome方法接受参数name和numTimes然后直接打印出一句话”Hello xxx, NumTimes is : xxx”,没有生成相关的视图

现在我们对这段代码进行修改,生成Welcome视图并且使控制器和视图传递Name和NumTimes这两个参数。

首先我们把Welcome方法改为

            public ActionResult Welcome(string name, int numTimes = 1){ViewBag.Message = "Hello " + name;ViewBag.NumTimes = numTimes;

return View();}

我们把Name和numTimes都赋值给ViewBag对象, ViewBag对象是一个dynamic 对象,这意味着我们所有的值都可以赋给它。

之后的操作和生成Index视图一样

添加视图,使用默认的模板

视图添加完成后

修改现有代码

@{

ViewBag.Title = "Welcome";

}

<h2>Welcome</h2>

<p>@ViewBag.Message  @ViewBag.NumTimes</p>

在url输入参数后(url类似于HelloWorld/Welcome?name=terry&numTimes=2)

最终界面将显示为

现在我们只是运用ViewBag对象来进行数据传递,之后我们还将介绍如何使用view model来进行传递。

转载于:https://www.cnblogs.com/terryxym/archive/2012/12/22/2828717.html

Terry的学习笔记--ASP.NET MVC 4 HELLO WORLD添加视图(View)相关推荐

  1. thinkphp学习笔记7—多层MVC

    原文:thinkphp学习笔记7-多层MVC ThinkPHP支持多层设计. 1.模型层Model 使用多层目录结构和命名规范来设计多层的model,例如在项目设计中如果需要区分数据层,逻辑层,服务层 ...

  2. 《Pro ASP.NET MVC 3 Framework》学习笔记之一【MVC的历程,优点,HelloWorld】

    序论:asp.net mvc出现已经有两三年的时间了(2009开始1.0版本),但是这么方面的中文学习资料仍然非常少,特别是asp.net mvc3,几乎就没有中文的学习书籍.在英文的书籍中有两本是非 ...

  3. 【HeadFirst 设计模式学习笔记】13 MVC分析

    作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ 1.M-V-C --Model--View--Controller,模式-视图-控制器,这是一种范型.模型对象正 ...

  4. ASP.NET MVC Display Mode 移动端视图 配置对微信内置浏览器的识别

    最近在捣鼓一个稍微有点low的商城网站,没有计划做app却要求有个wap版,而前端又没有做成响应式,时间WTF,直接利用了asp.net mvc的Display Mode Provider. 使用方式 ...

  5. ASP.NET MVC (一、控制器与视图)

    目录 前言: 1.MVC简介 2.项目创建:(这里使用工具为:Visual Studio 2019) 2.1.文件夹与文件夹介绍: 3.控制器 3.1.添加控制器 3.2.添加视图层 3.3.修改默认 ...

  6. [翻译:ASP.NET MVC 教程]理解模型、视图和控制器

    本篇教程为你提供了ASP.NET MVC的模型.视图和控制器的高级概述.换句话说,即本文向你解释了在ASP.NET MVC中"M"."V"和"C&qu ...

  7. Asp.net MVC中使用Razor Generator实现View的单元测试

    Asp.net MVC 3 应用程序中,单元测试对项目的质量意义重大.除了对Model,Controller进行单元测试,有时还需要对View也进行.对View进行测试目前并不容易做,大多数情况下可能 ...

  8. Sharepoint学习笔记—Ribbon系列-- 2. 在Ribbon中添加新Tab

    有了上面的基础,我们来看看如何向Sharepoint网站的Ribbon中添加我们定义的Tab. 直接进入操作步骤 一.创建 SharePoint 项目 要添加新选项卡,应首先创建一个空白 ShareP ...

  9. 为ASP.NET MVC Client-side Resource Combine 添加中文支持

    以前介绍过ASP.NET MVC Client-side Resource Combine 主要的用途是集中管理js css 和压缩缓存js css 等文件. 但老外写的不支持中文,现在项目中需要用到 ...

最新文章

  1. 我的新浪微博,顺便总结下近况
  2. 【面试题】python怎么合并两个字典
  3. StackExchange.Redis 访问封装类
  4. 函数式编程 -- 纯函数、柯里化函数
  5. 操作系统——进程的状态及转换
  6. uos命令_【持续更新】UOS个人版实用技巧集锦
  7. nginx上传目录配置,禁止执行权限
  8. 图书馆借阅系统java参考文献_基于java的图书馆管理系统
  9. 数据库系统工程师考点
  10. 谷歌livereload插件使用
  11. 计算机科学与技术双一流名单,重磅 | 解读“双一流”名单(附完整名单)
  12. 4.1%的利率,100万贷款,30年还款,我们每月能少还多少房贷呢
  13. freeswitch mrcp 源码分析--数据包的发送
  14. [树形DP]贪吃的九头龙
  15. ./configure, make, sudo make install 的含义
  16. oracle怎么获取到纳秒,macOS C++获取系统时间(纳秒级别)
  17. web项目修改favicon.ico图标
  18. JavaScript自用
  19. 计蒜客习题:骑车比赛
  20. 化学绘图软件ChemFinder怎样连接数据库

热门文章

  1. 什么叫基于web的网站_选择离开家乡在外打工,学门什么专业的技术更有前途呢?-WEB资讯专栏-DMOZ中文网站分类目录...
  2. java雪崩_【并发编程】java 如何解决redis缓存穿透、缓存雪崩(高性能示例代码)...
  3. 分布式系统原理_终于有架构大牛把分布式系统概念讲明白了,竟然用了足足800页...
  4. python解析nginx配置文件_Nginx情景分析之配置文件解析
  5. matplotlib 设置标注方向_Matplotlib绘制带主题及聚类类标的散点图
  6. ionic4 引入外部字体ttf
  7. oracle11g调整表空间和临时表空间大小
  8. Flex+BlazeDS+IntelliJ IDEA整合开发系列一之起步demo
  9. 搜索做成html静态,如何在静态的html里实现搜索功能?
  10. java okhttp设置超时_Java OkHttpClient.setWriteTimeout方法代码示例