当前位置: 开发笔记 > 编程语言 > 正文

学习ASP.NETCoreBlazor编程系列六——新增图书（上）

作者：欣荣_75229 | 来源：互联网 | 2023-08-09 06:58

学习ASP.NETCoreBlazor编程系列六——新增图书（上）-学习ASP.NETCoreBlazor编程系列一——综述学习ASP.NETCoreBlazor编程系列二—

学习ASP.NET Core Blazor编程系列一——综述

学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（上）

学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（中）

学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（下）

学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（完）

学习ASP.NET Core Blazor编程系列三——实体

学习ASP.NET Core Blazor编程系列四——迁移

学习ASP.NET Core Blazor编程系列五——列表页面

学习ASP.NET Core Blazor编程系列六——初始化数据

上一篇文章学习ASP.NET Core Blazor编程系列六——初始化数据中我们对数据库进行了初始化，写入了几条图书信息数据，并通过DBContext将查询到的图书信息，在列表页面中显示。通过使用@inject指令进行对象注入。

今天，这一篇文章我们来学习一下如何新增一本图书信息数据。

首先，我们在Visual Studio 20222的解决方案管理器中，鼠标右键单击“Pages”文件夹。在弹出菜单中选择，添加-->Razor组件。如下图。

其次，在弹出的“添加新项”对话框的名称输入框中输入“AddBook.razor”。然后使用鼠标左键点击“添加”按钮，将创建名为AddBook的Blazor组件。如下图。

第三，在Visual Studio 2022的文本编辑器中打开Pages/AddBook.razor文件。

在以往经典的Web应用程序中，我们经常使用元素创建表单，在表单中添加元素，有一个 type 属性，用于指定输入的类型及其显示方式（作为数字、文本框、单选按钮、复选框、按钮等），让用户输入数据，在用户提交表单时进行数据验证。如果验证成功，则可以执行相应的操作（新增，更新，删除等）。

那么Blazor应用程序中如何进行数据输入呢，Blazor也提供了一个类似表单的组件—— 组件。此外，Blazor提供了一系列专用输入元素，这些元素可用于格式化和验证用户输入的数据。

我们首先来实现一个功能简单的图书信息添加页面，在已经打开的AddBook.razor文件中的输入如下代码。

@page "/AddBook"
@using BlazorAppDemo.Models
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory dbFactory

 

AddBook 


    @Message
     图书名称：
    
    

    作者：
    
       

    出版日期：
    
     
    价格：
    
     
    类型：
     
      
    总页数：
    
     
    库存数量：
    
     
    已租数量：
    
    
    
 


@code {

   private string Message = string.Empty;
    private static BookContext _context;
    private Models.Book addBook = new Book();
    protected override Task OnInitializedAsync()
    {
        _cOntext= dbFactory.CreateDbContext();
        return base.OnInitializedAsync();
    }
    private void Save(EditContext editContext)
    {
        if (editContext.Model is not Book addBook)
        {
            Message = "你编辑的不是图书信息。";
            return;
        }
        _context.Add(editContext.Model);
        int cnt=  _context.SaveChanges();
        if (cnt>0)
        {
        Message = "图书信息保存成功！";   
        }else
       {
            Message = "图书信息保存失败！";
       }       
    }
}

对于以上代码进行简单的说明一下，控件支持使用 Model 参数进行数据绑定。指定一个对象作为此形参的实参。 EditForm 中的输入控件可使用 @bind-Value 参数绑定到由模型公开的属性和字段。使用 [bind-Value] 参数绑定将addBook的特定属性绑定到EditForm中的输入控件中。

Blazor 拥有自己的一组组件，旨在专用于元素并支持其他功能中的数据绑定。下表列出了这些组件。当 Blazor 呈现包含这些组件的页面时，它们将转换为表中列出的相应 HTML 元素。

输入组件	呈现为 (HTML)
InputCheckbox
InputDate
InputFile
InputNumber
InputRadio
InputRadioGroup	一组子单选按钮
InputSelect
InputText
InputTextArea	</span></p> </td> </tr> </tbody> </table> <p align="left"><span > 第四、在Visual Studio 2022的菜单栏上，找到“调试--》开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，我们使用鼠标点击左边的菜单栏上的“添加图书”菜单项，我们预期页面会进入“AddBook”页面，实际上的结果，应用程序给我们抛出了一个异常，如下图。 <img src="https://img.php1.cn/3cd4a/1e618/bdf/129913486c37ddf6.jpeg"></span></p> <p align="left"><span > 第五，这个异常是由于我们在“bind-value”这绑定代码时，“value”的v写成了小写，如下图。改成大写就可以了。 </span></p> <p><img src="https://img.php1.cn/3cd4a/1eebe/cd5/443b30bb45e66690.webp"></p> <p align="left"><span > 第六，在Visual Studio 2022的菜单栏上，找到“调试--》开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，我们使用鼠标点击左边的菜单栏上的“添加图书”菜单项，会进入“AddBook”页面，如下图。 <img src="https://img.php1.cn/3cd4a/1eebe/cd5/5b97d3b808d031e2.webp"></span></p> <p align="left"><span > EditForm 的在进行提交动作时，有三个与提交有关的事件：</span></p> <ul> <li><span >OnValidSubmit. 如果表单上的输入的数据全部通过其对应的验证属性所定义的验证规则，则会触发此事件。</span></li> <li><span >OnInvalidSubmit. 如果表单上输入的数据中有任何一个数据没有通过其对应的验证属性所定义的验证规则，则会触发此事件。</span></li> <li><span >OnSubmit. 表单上输入的所有数据是否有效，在提交EditForm时都将会触发生此事件。</span></li> </ul> <p align="left"><span > 对于在单个EditForm中实现输入框的基本验证，最好调用OnValidSubmit 和 OnInvalidSubmit 事件。如果是很复杂的验证要求，例如将一个输入文本框中的内容与后台数据库中的数据进行交叉检查以确保值的有效，请首先使用 OnSubmit 事件。 EditForm 可以同时处理 OnValidSubmit 和 OnInvalidSubmit 事件，也可以单独处理OnSubmit事件，不能同时处理这两者。通过向 EditForm 添加一个 Submit 按钮来触发提交。当用户选择此按钮时，将触发由 EditForm 指定的提交事件。</span></p> <p align="left"><span > Visual Studio 2022在生成应用程序时不会检查提交事件组合是否有效或是无效，但是如果事件选择不正确，在运行时将会产生错误。例如，如果将 OnValidSubmit 与 OnSubmit 结合使用，应用程序将生成以下运行时异常：</span></p> <p align="left"><span > Error: System.InvalidOperationException: When supplying an OnSubmit parameter to EditForm, do not also supply OnValidSubmit or OnInvalidSubmit.</span></p> <p align="left"><span > EditForm 使用 EditContext 对象跟踪当前对象的状态，包括哪些字段已更改及其当前值。提交事件将 EditContext 对象做为参数传递。事件处理程序可以使用此对象中的 Model字段来检索用户的输入。</span></p> <p align="left"><span > 在页面中点击“Save”按钮，将调用EditForm中OnSubmit事件中所指定的 Save方法，将图书信息对象传递给@code代码中的Save方法，保存图书信息到数据库。 </span></p> <p align="left"><span > 如果不存在错误，应用程序将会把我们填写的数据保存到数据库，并且浏览器会重定向到书籍列表页面，在书籍列表页面中的书籍列表中会出现我们刚才保存的数据。如下图。</span></p> <p align="left"><span ><strong><img src="https://img.php1.cn/3cd4a/1eebe/cd5/b428d8f746fb8d47.webp"></strong></span></p> <p align="left"><span ><strong> <br></strong></span></p> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/asp.net" target="_blank" title="asp.net">asp.net</a></li> <li><a href="https://www.php1.cn/tag/编程" target="_blank" title="编程">编程</a></li> <li><a href="https://www.php1.cn/tag/数据库" target="_blank" title="数据库">数据库</a></li> <li><a href="https://www.php1.cn/tag/text" target="_blank" title="text">text</a></li> <li><a href="https://www.php1.cn/tag/注入" target="_blank" title="注入">注入</a></li> <li><a href="https://www.php1.cn/tag/visual" target="_blank" title="visual">visual</a></li> <li><a href="https://www.php1.cn/tag/io" target="_blank" title="io">io</a></li> <li><a href="https://www.php1.cn/tag/文件" target="_blank" title="文件">文件</a></li> <li><a href="https://www.php1.cn/tag/编辑器" target="_blank" title="编辑器">编辑器</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了会员登录 \| 用户注册推荐阅读 string 关于cuowu类的错误提示和使用AdjustmentListener的问题本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细] 蜡笔小新 2023-12-13 22:09:56 string 在类中定义数组时出错 - Error on defining arrays in class Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细] 蜡笔小新 2023-12-14 17:38:12 string 向QTextEdit拖放文件的方法及实现步骤本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细] 蜡笔小新 2023-12-14 16:06:38 string Spring特性实现接口多类的动态调用详解本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍，以及getBeansOfType方法的应用，解决了在实际工作中遇到的接口及多个实现类的问题。同时，文章还提到了SPI使用的不便之处，并介绍了借助ApplicationContext实现需求的方法。阅读本文，你将了解到Spring特性的实现原理和实际应用方式。 ... [详细] 蜡笔小新 2023-12-14 03:24:19 string XML介绍与使用的概述及标签规则本文介绍了XML的基本概念和用途，包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则，包括标签的尖括号和合法标识符的组成，标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读，读者可以对XML的基本知识有一个全面的了解。 ... [详细] 蜡笔小新 2023-12-13 17:39:50 string [大整数乘法] java代码实现本文介绍了使用java代码实现大整数乘法的过程，同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率，并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细] 蜡笔小新 2023-12-13 11:21:32 string 南邮ctf-web的writeup 本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细] 蜡笔小新 2023-12-13 10:58:55 string C#学习教程：在Console中工作但在Windows窗体中不工作的异步代码分享本文分享了一个关于在C#中使用异步代码的问题，作者在控制台中运行时代码正常工作，但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机，但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细] 蜡笔小新 2023-12-14 15:56:00 string Linux重启网络命令实例及关机和重启示例教程本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细] 蜡笔小新 2023-12-14 15:52:52 string 如何在有序字符序列中插入新字符并保持有序本文介绍了如何在给定的有序字符序列中插入新字符，并保持序列的有序性。通过示例代码演示了插入过程，以及插入后的字符序列。 ... [详细] 蜡笔小新 2023-12-14 11:16:33 join Java高并发程序设计学习-线程安全的概念与synchronized 本文介绍了Java高并发程序设计中线程安全的概念与synchronized关键字的使用。通过一个计数器的例子，演示了多线程同时对变量进行累加操作时可能出现的问题。最终值会小于预期的原因是因为两个线程同时对变量进行写入时，其中一个线程的结果会覆盖另一个线程的结果。为了解决这个问题，可以使用synchronized关键字来保证线程安全。 ... [详细] 蜡笔小新 2023-12-13 15:43:03 string java 模拟get post请求_Java后台模拟发送http的get和post请求，并测试个人学习使用：谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细] 蜡笔小新 2023-12-13 14:20:23 input HDFS2.x新特性一、集群间数据拷贝scp实现两个远程主机之间的文件复制scp-rhello.txtroothadoop103:useratguiguhello.txt推pushscp-rr ... [详细] 蜡笔小新 2023-12-13 13:52:40 string springmvc学习笔记(十)：控制器业务方法中通过注解实现封装Javabean接收表单提交的数据本文介绍了在springmvc学习笔记系列的第十篇中，控制器的业务方法中如何通过注解实现封装Javabean来接收表单提交的数据。同时还讨论了当有多个注册表单且字段完全相同时，如何将其交给同一个控制器处理。 ... [详细] 蜡笔小新 2023-12-13 12:16:34 string 猜字母游戏猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细] 蜡笔小新 2023-12-13 12:04:03 欣荣_75229 这个家伙很懒，什么也没留下！ Tags \| 热门标签 bash heatmap nodejs js netty case usb tags hashtable golang input vba hashset instance format httpclient web3 dockerfile runtime jsp audio scala version perl string cmd timestamp join cPlusPlus triggers RankList \| 热门文章 1如何使用runtime获取该类中类别的属性名称？ 2Java 通过JNI调用C或者CPP代码 3多态性_python多态与多态性 4CentOS 7 软件安装之Nginx yum 安装 5vs2010下面，看看下面代码输出为什么是这样？ 6电圆锯倒装 7文件上传Apache 8前端面试查漏补缺 (最近面试 -- 最全面的总结) 9光信：一技能搭配闪现切入，二技能消耗，衔接普攻伤害最大化 10mini2440的初始化_从汇编到C语言 11Dfs【p1454】圣诞夜的极光 12DevExpress_DevExpress v18.1新版亮点——Report & Dashboard Server 13java实现表格代码,javaweb表格代码 14Day36.最小栈 15爬取新浪首页图片 PHP1.CN \| 中国最专业的PHP中文社区 \| DevBox开发工具箱 \| json解析格式化 \|PHP资讯 \| PHP教程 \| 数据库技术 \| 服务器技术 \| 前端开发技术 \| PHP框架 \| 开发工具 \| 在线工具 Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved \| 京公网安备 11010802041100号 \| 京ICP备19059560号-4 \| PHP1.CN 第一PHP社区版权所有