From e1210c2bf162677b4899a5abbd51ec3cce644c00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E7=81=BF?= <2262917336@qq.com> Date: Thu, 28 Nov 2024 23:24:20 +0800 Subject: [PATCH 1/2] 20241127 --- .../20241127-\350\247\206\345\233\276.md" | 176 ++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 "\345\210\230\347\201\277/20241127-\350\247\206\345\233\276.md" diff --git "a/\345\210\230\347\201\277/20241127-\350\247\206\345\233\276.md" "b/\345\210\230\347\201\277/20241127-\350\247\206\345\233\276.md" new file mode 100644 index 0000000..bcb3391 --- /dev/null +++ "b/\345\210\230\347\201\277/20241127-\350\247\206\345\233\276.md" @@ -0,0 +1,176 @@ +## 渲染 +- 简单数据在视图的渲染和展示 +- 复杂数据在视图的渲染和展示 +- 集合数据在视图的渲染和展示 + +## Razor +Razor 支持 C#，并使用` @ `符号从 HTML 转换为 C#。 Razor 计算 C# 表达式，并将它们呈现在 HTML 输出中。 + +当 @ 符号后跟 Razor 保留关键字时，它会转换为 Razor 特定标记. + +### 隐式 Razor 表达式 +以 @ 开头，后跟 C# 代码。隐式表达式不能包含空格，但 C# **await** 关键字除外。不能包含 C# 泛型，因为括号 (<>) 内的字符会被解释为 HTML 标记。 + +### 显式 Razor 表达式 +由 @ 符号和平衡圆括号组成。 + +### Razor 代码块 +代码块以 @ 开始，并括在 {} 中，例如： +```CSHTML +@{ + var quote = "The future depends on what you do today. - Mahatma Gandhi"; +} +

@quote

+@{ + quote = "Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr."; +} +

@quote

+``` +该代码呈现以下 HTML： +```HTML +

The future depends on what you do today. - Mahatma Gandhi

+

Hate cannot drive out hate, only love can do that. - Martin Luther King,Jr.";

+``` + +## 内置ASP.NET Core标记帮助程序--定位点 +定位点标记帮助程序可通过添加新属性来增强标准的 HTML 定位点 () 标记。 按照约定，属性名称将使用前缀 asp-。 asp- 属性的值决定呈现的定位点元素的 href 属性值 + +属性： +1. `asp-controller`：可分配用于生成 URL 的控制器。 +2. `asp-action `：属性值表示生成的 href 属性中包含的控制器操作名称。 +3. `asp-all-route-data` ：支持创建键值对字典。 键是参数名称，值是参数值。 + +# 作业 +## 渲染（展示）简单数据类型到视图 +![20241128230150](sjyniuybm.hn-bkt.clouddn.com/20241128230150.png) +```cs +public string Index() +{ + return "我是简单数据类型"; +} +``` + +## 渲染（展示）对象数据到视图 +![20241128230136](sjyniuybm.hn-bkt.clouddn.com/20241128230136.png) +```cs +public IActionResult Index_2() +{ + var list = new BlogCreateDto + { + Title="今天星期三", + Author="张三", + Content="明天星期四，明天没有课，可以睡一天" + }; + + return View(list); +} +``` + +## 渲染（展示）集合数据到视图 +![20241128230121](sjyniuybm.hn-bkt.clouddn.com/20241128230121.png) +```cs +public IActionResult Index_3() +{ + var list = new List + { + new BlogCreateDto + { + Title="今天星期三", + Author="张三", + Content="明天星期四，明天没有课，可以睡一天", + }, + new BlogCreateDto + { + Title="明天星期四", + Author="张三", + Content="今天星期四，没有课，好爽", + }, + new BlogCreateDto + { + Title="后天星期五", + Author="张三", + Content="今天上午上完课就可以放假，开心", + }, + }; + return View(list); +} +``` +```cshtml + + + + + + + + @foreach(var item in @Model) + { + + + + + + + } +
标题作者内容操作
@item.Title@item.Author@item.Content + + +
+``` + +## 渲染（展示）包含集合数据的对象数据到视图 +![20241128230108](sjyniuybm.hn-bkt.clouddn.com/20241128230108.png) +```cs +public IActionResult Index_4() +{ + var blog = new Blog + { + Title = "今天周四", + Author = "张三", + Content = "今天怎么这么快就过完了，啊啊啊啊啊，不想上早八", + BlogCreateDto = new List + { + new BlogCreateDto + { + Title="明天天星期五", + Author = "张三", + Content = "上午上完课就可以放假，开心" + }, + new BlogCreateDto + { + Title="明天星期五", + Author = "张三", + Content = "上午上完课就可以放假，开心" + }, + } + }; + return View(blog); +} +``` +```cshtml +

@Model.Title

+

@Model.Author

+

@Model.Content

+ +

BlogCreateDto:

+ + + + + + + + @foreach(var item in @Model.BlogCreateDto) + { + + + + + + + } +
标题作者内容操作
@item.Title@item.Author@item.Content + + +
+``` \ No newline at end of file -- Gitee From c0065c8205c1afe4f5491d3585889eae8c353ac1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E7=81=BF?= <2262917336@qq.com> Date: Fri, 29 Nov 2024 23:08:56 +0800 Subject: [PATCH 2/2] 20241129 --- ...9-\345\242\236\346\223\215\344\275\234.md" | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 "\345\210\230\347\201\277/20241129-\345\242\236\346\223\215\344\275\234.md" diff --git "a/\345\210\230\347\201\277/20241129-\345\242\236\346\223\215\344\275\234.md" "b/\345\210\230\347\201\277/20241129-\345\242\236\346\223\215\344\275\234.md" new file mode 100644 index 0000000..82da3f0 --- /dev/null +++ "b/\345\210\230\347\201\277/20241129-\345\242\236\346\223\215\344\275\234.md" @@ -0,0 +1,77 @@ +## 实现 增 操作 + +### 定义一个模型Models，模拟数据库 +1. 定义一个数据库的表 +2. 静态构造函数（只执行一次，内容如果修改，则需要重新跑） + 1) 初始化静态属性 + - 直接初始化：`public static List Blog = new List{"value1","value2"...};` + - **使用静态构造函数**（下面例子中的方法，推荐使用该方法 + - 延迟初始化 + - 使用属性初始化器 + 2) 给这个集合属性，塞进去一些内容 +```cs +public static class Db +{ + public static List Blog{get;set;} + + static Db() + { + Blog = new List(); + + for (int i = 0; i < 15; i++) + { + var tmp = new Blog + { + Id = i + 1,... + }; + + Blog.Add(tmp); + } + } +} +``` + +### 创建视图，展示内容 +1. 使用``标签展现 增删改 + ```html + 新增 + ``` +2. `asp-controller`：指定表单提交的 **目标控制器** +3. `asp-action`：指定表单提交时应该调用的控制器中的 **动作（方法）** +4. `asp-route-*`：通常与以上两个属性配合使用，便在创建表单或链接时能够自动将模型的状态或路由*参数*传递给控制器的特定动作。-id就是传递相应行的id号 + ```html + 编辑 + ``` + +### 跳转至增加页面 +1. 页面显示form表单，**一定要声明Models** +```html + +@model Blogs.Models.Blog; + +
+
+
+
+ +
+``` + +### 使用post请求，添加到表单 +1. 获取表单中最大的ID数，，方便程序在添加中自行增加Id数：`Max()方法` +2. 测试添加内容是否有被获取到：`return Content(JsonSerializer.Serialize(input))` +3. 将内容添加至表单 +```cs +[HttpPost] +public IActionResult Create(Blog input) +{ + // 获取表单中最大的ID数 + var maxId = Db.Blog.Select(t => t.Id).Max(); + // 添加后ID也增加 + input.Id = maxId + 1; + // 将添加的内容加入表单 + Db.Blog.Add(input); + return RedirectToAction("Index"); + // return Content(JsonSerializer.Serialize(input)); +} +``` -- Gitee