ASP.NET MVC模式已经逐步取代传统的WebForm模式,今天直接动手,边做边学,来探索MVC。
首先安装Visual Studio 2019,这种软件建议安装最新版。
官网地址:https://visualstudio.microsoft.com/zh-hans/vs/ ,一般下载professional版即可
安装过程忽略,务必勾选安装“ASP.NET和Web”和 你会用的语言
新建项目,选择“ASP.NET Web 应用程序(.NET Framework)”
下一步,填写项目名称,选择目录,选择.NET版本(暂选4.5),点击创建
选择MVC模式。右侧的Web窗体如果勾选,则实现兼容WebForm,这里不选。
点击创建,等待几秒,然后可以看到项目目录。
主要的目录结构如下
此刻,先执行生成解决方案,然后打开调试(建议在本机IIS设置项目目录站点),看到已有的首页内容
这是新项目自动创建的首页和示例内容,VS已自动内置了jquery和bootstrap3.4,所以可以看到熟悉的bootstrap排版
现场的示例代码不要删掉,来分析一下。
我们看到的内容,都是View呈现出来的html内容,而View是由Controller操作的
展开Controller和View目录,可以发现如下文件
名为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
然后,在Views下创建 admin 目录,右键admin目录,添加-视图,名为 Index (暂不勾选布局页)
打开视图文件后,我们在
@{
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没有值,因此不显示了。这就是自定义渲染视图的效果。
这篇,就写到这里,下一篇我们尝试一下参数的接收。