台州网站制作案例网站建设周期

在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）中的文件名要一模一样
• 1. 创建文件夹Blogs
• 1. 创建文件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 模型

• 字段名
• 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(模拟数据库创建)

• 静态字段
• 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标签
  • input（button） --》 改换成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需要写的文件

• BlogsController.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中需要写的文件

• 在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!;}

• 在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);}}
}

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>

• 在Increase.cs文件中

<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>

• 在Redact.cshtml文件中

<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

• 创建base.cs文件

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;
}

完成完整版的以上步骤后

• 1. 可以在进入到Blog文件中运行
     • 热重载
     • dotnet watch
• 1. 打开Index页面
     • 指的是在Blogs文件夹中的Index.cshtml文件
     • Index改成Blogs文件下的其他名字就会跳转到对应的页面
     • http://localhost:5212/blogs/index