欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-14 10:17:36
今天我将对前一篇文章中的示例进行修改,前一篇文章中并没有用到视图,这次将用到视图。对于前一个示例中的helloworldcontroller类进行修改,使用视图模板文件生成html响应给。 ...
今天我将对前一篇文章中的示例进行修改,前一篇文章中并没有用到视图,这次将用到视图。对于前一个示例中的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,其他设置可以修改,本文将保留默认设置,然后点击“添加”按钮: 

 

 

 

 

这样会在mapplication1\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方法,(如:https://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 应用程序”。

 

     

 

  <p class="float-left">

 

                    <p class="site-title">@html.actionlink("我的第一个asp.net mvc 应用程序", "index", "home")</p>

 

                </p>

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

 

  <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>

复制代码

 

 

“viewbag.title = "asp.net mvc 应用程序 list方法"”,上面的代码设置list.cshtml视图文件中的viewbag对象的title属性。为什么是viewbag.title属性呢,你可以打开_loyout.cshtml文件看看,你会发现在此文件中的<title>元素中会有viewbag.title。这样就可以方便的使用这种修改viewbag属性的方法,轻松修改视图文件和布局文件中的参数。

运行应用程序并浏览到https://localhost:36878/helloworld/list 。请注意,在浏览器中当前页面的标题,次级标题已经改变。 (如果您浏览器中没有发生变化,可能是由于浏览器缓存了之前的内容。请按ctrl + f5让浏览器强制从服务器加载响应。 )浏览器页面中显示的标题与我们在list.cshtml文件中设定的viewbag.title属性的内容是一样的。如下图中的红色方框所标示的。

 

 

 

上面的示例当中,我们把所有要显示的数据都是硬编码在视图文件中的。虽然这个mvc应用程序有一个“v” (视图) ,有一个“c” (控制器) ,但是却没有“m” (模型)。

 

 

 

三、从控制器传递数据到视图

 

首先,从信息从控制器到视图说起,控制器类通过接收浏览器传入的url请求,从中检索数据,并最终决定以什么类型的响应发回浏览器,视图负责从一个控制器接收到的数据用于生成和格式化成html响应给浏览器。

控制器负责提供数据或对象给视图模板,让视图模板来根据控制器提供的数据或对象呈现给浏览器。最佳的做法是:一个视图模板不会执行业务逻辑或与数据库直接交互。相反,一个视图模板是否能正确工作是由给它提供数据的控制器所决定的。保持这种“关注点分离”有助于保持代码干净,可测试,更易于维护。

 

 

下面的示例是,在helloworldcontroller类中写了一个welcomname方法,这个方法需要两个参数(name与numtimes),然后经过控制器处理之后直接输出结果到浏览器。不是让该控制器直接硬编码为一个字符串输出,而是使用一个视图模板来代替。该视图模板将生成一个动态的响应,这意味着你需要从控制器传递相应的数据给视图,以生成响应。

 

打开 helloworldcontroller.cs文件并且修改welcomname方法,将numtimes与name值添加到viewbag对象。 viewbag是一个动态对象,这意味着你可以把任何数据类型添加到viewbag里面。在asp.net mvc模型绑定会自动从地址栏中获取方法参数的字符串,并映射命名参数(name和numtimes ) 。

 

 

 

复制代码

        public actionresult welcomename(string name, int numtimes = 1)

        {

 

            viewbag.message = "hello " + name;

            viewbag.numtimes = numtimes;

            return view();

 

        }

复制代码

 

 

上面的代码中把要传递给视图的数据包含在了viewbag对象中了。 

然后,你需要一个welcomename视图模板​​! 

 

 

 

visual studio会弹出一个“添加视图”对话框。 

 

 

 

然后单击“添加”按钮,visual studio会添加一个新的welcomename.cshtml文件,在此文件的<h2>元素的下方添加以下代码。下面的完整welcomename.cshtml文件如下所示。

 

复制代码

@{

 

    viewbag.title = "这是我的asp.net mvc世界的欢迎welcomename";

 

}

 

 

 

<h2>welcomename</h2>

 

<ul>

 

   @for (int i=0; i < viewbag.numtimes; i++) {

 

      <li>@viewbag.message</li>

 

   }

 

</ul>

复制代码

 

 

1)运行应用程序并使用浏览器浏览以下网址: 

https://localhost:xx/helloworld/welcomename?name=dotnet菜园&numtimes=8

2)url中的数据是先从url中传递给指定的控制器

 

3)指定的控制器将数据打包成一个viewbag对象

 

4)控制器再把打包好的对象传递给视图,然后该视图显示数据给用户看。你会看到八条欢迎信息。

 

 

 

 

关于asp.net mvc中的视图部分,就学习到这里,下次再继续。