博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ASP.NET MVC 5 学习教程:添加视图
阅读量:7052 次
发布时间:2019-06-28

本文共 1713 字,大约阅读时间需要 5 分钟。

原文 

ASP.NET MVC 5 学习教程目录:

在本节内容中,我们将修改HelloWorldController类,使用视图模板来干净利索的封装生成HTML响应客户端的过程。

我们将使用Razor视图引擎创建一个视图模板文件。Razor-based 视图模板文件以.cshtml结尾,提供一种优雅的方式使用C#创建HTML输出。Razor可以使编写模板文件的字符数和按键数降到最低,并可以快速的、流畅的编码。

目前控制器类中的Index方法通过硬编码返回一个字符串消息。修改Index方法使其返回一个View对象,代码如下:

代码清单1:Index方法 - HelloWorldController.cs

public ActionResult Index(){    return View();}

代码清单1中的Index方法使用一个视图模板生成HTML返回给浏览器,控制器方法(也叫做action methods),像Index方法一样,通常返回一个ActionResult(或继承自ActionResult),而不是像字符串一样的原始类型。

首先,为HelloWorld控制器创建一个视图文件夹。右键Views,单击“添加”>“新建文件夹”:

图1:新建文件夹菜单

将文件夹命名为 HelloWorld。

在HelloWorld文件夹右键,选择“添加”>“支架”:

图2:添加支架菜单

在新建支架对话框中,单击MVC 5 View - Empty without model,然后点击“添加”按钮。

图3:新建支架对话框

在Add View对话框中,将视图命名为Index,保持其它项都是默认值,然后单击“Add”按钮。

图4:Add View 对话框

文件MvcMovie\Views\HelloWorld\Index.cshtml  已经创建好了。

图5:资源管理器中的Index.cshtml文件

下面显示了被创建好的 Index.cshtml文件:

图6:创建好的Index.cshtml文件

在<h2>标签下面添加下面的HTML代码:

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

完整的MvcMovie\Views\HelloWorld\Index.cshtml 文件代码如下:

代码清单2:完整的Index.cshtml 文件

@{    ViewBag.Title = "Index";}

Index

Hello from our View Template!

在Index.cshtml上右键,选择“在Page Inspector中查看”。

图7:在Page Inspector中查看菜单

更多Page Inspector的内容可以查看。

另外,运行程序,浏览到HelloWorld控制器(http://localhost:xxxx/HelloWorld)。控制器中的Index方法并没有做太多工作,它只是简单的运行了语句 return View(),指定Index方法应该使用一个视图模板文件呈现到浏览器的响应。因为你没有明确指定要使用的视图模板文件的名称,ASP.NET MVC 默认使用\Views\HelloWorld 文件夹下的Index.cshtml文件。下面图片中显示的“Hello from our View Template!”硬编码在视图中。

图8:浏览器中查看HelloWorld视图

看起来还不错。但是,注意浏览器标题栏显示的“Index - My ASP.NET Ap”和在页面顶部的大个儿的“Application name”链接。根据你窗口大小不同,你可能会看到右上角的三条杠,点击后会看到 Home、About、Contact、Register和Log in 链接。

本文转自,原文地址:

   

如果认为此文对您有帮助,别忘了支持一下哦!

作者:
来源:
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。
你可能感兴趣的文章
下载Android源码出现的问题
查看>>
远程桌面如何复制本地文件 远程桌面拷贝电脑上的文件方法
查看>>
[转]解决JS浮点数(小数)计算加减乘除的BUG
查看>>
ASP.NET MVC应用程序的安全性介绍总括(高级编程)
查看>>
记录下,我们平时开发当中不得不知道的HTTP状态码
查看>>
HDU-1045 Fire NetFire Net 最大团
查看>>
Eclipse自动部署项目到Tomcat的webapps下的有效方法
查看>>
Extjs4快速上手三——实现主界面
查看>>
如何替代Flex?
查看>>
控制属性修改时间,控制时间,联合主键
查看>>
android-包签名
查看>>
Android开发和调试必备工具-SDK Tools
查看>>
《微软的软件测试之道》读书笔记 之 结构测试技术
查看>>
ASP.NET中Session的个人浅谈
查看>>
ORACLE里锁有以下几种模式,v$locked_object,locked_mode
查看>>
【树莓派】Linux 测网速及树莓派源
查看>>
Java用户线程和守护线程
查看>>
[TypeScript] Use the never type to avoid code with dead ends using TypeScript
查看>>
Javascript 与 SPA单页Web富应用
查看>>
SpringMVC之访问静态文件
查看>>