在VSCore中的页面的增删改查(以Blog项目为例)
1.创建项目（无解决方案）复杂项目才需要
dotnet new mvc -o Blog
2.控制器 BlogsController.cs
- 控制器（
Controller）名字和视图（View）中的文件名要一模一样
using Microsoft.AspNetCore.Mvc;
//Blog项目名 Models中有新建文件需要引用
using Blog.Models;
//Blog项目名
namespace Blog.Controllers;
//BlogsController跟控制器名字取的一样
public class BlogsController : Controller
{// 返回视图 用于整个页面public IActionResult Index(){return View(Db.Blogs);}// 增加页面public IActionResult Increase(){return View();}// 编辑页面public IActionResult Redact(){return View();}// 删除页面public IActionResult Delete(){return View();}
}
3. _ViewStart.cshtml中的默认模板页面可改为空（选择）
@{Layout = null;
}
4. 在View中
- 控制器（
Controller）名字和视图（View）中的文件名要一模一样 -
- 创建文件夹
Blogs
-
- 创建文件
Index.cshtml
5. 在Properties中（选择）
- launchSettings.json 中端口可改为5000
6. 在4.中的Index.cshtml中写需要的内容页面
7. 在wwwroot中写css文件（如需css文件的话）
- css文件名为
base.css - link在Index.cshtml页面中书写
<link rel="stylesheet" href="~/css/base.css">
8. 在Models中创建Blogs.cs 模型
namespace Blog.Models;public class Blogs
{public int Id{get;set;}public string Title{get;set;}=null!;public string Content{get;set;}=null!;public string Author{get;set;}=null!;}
9. 在Models中创Db.cs(模拟数据库创建)
namespace Blog.Models;
public static class Db
{// 集合public static List<Blogs> Blogs{get;set;}// 构造函数static Db(){Blogs=[];for (var i = 1; i <=10; i++){var tmp = new Blogs{Id=i,Title=$"永远是朋友{i}",Content=$"假日风情{i}",Author="哈哈"};Blogs.Add(tmp);}}
}
10. 在Index.cshtml中
- 增删改查需要跳转的页面就改换位a标签
- asp-action可以跳转到书写的页面
Increase 是在Views下的Blogs中创建的Increase.cshtml
<a asp-action="Increase">增加</a>
11. 在Models中写的Db.cs
- 记得在控制器
BlogsController.cs中返回视图
public IActionResult Index(){return View(Db.Blogs);}
完整版
1. 在Controllers需要写的文件
using Microsoft.AspNetCore.Mvc;
using Blog.Models;
namespace Blog.Controllers;public class BlogsController : Controller
{public IActionResult Index(){return View(Db.Blogs);}public IActionResult Increase(){return View();}public IActionResult Redact(){return View();}public IActionResult Delete(){return View();}
}
2. 在Models中需要写的文件
namespace Blog.Models;public class Blogs
{public int Id{get;set;}public string Title{get;set;}=null!;public string Content{get;set;}=null!;public string Author{get;set;}=null!;}
namespace Blog.Models;
public static class Db
{public static List<Blogs> Blogs{get;set;}static Db(){Blogs=[];for (var i = 1; i <=10; i++){var tmp = new Blogs{Id=i,Title=$"永远的友谊{i}",Content=$"开心每一天{i}",Author="哈哈"};Blogs.Add(tmp);}}
}
3. Views
- 在Views下创建一个文件夹 Blogs
- 在Blogs中创建Index.cs
<link rel="stylesheet" href="~/css/base.css">
@model List<Blog.Models.Blogs><a asp-action="Increase">增加</a>
<table><tr><th>Id</th><th>标题</th><th>内容</th><th>作者</th><th>操作</th></tr>@foreach(var item in @Model){<tr><td>@item.Id</td><td>@item.Title</td><td>@item.Content</td><td>@item.Author</td><td><a asp-action="Redact">编辑</a><a asp-action="Delete">删除</a></td></tr>}
</table>
<h2>新增</h2>
<table><form action=""><tr><td>标题</td><td>：</td><td><input type="text"></td></tr><tr><td> 内容</td><td>：</td><td><input type="text"></td></tr><tr><td>作者</td><td>：</td><td><input type="text"></td></tr><tr><td><input type="button" value="保存"></td><td></td><td></td></tr></form>
</table>
<h2>修改</h2>
<table><form action=""><tr><td>标题</td><td>：</td><td><input type="text" placeholder="永远是朋友"></td></tr><tr><td> 内容</td><td>：</td><td><input type="text" placeholder="真心换一切"></td></tr><tr><td>作者</td><td>：</td><td><input type="text" placeholder="哈哈"></td></tr><tr><td><input type="button" value="保存"></td><td></td><td></td></tr></form>
</table>
4. 在wwwroot中的css
table,
tr,
th,
td{border: 1px solid;border-collapse: collapse;
}th{width: 100px;height: 40px;background-color: paleturquoise;
}
tr{width: 100px;height: 30px;
}
a{display: inline-block;width: 40px;height: 30px;line-height: 30px;text-decoration: none;background-color: rgb(127, 228, 228);color: papayawhip;border: 1px solid;border-radius: 10px;text-align: center;
}
a:nth-child(2){background-color: plum;color: papayawhip;
}
完成完整版的以上步骤后
-
- 可以在进入到Blog文件中运行
-
- 打开Index页面
- 指的是在Blogs文件夹中的Index.cshtml文件
- Index改成Blogs文件下的其他名字就会跳转到对应的页面
http://localhost:5212/blogs/index
