一、配置M-V-C文件结构
1、新建文件夹
在Web_DEMO下面新建Controllers、Models、Repository、Views、wwwroot 共5个文件夹;
在Views文件夹下,创建Shared文件夹;
在wwwroot文件夹下,创建css、img、js、lib共4个文件夹
文件结构:https://files.cnblogs.com/files/shiliumu/Web_DEMO.rar?t=1666436518
2、新建控制器
Controllers文件夹下,右键添加控制器,选择空控制器,命名:HomeController.cs
HomeController.cs代码如下:
using Microsoft.AspNetCore.Mvc; namespace Web_DEMO.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(); } } }
3、添加视图,
右键Index方法,选择添加视图,Razor空视图
View文件夹下自动生成Home文件夹,Home文件夹下自动生成Index.cshtml文件,
在Index.cshtml文件中,添加<h1>标签
@* For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860 *@ @{ } <h1>我是mvc视图</h1>
4、添加模型,
右键Models文件夹,选择添加类,新建Login类,添加DataAnnotations引用
using System.ComponentModel.DataAnnotations; namespace Web_DEMO.Models { public class Login { [Key] public string loginId { get; set; } public string loginPwd { get; set; } } }
二、配置.netCore项目的启动入口文件Program.cs
1、注入服务
builder.Services.AddControllersWithViews(); //注入服务,控制器及视图
ps:选择注入MVC选项
builder.Services.AddMvcCore(); //只运行Controller/RazorPages必要的核心服务
builder.Services.AddControllers(); //包含AddMvcCore()所做的动作外,再加身份验证服务
builder.Services.AddRazorPages(); //要用Controller但不用View,例如WebAPI,可以选这个
builder.Services.AddControllersWithViews(); //包含AddControllers()的所有项目,再加上:cshtml Razor View和Cache Tag Helper
builder.Services.AddMvc(); //等于AddControllersWithViews() 加 AddRazorPages(),不想漏掉功能,发挥ASP.NET Core 最大威力
2、添加静态文件,注意添加位置,在路由app.UseRouting();上面
app.UseStaticFiles(); //使用默认文件夹wwwroot
3、修改路由
//app.MapGet("/", () => "Hello World!"); //注释掉原来路由,使用下面控制器路由 app.UseRouting(); app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}");
4、配置好的Program.cs文件如下:
var builder = WebApplication.CreateBuilder(args); builder.Services.AddControllersWithViews(); //注入服务,控制器及视图 var app = builder.Build(); app.UseStaticFiles(); //使用默认文件夹wwwroot //app.MapGet("/", () => "Hello World!"); //注释掉原来路由,使用下面控制器路由 app.UseRouting(); app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); app.Run();
5、F5运行,显示“我是mvc视图”
三、配置View
1、添加Razor视图开始和视图导入
View文件夹右键,添加Razor视图,类型选择“Razor视图-空”
依次添加“Razor视图开始”和“Razor视图导入”,文件名系统默认:_ViewStart.cshtml、_ViewImports.cshtml
_ViewStart.cshtml在View开始执行之前执行,而且是每一个View,一般在里面设置“母版页”值,当作_layout.cshtml文件的布局属性来使用
内容只有一行:
@{
Layout = "_Layout";
}
_ViewImports.cshtml是放一些要引用的命名空间,预设的ASP.NET Core MVC专案就有一个/Views/_ViewImports.cshtml,
其内容为:
@using Web_DEMO;
@using Web_DEMO.Models; @*//如果Models文件夹下不存在模型,会提示错误*@)
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
之后的每一个View 就不用再引用这些命名空间,与_ViewStart.cshtml 一样,可以为不同的Controller、不同的Area 增加_ViewImports.cshtml
2、添加Razor视图布局页,即"母版页"
View->Shared文件夹右键,添加Razor视图,
类型选择“Razor视图-空”,添加”Razor布局“,文件名系统默认:_Layout.cshtml
在_Layout.cshtml文件中,@RenderBody()代码下,
添加:@await RenderSectionAsync("Scripts", required: false)
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div> @RenderBody() @await RenderSectionAsync("Scripts", required: false) @*添加*@ </div> </body> </html>