---

---

项目地址

• 教程作者：王教员

• 教程地址：

https://www.bilibili.com/video/BV1Sn4y1o7EV?spm_id_from=333.788.player.switch&vd_source=791e6deaa9c8a56b1f845a0bc1431b71&p=6

• 代码仓库地址：

https://github.com/CXTV/WebApp

• 所用到的框架和插件：

.net 8

一、创建项目结构

1.1 创建程序以及Controller

• 使用空的.net core程序来制作mvc结构

1. 创建一个空的.net core程序
2. 在Program.cs的程序入口，注册我们依赖项

var builder = WebApplication.CreateBuilder(args);

//1.注入服务
builder.Services.AddControllersWithViews();

var app = builder.Build();

//2.添加中间件
app.UseRouting();

//3.添加控制器
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}"
    );

app.Run();

3. 创建controllers文件夹，并且添加一个HomeController.cs

• 当一个url通过匹配后，先回找到对应的controller，然后根据页面的view，找到对应的action; 例如：用户访问了/Home/Index.html，就回找到下面的方法Index()

using Microsoft.AspNetCore.Mvc;

namespace WebApp.Controllers
{
   
    public class HomeController : Controller
    {
   
        public string Index()
        {
   
            return "Hello /Home/index";
        }
    }
}

4. 通过访问https://localhost:7140/home/index就可以访问到返回的字符串

1.2 创建View

1. 直接在HomeController里的Index() Action自动添加View，就会得到下面的文件结构，其中Home对应的就是HomeController控制器；Index.cshtml就是对应的action的视图文件
   

2. 将需要编辑的内容放入到视图页面/Views/Home/Index.cshtml
   

1.3 创建Models层，并且在Edit页面显示

1. 创建Models文件夹，并且添加Category.cs

namespace WebApp.Models
{
    public class Category
    {
        public int CategoryId { get; set; }
        public string? Name { get; set; }
        public string? Description { get; set; }
    }
}

2. 在CategoriesController.cs里添加一个Edit页面，实例化Models里的类，并且传递给View()视图

public IActionResult Edit(int? id)
{
   
    
    var category = new Category
    {
   
        CategoryId = id.HasValue?id.Value : 0
    };
    return View(category);
}

3. 创建一个Eidt的视图， 将Index页面传递的Id，展示在Edit页面里

1.4 创建Layou模板页面

1. 在Views文件夹里Shared文件夹，并且创建_Layout.cshtml

2. 添加/View/_ViewStart.cshtml，全局的页面都将使用_Layout.cshtml页面作为模板页

@{
   
    Layout = "_Layout";
}

3. 补充，如果其他页面想用其他的Layout，可以使用

Views/
├── _ViewStart.cshtml  // 全局的默认配置
├── Home/
│   ├── Index.cshtml
│   ├── _ViewStart.cshtml  // 只影响 Home 下的视图

4. 其他页面只需要写@RenderBody()里面的内容即可

<h3 class="d-block">Categories</h3>
<div class="d-block">
    <ul>
        <li>
            <a href="/categories/edit/1">Beverage</a>
        </li>
        <li>
            <a href="/categories/edit/2">Meet</a>
        </li>
    </ul>
</div>

1.5 创建静态文件css中间件

1. 添加ww