在VSCore中的页面的增删改查(以Blog项目为例)
1.创建项目（无解决方案）复杂项目才需要
html
复制代码
dotnet new mvc -o Blog
2.控制器 BlogsController.cs
- 控制器（
Controller）名字和视图（View）中的文件名要一模一样
cs
复制代码
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中的默认模板页面可改为空（选择）
cs
复制代码
@{
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页面中书写
cs
复制代码
<link rel="stylesheet" href="~/css/base.css">
8. 在Models中创建Blogs.cs 模型
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(模拟数据库创建)
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
html
复制代码
<a asp-action="Increase">增加</a>
11. 在Models中写的Db.cs
- 记得在控制器
BlogsController.cs中返回视图
cs
复制代码
public IActionResult Index()
{
return View(Db.Blogs);
}
完整版
1. 在Controllers需要写的文件
cs
复制代码
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中需要写的文件
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!;
}
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);
}
}
}
3. Views
- 在Views下创建一个文件夹 Blogs
- 在Blogs中创建Index.cs
html
复制代码
<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>
html
复制代码
<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>
html
复制代码
<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
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