第二篇:基于ASP.NET MVC2 创建第一个简单页面

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

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


第二篇:基于ASP.NET MVC2 创建第一个简单页面

 

      在开始之前,我们要删几个东西。因为默认情况下建立一个MVC 项目时里面包含了几个示例页面,我们要做的就是:
      1.
Controllers 文件夹下所有文件删除。
      2.
Views 文件夹下除了Shared 文件夹和Web.config 外的所有文件删除,然后将Shared 文件夹里面的文件删除。
     
完成以上几步后,就可以开始实现第一个页面了。

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

 

C#代码 复制代码
  1. 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.   
  11. 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. }  
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using MVCDemo.Models;
using MVCDemo.Models.Interfaces;
using MVCDemo.Models.Entities;

namespace MVCDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ICategoryService cServ = ServiceBuilder.BuildCategoryService();
            ViewData["Categories"] = cServ.GetAll();
            return View("Index");
        }
    }
}

 

 


     
直观看来,这个类不是很复杂。它首先继承了Controller 类。Controller 类是ASP.NET MVC 框架中提供的一个控制器积累,所有我们自定义的控制器类都要继承此基类。然后这个类中有一个Index 方法,返回值类型是ActionResult
     
这里对其中涉及到的概念简单解释一下。首先,控制器类可以说是ASP.NET MVC 的核心类,因为它将处理一切请求,并处理所有页面转发等表示逻辑,这也是使用了ASP.NET MVC 后与传统ASP.NET 应用最大的差别。在传统模式下,一个用户请求的url 将对应一个aspx 文件,而在ASP.NET MVC 下,一个用户请求对应某个控制器类中的一个方法,而这个方法,就叫做一个Action 。至于如何对应的,则是通过对url 的解析。
     
例如,在传统情况下, http://www.my400800.cn/index.aspx 表示请求网站根目录下的Default.aspx 文件。而现在,url 可能变成了这种样子: http://blog.my400800.cn/北京400电话申请/1 。这个意思就是,请求名叫HomeController 控制器类下的Index 方法。一般地,默认情况下,请求url 的格式为 http://localhost/{ControllerName}/{ActionName } 。其中{ControllerName} 是控制器类名“Controller ”前的部分,{ActionName} 就是方法名。
     
当然,这种映射规则是可以更改的,而且请求Action 时也可以传递参数,但这些都是后话,以后再慢慢讨论。

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

实现视图
      上文说到,当请求 http://localhost/Home/Index 时,HomeControllerIndex 方法会被调用,而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:

 

C#代码 复制代码
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MVCDemo.Views.Home.Index" %>   
  2. <%@ Import Namespace="MVCDemo.Models.Entities" %>   
  3.   
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  5.   
  6. <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><A href="http://www.my400800.cn">400电话</A>   
  14. MVC公告发布系统</h1>   
  15.         <ul>   
  16.             <% foreach (CategoryInfo c in categories)   
  17.                {   
  18.                     %>   
  19.             <li><%= Html.ActionLink(c.Name, "List/" + c.ID, "Announce") %></li>   
  20.             <% } %>   
  21.         </ul>   
  22.     </div>   
  23. </body>   
  24. </html>  
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MVCDemo.Views.Home.Index" %>
<%@ Import Namespace="MVCDemo.Models.Entities" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <% List<CategoryInfo> categories=ViewData["Categories"] as List<CategoryInfo>; %>
    <div>
        <h1>400电话
MVC公告发布系统</h1>
        <ul>
            <% foreach (CategoryInfo c in categories)
               {
                    %>
            <li><%= Html.ActionLink(c.Name, "List/" + c.ID, "Announce") %></li>
            <% } %>
        </ul>
    </div>
</body>
</html>

 

 


     
大约分析一下。刚才说过,Index 这个Action 最后呈现这个aspx 作为视图,而且ViewData 中包含了要给视图传递的数据。在那里,我们将所有公告类别数据放在ViewData["Categories"] 中。这里可以看到,我们将这些数据取出,并用来呈现页面。至于那个Html.Action ,这里先不细说。你只要知道,这个方法可以生成一个链接,其中第一个参数是链接文字,第二个是要链接到的urlAction 名,第三个是要链接到的url 的控制器名。关于这些,我们以后细细讨论。
     
运行这个例子,并将请求url 定位到Home/Index ,就可以看到运行效果。
     
你可能会发现,不需要指定Home/Index ,在输入根目录后就直接呈现了这个页面。其实这是因为在默认的路由配置里,HomeIndex 是默认的控制器名和Action 名。以后我们将会讨论路由问题。

小结
      通过上面的过程,我们第一个ASP.NET MVC 页面已经能呈现出来了。而且不单纯只是一个页面,其中还呈现了业务逻辑组件返回的数据。
     
也许,您对其中许多地方还有困惑。不要着急,在下一篇中,我们做这个系统的步伐先

来自:http://ljl-xyf.iteye.com/blog/

你可能感兴趣的:(.net,mvc,公告,asp.net,asp)