在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