MVC教程第二篇：第一个页面

摘要

本文首先一步一步完成Demo的第一个页面——首页。然后根据实现过程，说明一下其中用到的与ASP.NET MVC相关的概念与原理。

让第一个页面跑起来

现在，我们来实现公告系统中的第一个页面——首页。它非常简单，只包括所有公告分类的列表，并且每个列表项是一个超链接。其中分类数据是用我们的Mock组件得到的。实现后界面如下：

在开始之前，我们要删几个东西。因为默认情况下建立一个MVC项目时里面包含了几个示例页面，我们要做的就是：

1.将Controllers文件夹下所有文件删除。

2.将Views文件夹下除了Shared文件夹和Web.config外的所有文件删除，然后将Shared文件夹里面的文件删除。

完成以上几步后，就可以开始实现第一个页面了。

实现控制器

在Controllers文件夹下新建一个文件，类型选择“MVC Controller Class”，名字命名为HomeController.cs。这就是一个控制器类。然后我们为它编码，具体代码如下：

HomeController.cs:

using System;
2

using System.Collections.Generic;
3

using System.Linq;
4

using System.Web;
5

using System.Web.Mvc;
6

using System.Web.Mvc.Ajax;
7

using MVCDemo.Models;
8

using MVCDemo.Models.Interfaces;
9

using MVCDemo.Models.Entities;
10

namespace MVCDemo.Controllers
12

{
13

public class HomeController : Controller
14

{
15

public ActionResult Index()
16

{
17

ICategoryService cServ = ServiceBuilder.BuildCategoryService();
18

ViewData["Categories"] = cServ.GetAll();
19

return View("Index");
20

}
21

}
22

}

直观看来，这个类不是很复杂。它首先继承了Controller类。Controller类是ASP.NET MVC框架中提供的一个控制器积累，所有我们自定义的控制器类都要继承此基类。然后这个类中有一个Index方法，返回值类型是ActionResult。

这里对其中涉及到的概念简单解释一下。首先，控制器类可以说是ASP.NET MVC的核心类，因为它将处理一切请求，并处理所有页面转发等表示逻辑，这也是使用了ASP.NET MVC后与传统ASP.NET应用最大的差别。在传统模式下，一个用户请求的url将对应一个aspx文件，而在ASP.NET MVC下，一个用户请求对应某个控制器类中的一个方法，而这个方法，就叫做一个Action。至于如何对应的，则是通过对url的解析。

例如，在传统情况下，http://localhost/Default.aspx表示请求网站根目录下的Default.aspx文件。而现在，url可能变成了这种样子：http://localhost/Home/Index 。这个意思就是，请求名叫HomeController控制器类下的Index方法。一般地，默认情况下，请求url的格式为http://localhost/{ControllerName}/{ActionName }。其中{ControllerName}是控制器类名“Controller”前的部分，{ActionName}就是方法名。

当然，这种映射规则是可以更改的，而且请求Action时也可以传递参数，但这些都是后话，以后再慢慢讨论。

下面再深入Index方法，看看这个Action都做了什么。它首先调用了业务逻辑组件（当然，是Mock的），然后将GetAll返回的公告分类数据赋予ViewData["Category"]，最后调用View()方法返回一个ActionResult。ViewData是什么呢？你可以把他理解成一个关联数组，它保存需要传给视图的数据。而View是Controller类的一个方法，它返回一个ActionResult实例。这样说可能有点抽象，其实直观就是将某个视图（一般就是一个aspx文件）呈现到浏览器中。那么如何知道呈现哪一个视图呢？默认情况下，View方法会到网站的Views文件夹下的与控制器类同名的文件夹下寻找与Action方法同名的视图。例如，HomeController的Index方法就会寻找Views/Home/Index.aspx，如果找不到，就会到Shared下寻找，再找不到就报错了。当然，你也可以给View方法传递一个字符串参数，表示视图名称。

实现视图

上文说到，当请求http://localhost/Home/Index时，HomeController的Index方法会被调用，而Index方法最后要呈现Views/Home/Index.aspx视图，所以，我们要在Views文件夹下建立一个Home文件夹，然后再新建一个Index.aspx视图。如果您使用的是VS2008 SP1，那么建立视图非常方便，只要在Home文件夹下右键单击，选Add--->View，然后指定视图名就可以了。如果不是SP1的，就新建一个Item，类型选择“MVC View Page”。建立好的视图其实就是一个aspx页面，但是其继承了View。这也是一个基类，所有视图需要继承它。

下面给出Index.aspx的代码：

Index.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MVCDemo.Views.Home.Index" %>
2

<%@ Import Namespace="MVCDemo.Models.Entities" %>
3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5

<html xmlns="http://www.w3.org/1999/xhtml" >
7

<head runat="server">
8

<title></title>
9

</head>
10

<body>
11

<% List<CategoryInfo> categories=ViewData["Categories"] as List<CategoryInfo>; %>
12

<div>
13

<h1>MVC公告发布系统</h1>
14

<ul>
15

<% foreach (CategoryInfo c in categories)
16

{
17

%>
18

<li><%= Html.ActionLink(c.Name, "List/" + c.ID, "Announce") %></li>
19

<% } %>
20

</ul>
21

</div>
22

</body>
23

</html>

大约分析一下。刚才说过，Index这个Action最后呈现这个aspx作为视图，而且ViewData中包含了要给视图传递的数据。在那里，我们将所有公告类别数据放在ViewData["Categories"]中。这里可以看到，我们将这些数据取出，并用来呈现页面。至于那个Html.Action，这里先不细说。你只要知道，这个方法可以生成一个链接，其中第一个参数是链接文字，第二个是要链接到的url的Action名，第三个是要链接到的url的控制器名。关于这些，我们以后细细讨论。

运行这个例子，并将请求url定位到Home/Index，就可以看到运行效果。

你可能会发现，不需要指定Home/Index，在输入根目录后就直接呈现了这个页面。其实这是因为在默认的路由配置里，Home和Index是默认的控制器名和Action名。以后我们将会讨论路由问题。

小结

通过上面的过程，我们第一个ASP.NET MVC页面已经能呈现出来了。而且不单纯只是一个页面，其中还呈现了业务逻辑组件返回的数据。

也许，您对其中许多地方还有困惑。不要着急，在下一篇中，我们做这个系统的步伐先缓一缓，我将用一整篇文章，详细介绍一下ASP.NET MVC中许多重要的概念与原理。

MVC教程第二篇：第一个页面相关推荐

Electron系列教程——第二篇：第一个示例
Electron系列教程--第二篇:第一个示例一.楔子在正式开始音乐播放器项目之前,还需要来个简单的案例,以便更好的理解Electron.如果你已经使用过Electron,可以跳过这篇. 本篇将实 ...
EnjoyingSoft之Mule ESB开发教程第二篇：Mule ESB基本概念
目录 1. 使用Anypoint Studio开发 2. Mule ESB Application Structure - Mule ESB应用程序结构 3. Mule ESB Application ...
【2023】Kotlin教程第二篇面向对象与函数式编程第15章数据容器——数组和集合 15.2 集合概述
[2023]Kotlin教程文章目录 [2023]Kotlin教程第二篇面向对象与函数式编程第15章数据容器--数组和集合 15.2 集合概述第二篇面向对象与函数式编程第15章数据容 ...
第二篇第一章概述及第二章生产和储存物品的火灾危险性分类重点在于表格...
2019/1/4 [录播]2018一消精华班-实务-一级消防工程师-环球网校 http://v.edu24ol.com/?type=lesson&id=178923&gid=16157 ...
vue教程1：第一个页面HelloVue快速搭建
环境准备 VSCode开发工具新建第一个页面打开VSCode,点击File -> New File新建了个空白文件,保存为HelloVue.html 然后在刚才新建的页面,先输入感叹号&qu ...
php微信二维码签到墙互动,微久信微信墙2017全新版本教程第二篇：微信签到/扫码3D签到/微信手绘签到...
微久信微信墙这回给大家带来的是全新的微信扫码签到教程: 可以实现多种签到墙效果: 1.普通微信签到:签到墙上显示扫码签到的客户头像和昵称/姓名: 2.微信3D签到:签到头像可以组成文字.LOGO.图形 ...
SpringCloud 教程 | 第二篇: 服务消费者（rest+ribbon）
转载请标明出处: blog.csdn.net/forezp/arti- 本文出自方志朋的博客在上一篇文章,讲了服务的注册和发现.在服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于h ...
DirectX11入门教程——第二篇：DirectX11的基础知识
本系列系作者原创,可随便转发但一定要注明出处刚才明明说尽量不跳章的,为啥一进来就变成第二章,这里首先用几句话说明一下原因:因为第一章我想留给更基础更概念的GPU发展史和管线描述.在此对不起大家了.不 ...
牛客网算法教程-中级篇-第一章
文章目录学习目标: 学习内容: 学习时间: 学习产出: 1.旋转词-模拟 2.旋转矩阵-模拟 3.数轴覆盖-贪心 4.1 完整字符串1(括号字符串的有效性)-栈 4.2 完整字符串2(缺失的括号)- ...

MVC教程第二篇：第一个页面

MVC教程第二篇：第一个页面相关推荐

最新文章

热门文章