Terry的学习笔记--ASP.NET MVC 4 HELLO WORLD添加视图(View)
上一章中我们创建了控制器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/HelloWorld,Index事件直接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)相关推荐
- thinkphp学习笔记7—多层MVC
原文:thinkphp学习笔记7-多层MVC ThinkPHP支持多层设计. 1.模型层Model 使用多层目录结构和命名规范来设计多层的model,例如在项目设计中如果需要区分数据层,逻辑层,服务层 ...
- 《Pro ASP.NET MVC 3 Framework》学习笔记之一【MVC的历程,优点,HelloWorld】
序论:asp.net mvc出现已经有两三年的时间了(2009开始1.0版本),但是这么方面的中文学习资料仍然非常少,特别是asp.net mvc3,几乎就没有中文的学习书籍.在英文的书籍中有两本是非 ...
- 【HeadFirst 设计模式学习笔记】13 MVC分析
作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ 1.M-V-C --Model--View--Controller,模式-视图-控制器,这是一种范型.模型对象正 ...
- ASP.NET MVC Display Mode 移动端视图 配置对微信内置浏览器的识别
最近在捣鼓一个稍微有点low的商城网站,没有计划做app却要求有个wap版,而前端又没有做成响应式,时间WTF,直接利用了asp.net mvc的Display Mode Provider. 使用方式 ...
- ASP.NET MVC (一、控制器与视图)
目录 前言: 1.MVC简介 2.项目创建:(这里使用工具为:Visual Studio 2019) 2.1.文件夹与文件夹介绍: 3.控制器 3.1.添加控制器 3.2.添加视图层 3.3.修改默认 ...
- [翻译:ASP.NET MVC 教程]理解模型、视图和控制器
本篇教程为你提供了ASP.NET MVC的模型.视图和控制器的高级概述.换句话说,即本文向你解释了在ASP.NET MVC中"M"."V"和"C&qu ...
- Asp.net MVC中使用Razor Generator实现View的单元测试
Asp.net MVC 3 应用程序中,单元测试对项目的质量意义重大.除了对Model,Controller进行单元测试,有时还需要对View也进行.对View进行测试目前并不容易做,大多数情况下可能 ...
- Sharepoint学习笔记—Ribbon系列-- 2. 在Ribbon中添加新Tab
有了上面的基础,我们来看看如何向Sharepoint网站的Ribbon中添加我们定义的Tab. 直接进入操作步骤 一.创建 SharePoint 项目 要添加新选项卡,应首先创建一个空白 ShareP ...
- 为ASP.NET MVC Client-side Resource Combine 添加中文支持
以前介绍过ASP.NET MVC Client-side Resource Combine 主要的用途是集中管理js css 和压缩缓存js css 等文件. 但老外写的不支持中文,现在项目中需要用到 ...
最新文章
- 我的新浪微博,顺便总结下近况
- 【面试题】python怎么合并两个字典
- StackExchange.Redis 访问封装类
- 函数式编程 -- 纯函数、柯里化函数
- 操作系统——进程的状态及转换
- uos命令_【持续更新】UOS个人版实用技巧集锦
- nginx上传目录配置,禁止执行权限
- 图书馆借阅系统java参考文献_基于java的图书馆管理系统
- 数据库系统工程师考点
- 谷歌livereload插件使用
- 计算机科学与技术双一流名单,重磅 | 解读“双一流”名单(附完整名单)
- 4.1%的利率,100万贷款,30年还款,我们每月能少还多少房贷呢
- freeswitch mrcp 源码分析--数据包的发送
- [树形DP]贪吃的九头龙
- ./configure, make, sudo make install 的含义
- oracle怎么获取到纳秒,macOS C++获取系统时间(纳秒级别)
- web项目修改favicon.ico图标
- JavaScript自用
- 计蒜客习题:骑车比赛
- 化学绘图软件ChemFinder怎样连接数据库
热门文章
- 什么叫基于web的网站_选择离开家乡在外打工,学门什么专业的技术更有前途呢?-WEB资讯专栏-DMOZ中文网站分类目录...
- java雪崩_【并发编程】java 如何解决redis缓存穿透、缓存雪崩(高性能示例代码)...
- 分布式系统原理_终于有架构大牛把分布式系统概念讲明白了,竟然用了足足800页...
- python解析nginx配置文件_Nginx情景分析之配置文件解析
- matplotlib 设置标注方向_Matplotlib绘制带主题及聚类类标的散点图
- ionic4 引入外部字体ttf
- oracle11g调整表空间和临时表空间大小
- Flex+BlazeDS+IntelliJ IDEA整合开发系列一之起步demo
- 搜索做成html静态,如何在静态的html里实现搜索功能?
- java okhttp设置超时_Java OkHttpClient.setWriteTimeout方法代码示例