当前位置:首页 > 在线留言 >

学习ASP.NET MVC(三)——我的第一个ASP.NET MVC 视图

学习ASP.NET MVC(三)——我的第一个ASP.NET MVC 视图 今天我将对前一篇文章中的示例进行修改,前一篇文章中并没有用到视图,这次将用到视图。对于前一个示例中的HelloWorldController类进行修改,使用视图模板文件生成HTML响应给浏览器。

一、创建视图文件

上一篇文章中的HelloWordController类中的Index方法返回了一串硬编码的字符串消息。而这一次,我将新建一个List方法,用来返回一个View对象,如下面的代码所示:

复制代码

public ActionResult List()

{

return View();

}

复制代码

首先,创建一个使用Razor视图引擎的视图模板文件,Razor视图模板文件的扩展名为.cshtml,并提供一种比较优雅的方式使用C#来创建HTML输出。Razor视图模板减少了编写程序所需要输入的字符数量和敲击键盘的次数,并实现了快速、流畅的编码工作。

如何来创建视图呢?在Visual Studio中为HelloWordController.cs的List控制器方法使用一个视图模板来生成一个HTML的响应给浏览器。

控制器方法(也称为动作方法),如上面的List方法,通常返回一个ActionResult(或是ActionResult的派生类),而不是基本类型,如字符串,整形。

下面就是添加一个视图方法的具体步骤:

1)先将光标置在List方法中,

2)单击鼠标右键,Visual studio会弹出一个右键菜单,然后在弹出的右键菜单中,用鼠标左键单击“添加视图”菜单。

其次,专题系统,Visual Studio会弹出一个“添加视图”对话框。其中“视图名称”默认为List,其他设置可以修改,本文将保留默认设置,然后点击“添加”按钮:

这样会在MvcApplication1\Views\HelloWorld文件夹中创建一个List.cshtml文件。

下图显示了所创建的List.cshtml文件的内容:

添加<H2>HTML标记到以下文件(MvcApplication1\Views\HelloWord\List.cshtml)中。

代码如下。

复制代码

@{

ViewBag.Title = "List";

}

<h2>List</h2>

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

复制代码

第三,在Visual studio中按“F5”运行之后,ASP.NET MVC默认调用的是Index方法,而实际需要浏览到HelloWorld控制器的List方法,(如:http://localhost:xxxx/HelloWorld/List)。再来看一下控制器中的List方法,只有一行代码return View()。由于我们没有明确指定的视图文件中使用的名称,ASP.NET MVC默认为使用\Views\HelloWorld\List.cshtml视图文件。

程序运行起,效果如上图,看起来还不错。但是,请注意浏览器的标题栏显示“List——我的第一个ASP.NET MVC应用程序”和在页面顶部的“将你的徽标放置在此处”有些不协调,再进行一些改动。

二、修改视图文件和页面布局

首先,我们要修改在页面顶部的“将你的徽标放置在此处”这个标题。该文本每一页都是相同的,它放在一个共享的视图文件中,这个共享的视图文件又称为布局文件,它是一个公共布局页面,供其他页面使用。在解决方案资源管理器中打开/Views/Shared文件夹中的“_Layout.cshtml”文件。

布局模板文件允许你在一个地方填写网站的布局代码之后,可以在多个页面中使用。在布局模板文件中找到@ RenderBody()行, RenderBody是一个占位符,是用来显示我们所创建特定网页视图。例如,当你在页面中击“关于”链接时,\Home\ About.cshtml视图文件就会显示在RenderBody位置处。如下图中的红色方框部分就是。

从“将你的徽标放置在此处”更改布局模板网站标题标题为“我的第一个ASP.NET MVC 应用程序”。

<div class="float-left">

<p class="site-title">@Html.ActionLink("我的第一个ASP.NET MVC 应用程序", "Index", "Home")</p>

</div>

同时修改标题,把标题修改为如下内容:

<title>@ViewBag.Title - 我的第一个ASP.NET MVC 应用程序</title>

运行该应用程序,并注意浏览器中的标题,它会显示为“我的第一个ASP.NET MVC 应用程序”。点击页面上的所有链接,你会发现所有页面的标题都是“我的第一个ASP.NET MVC 应用程序”。这说明,我们只要对布局模板文件进行了修改,那么网站上的所有使用到布局模板的其他页面都会跟着变更。

现在,让我们改变List 视图的标题。

打开MvcApplication\Views\ HelloWorld\List.cshtml文件,做以下修改:

第一, 对于页面的标题进行修改

第二,对页面中的二级标头(<h2>元素)进行修改。注意两种的修改需要有点不同,以便能直观的发现,我们修改的是应用程序的哪一部分。

复制代码

@{

ViewBag.Title = "ASP.NET MVC 应用程序 List方法";

}

<h2>我的第一个ASP.NET MVC 应用程序 的方法 ——List</h2>

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

复制代码

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:荆州SEO http://jingzhou.raoyu.net

上一篇:浅谈原创文章在站内与站外之间如何分配效果最佳

下一篇:最后一页