1、新建项目
点击创建新项目,选择ASP.NET web应用程序,对项目进行命名后点击创建。
截图如下:
取消勾选HTTPS配置
可选择空 + mvc
或直接选定MVC
2、目录结构分析
1) App_Start
配置文件夹。
BundleConfig.cs
打包器(css,js等)
// ScriptBundle:脚本打包器(导入目录名).includes(所引入目录路径) bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
意思是我们把jq引入后重新规定路径为第一个括号内容,之后再在使用#1 括号内内容view内就可以调用了,如下。
通过bundles.Add新增打包设置
// _Layout.cshtml
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false)
下一段:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*"));
将引入所有以jquery.validate开头的文件
当为相应的控制器创建视图后,选定create等模板,再勾选‘引用脚本库’即可为视图文件引用上述文件
下一段:
// 使用要用于开发和学习的 Modernizr 的开发版本。然后,当你做好 // 生产准备就绪,请使用 https://modernizr.com 上的生成工具仅选择所需的测试。 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js"));
下一段引入的是样式文件:
bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); }
同时打包了2个样式文件
在模板文件内通过@Styles.Render进行引入
回到web.config文件
system.web标签下compilation标签debug属性
true:调试模式 不打包,引用原始文件
false:发布模式 打包,引用压缩文件
改为false后引用文件路径会有不同
FilterConfig.cs 过滤器:书写过滤规则
RouteConfig.cs 路由配置
2) Content
存放bootstrap css样式等样式文件
3)Contollers
控制器
4)fonts
bootstrap字体(icon)文件
5)Models
数据
6)Scripts
存放js等脚本文件
7)Views
视图
地址栏访问控制器,经由Models数据校验过滤,并最终展现View
每个Controller都会有其对应的View下的文件夹
_ViewStart.cshtml
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
设置Layout模板(布局页页),指定为Shared下的_Layout
也可以填写另一个布局页的路径
如果不使用模板,请声明:
@{ ViewBag.Title = "About"; Layout = null; }
Shared
_Layout.cshtml 共享视图模板,RenderBody()
2、Controller是如何运行的?
namespace MVCStudy.Controllers { public class DemoController : Controller { // GET: Demo public ActionResult Index() { return View(); } public ActionResult CreateStudent(Models.Student stu) { return View(); } } }
1)
通过地址调用相应名称的Controller及其下对应方法
每一个请求否会进入到IIS测试框架的一个管道中,
这个管道会解析地址栏的相关信息,解析出Controller和Action
之后管道自行实例化Controller并调用方法
2)内置对象解析
包括
Request 请求
Response 响应
Session 会话
Cookie 缓存
Application 当前网站对象
Server 服务器对象
①Request
服务器接收到客户端的数据
接收查询字符串(get):
public ActionResult Index() { return Content(Request.QueryString["name"]); }
多个查询字符串
public ActionResult Index() { return Content($"{ Request.QueryString["name"]}-{ Request.QueryString["age"]}"); }
获取post请求数据
我们可以使用一个html页提交数据,右键浏览器打开即可:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form action="/Demo/Index" method="post"> <input type="password" name="password" value="" /> <input type="submit" value="提交" /> </form> </body> </html>
Controller内处理:
public ActionResult Index() { return Content(Request.Form["password"]); }
上传文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form action="/Demo/Index" method="post" enctype="multipart/form-data"> <input type="file" name="file" value="" /> <input type="submit" value="提交" /> </form> </body> </html>
public ActionResult Index() { // SaveAs方法需要物理路径,而不是虚拟路径,这时可使用MapPath方法 Request.Files["file"].SaveAs(filename:Request.MapPath("~/uploads/" + Request.Files["file"].FileName)); return Content("ok"); }
在浏览器键入地址也可以访问到相关文件
https://localhost:44386/uploads/a.txt
② Response
响应一段文字:
public ActionResult Index() { Response.Write("hello,mvc"); return Content("finished"); }
展示请求头信息
public ActionResult Index() { // 展示请求头信息 return Content(Request.Headers["token"]); }
// 设置响应头:
public ActionResult Index() { Response.Headers["userId"] = "linda123"; return Content("ok"); }
③Session
所有人各自的数据存储
本质上为一些键值对
持续时间为20min
当有互动时重新计算有效时间
存储的位置在服务器
但会影响服务器性能
常用于存储登录信息
所有的页面都可使用session数据
设置Session
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title></title> 5 </head> 6 <body> 7 <form action="/Demo/Index" method="post"> 8 <input type="type" name="user" value="" /> 9 <input type="submit" name="name" value="提交" /> 10 </form> 11 </body> 12 </html>
public ActionResult Index() { Session["user"] = Request.Form["user"];
//所有页面都可读取 return Content("会话数据是" + Session["user"]); }
如何删除会话(安全退出)
public ActionResult Index() { Session["user"] = Request.Form["user"]; return Content("会话数据是" + Session["user"]); }