MVC5 网站开发之五 展示层架构

时间:2021-05-21 16:49:33

展示层由Ninesky.Web项目实现,负责网站内容的显示,项目包含MemberControl两个区域。

 

目录

奔跑吧,代码小哥!

MVC5网站开发之一 总体概述

MVC5 网站开发之二 创建项目

MVC5 网站开发之三 数据存储层功能实现

MVC5 网站开发之四 业务逻辑层的架构和基本功能

MVC5 网站开发之五 展示层架构

MVC5 网站开发之六 管理员 1、登录、验证和注销

MVC5 网站开发之六 管理员 2、添加、删除、重置密码、修改密码、列表浏览

MVC5 网站开发之七 用户功能 1、角色的后台管理

 

Member区域实现网站内容的管理,Control区域实现网站系统管理。结构、功能图如下:

MVC5 网站开发之五 展示层架构

 

一、Member区域

1、添加Member区域

MVC5 网站开发之五 展示层架构

Ninesky.Web【右键】-> 添加->区域 。

 

MVC5 网站开发之五 展示层架构

在弹出的添加区域对话框输入区域名称:Member,完成区域添加

2、添加Home控制器

MVC5 网站开发之五 展示层架构

Ninesky.Web->Areas->Member->Controllers【右键】-> 添加->区域 。

 

 

MVC5 网站开发之五 展示层架构

选择 MVC 5 控制器 - 空,点击 添加 按钮。

 

MVC5 网站开发之五 展示层架构

在“添加控制器”对话框中输入 “HomeController”  点击添加按钮。生成代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace Ninesky.Web.Areas.Member.Controllers
{
/// <summary>
/// 主控制器
/// </summary>
public class HomeController : Controller
{
/// <summary>
/// 主页面
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
}
}
}

3、为Index方法添加视图

 

MVC5 网站开发之五 展示层架构

Index 方法上点右键->添加视图

 

MVC5 网站开发之五 展示层架构

添加视图 对话框中,视图名称: Index,模板:Empty,选项勾选使用布局页,点击 添加 按钮,完成视图添加。

 

F5,运行项目,在浏览器中查看一下 http://localhost:52810/Home/Index。嗯,出错了,意思说Home找到两个匹配的控制器。

MVC5 网站开发之五 展示层架构

 

4、修改Member区域路由

打开 Ninesky.Web->Areas->Member->MemberAreaRegistration.cs

MVC5 网站开发之五 展示层架构

MapRoute添加namespaces参数。图中红框内为添加的代码。

5、修改默认路由

打开 Ninesky.Web->App_Start->RouteConfig.cs

MVC5 网站开发之五 展示层架构

MapRoute添加带有“namespaces”的参数。图中红框内为添加的代码。

再次按F5运行,可以看到正常页面。

二、Control区域

Control区域的做法与Member区域方式相同 。

1、添加Control区域

Ninesky.Web【右键】-> 添加->区域 。在弹出的添加区域对话框输入区域名称Control完成区域添加

2、添加Home控制器

Ninesky.Web->Areas->Control->Controllers【右键】-> 添加->区域 。

选择 MVC 5 控制器 - 空,点击 添加 按钮。

在“添加控制器”对话框中输入 “HomeController”  点击添加按钮。

3、为Index方法添加视图

Home控制器Index 方法上点右键->添加视图

添加视图 对话框中,视图名称: Index,模板:Empty,选项勾选使用布局页,点击 添加 按钮,完成视图添加。

4、修改Member区域路由

打开 Ninesky.Web->Areas->Control->ControlAreaRegistration.cs

MVC5 网站开发之五 展示层架构

MapRoute添加namespaces参数。图中红框内为添加的代码。

=======================================

代码见:https://ninesky.codeplex.com/SourceControl/latest

代码下载:https://ninesky.codeplex.com 点击SOURCE CODE 点击Download下载源文件。