ASP.NET MVC5(VS 2019)边做边学(01)创建项目&控制器与视图的关系

ASP.NET MVC模式已经逐步取代传统的WebForm模式,今天直接动手,边做边学,来探索MVC。

首先安装Visual Studio 2019,这种软件建议安装最新版。

官网地址:https://visualstudio.microsoft.com/zh-hans/vs/ ,一般下载professional版即可

安装过程忽略,务必勾选安装“ASP.NET和Web”和 你会用的语言

第一步:创建项目

新建项目,选择“ASP.NET Web 应用程序(.NET Framework)”

ASP.NET MVC5(VS 2019)边做边学(01)创建项目&控制器与视图的关系_第1张图片

下一步,填写项目名称,选择目录,选择.NET版本(暂选4.5),点击创建

ASP.NET MVC5(VS 2019)边做边学(01)创建项目&控制器与视图的关系_第2张图片

选择MVC模式。右侧的Web窗体如果勾选,则实现兼容WebForm,这里不选。

ASP.NET MVC5(VS 2019)边做边学(01)创建项目&控制器与视图的关系_第3张图片

点击创建,等待几秒,然后可以看到项目目录。

主要的目录结构如下

ASP.NET MVC5(VS 2019)边做边学(01)创建项目&控制器与视图的关系_第4张图片

此刻,先执行生成解决方案,然后打开调试(建议在本机IIS设置项目目录站点),看到已有的首页内容

ASP.NET MVC5(VS 2019)边做边学(01)创建项目&控制器与视图的关系_第5张图片

这是新项目自动创建的首页和示例内容,VS已自动内置了jquery和bootstrap3.4,所以可以看到熟悉的bootstrap排版

现场的示例代码不要删掉,来分析一下。

我们看到的内容,都是View呈现出来的html内容,而View是由Controller操作的

展开Controller和View目录,可以发现如下文件

ASP.NET MVC5(VS 2019)边做边学(01)创建项目&控制器与视图的关系_第6张图片

名为Home的控制文件和视图目录,视图目录中有:关于、联系、首页三个文件,目测与首页导航的链接对应,分别打开三个cshtml文件,可以验证确实对应。再打开HomeController.cs文件,看到3个ActionResult的function,名称也是对应这3个文件。

那么,第一个问题,首页目录名为什么是Home,不应该是Index吗

其实,这是路由配置的结果,MVC与Webform最直接的区别就是URL路径,MVC站点你访问 /abc,实际不存在 /abc这个物理文件,而是访问了控制层的 /abc,然后控制层反馈给你一个View让你在浏览器看到。

路由配置在App_Start目录下的RouteConfig.cs,打开后可以看到如下代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace sky
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

这里配置了一个默认路由 url: "{controller}/{action}/{id}",同时可以看到Home被设定为默认控制,Index被设定为默认action。

关键的 url: "{controller}/{action}/{id}"

可以初步理解为:站点URL中的二级目录为控制层名称,三级目录名是该控制层下的一个action名称,再下级的id是该action的参数(参数是可选的)

举例:按传统WebForm的思路,你的网站有个管理员目录名为 admin,目录下有个登录页,名为 login.aspx

这样的情况,在MVC中的做法是:首先在Controllers目录中创建一个 admin的controller文件,按命名规则应是 adminController.cs,并在这个cs文件中写一个 login的函数;接着,在View目录下,创建名为admin的目录,在admin目录下创建名为 login.cshtml 的视图文件,然后当你在浏览器提交 /admin/login 的时候,程序会执行 adminController对象中的名为 login的函数,然后该函数返回指定的视图给你,如无特别指定,就给你对应视图层中的对于内容 View/admin/login.cshtml

我来画个流程图:

控制器的作用是很大的,它可以接收用户请求的参数,处理数据,可以与Model层连接获取数据,然后根据业务逻辑把数据传输到视图。

在渲染视图上,控制层并不是只能返回对应的视图,也可以自定义返回其他视图,甚至仅返回一串字符。

下面,我们来动手尝试一下:

1、在Controllers目录上右键,新建--控制器,然后选择 MVC5控制器-空,取名为 adminController

ASP.NET MVC5(VS 2019)边做边学(01)创建项目&控制器与视图的关系_第7张图片

ASP.NET MVC5(VS 2019)边做边学(01)创建项目&控制器与视图的关系_第8张图片

然后,在Views下创建 admin 目录,右键admin目录,添加-视图,名为 Index (暂不勾选布局页)

ASP.NET MVC5(VS 2019)边做边学(01)创建项目&控制器与视图的关系_第9张图片

打开视图文件后,我们在

标签中输入 你好: @ViewBag.msg ,这是 admin/login 的视图内容,代码如下:

@{
    Layout = null;
}





    
    Index


    
你好: @ViewBag.msg ,这是 admin/index 的视图内容

解释一下:

1、最顶部的代码是微软提供的 Razor代码,主要是应用在视图文件中的服务器端标记语言。Layout = null 表示该视图不使用布局页。

2、@ViewBag.msg 是控制层向视图层传输数据的一种方式,还有ViewDate等其他方式。

 

下面,我们来打开控制层文件 adminController.cs,看到代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace sky.Controllers
{
    public class adminController : Controller
    {
        // GET: admin
        public ActionResult Index()
        {
            return View();
        }
    }
}

解析:

1、顶部引用了 System.Web 和System.Web.Mvc

2、主类继承 Controller

3、Index()的类型为 ActionResult,这类需要返回一个 View(),如果你仅需要返回一串字符,那就可以把ActionResult改为string

4、刚才我们在视图文件中输入了 @ViewBag.msg ,这是控制层向视图传输数据的方式,因此,我们在控制层代码中要通过@ViewBag传一个数据,我们在return View();之前加一句代码,修改代码为如下:

public ActionResult Index()
{
      @ViewBag.msg = "聪明的孩子";
      return View();
}

接着,我们编译一下,然后浏览器访问 /admin/ ,我们看到页面输出了:

由于是Index,所以URL中不需要输入index

此刻,已经初步理解了控制层与视图的关系,我们来尝试一下 /admin/login

1、Views/admin 下创建名为 login的视图文件,html中写一句:这是 /admin/login 的视图

2、adminController.cs文件中增加 login() 函数,增加后的adminController.cs如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace sky.Controllers
{
    public class adminController : Controller
    {
        // GET: admin
        public ActionResult Index()
        {
            @ViewBag.msg = "聪明的孩子";
            return View();
        }

        public ActionResult login()
        {
            return View();
        }
    }
}

 

3、执行编译,然后浏览器访问 /admin/login,可以看到渲染的页面

尝试成功!

下面我们修改 login() 中的 return View() ,改为  return View("Index")

然后编译,刷新  /admin/login ,你会看到

对,这就是index的视图,并且由于@ViewBag.msg没有值,因此不显示了。这就是自定义渲染视图的效果。

这篇,就写到这里,下一篇我们尝试一下参数的接收。

你可能感兴趣的:(ASP.NET,MVC)