Asp.net MVC在VSCore中的页面的增删改查(以Blog项目为例),用命令代码

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

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

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

  • BlogsController.cs中
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文件中
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文件中
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>
  • 在Increase.cs文件中
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>
  • 在Redact.cshtml文件中
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

  • 创建base.cs文件
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;
}

完成完整版的以上步骤后

    1. 可以在进入到Blog文件中运行
      • 热重载
      • dotnet watch
    1. 打开Index页面
      • 指的是在Blogs文件夹中的Index.cshtml文件
      • Index改成Blogs文件下的其他名字就会跳转到对应的页面
      • http://localhost:5212/blogs/index
相关推荐
skywalk81631 小时前
linux安装Code Server 以便Comate IDE和CodeBuddy等都可以远程连上来
linux·运维·服务器·vscode·comate
喂自己代言12 小时前
VS Code中提升效率的实用快捷键(中英双语版)
vscode
爱吃泡芙的小白白13 小时前
vscode、anaconda、git、python配置安装(自用)
ide·git·vscode·python·anaconda·学习记录
a***13141 天前
vscode配置django环境并创建django项目(全图文操作)
vscode·django·sqlite
YY&DS1 天前
VSCode Remote SSH 远程 Linux 无法连接
vscode
我是好小孩2 天前
【Android】常见的架构模式:MVC, MCP, MVVM
android·架构·mvc
William_cl2 天前
【ASP.NET Core】Controller 层 Action 返回值精讲:JsonResult(AJAX 交互核心)
ajax·asp.net·交互
(づど)3 天前
解决VSCode中安装Go环境Gopls失败的问题
vscode·golang
QQRRRRW3 天前
Tailwind+VScode (Vite + React + TypeScript) 原理与实践
vscode·react.js·typescript
_OP_CHEN3 天前
前端开发实战深度解析:(一)认识前端和 HTML 与开发环境的搭建
前端·vscode·html·web开发·前端开发