首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

结合使用 C# 和 Blazor 进行全栈开发

我将展示如何在 Blazor 客户端和 WebAPI 服务器应用程序之间共享验证逻辑。目前,你不仅要在服务器中验证输入,还要在客户端浏览器中验证输入。新式 Web 应用程序的用户希望获得准实时反馈。...在此示例中,它会验证所有字段是否都为必填、姓名字段是否有长度上限,以及电子邮件地址和电话字段的格式是否正确。它会在每个字段下显示错误消息,这些消息会在用户键入内容的同时更新。...共享库包含模型类和非常简单的验证引擎。模型类保留注册窗体中的数据字段。...每个字段都使用映射到验证规则的属性进行修饰。我选择了创建非常简单的模型,它很像实体框架 (EF) 数据注释模型。此模型的所有逻辑都包含在共享库中。...我不是在提倡创建你自己的验证引擎;只是有很多选择。此验证引擎既要足够好,以便演示实际示例;又要足够简单,以适应本文且易于理解。 创建规则 此时,有包含窗体字段的 RegistrationData 类。

6.7K40

Flutter 构建一个 todo list 应用

main.dart 这个文件是 Flutter 应用的入口文件。在这篇文章中,我将仅仅使用这个文件来开发。 首先,我们先导入 material 包。...我们告诉 flutter 一个 todo 项应该包含什么,什么字段是必须的。在我们的案例中,我们有名字和 checked 两个状态属性。...在上面代码片段中,通过 map 方法返回每个元素的 TodoItem。 然后,在应用的底部,我们定义了一个按钮。当按钮被点击时候,将调用 _displayDialog 方法。...创建 TodoItem TodoItem 是我们列表项的单独体现。...在我们的案例中,将会返回用户输入的值。 对话框中有一个动作,就是当我们点击按钮的时候,将会关闭对话框并且调用 _addTodoItem 函数。

1.3K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )

    0 , 结束值 300 , 动画在执行的 3 秒时间内 ( 动画控制器中指定的动画持续时间 ) , 自动计算出每个时间点的 0 ~ 300 之间的动画值 ; 创建动画代码示例 : ///..., Animation 动画 , Widget 组件 , 都封装在一个 StatelessWidget 组件中 , Flutter 中一切皆组件 ; 然后在这个组件中返回一个包含 AnimatedBuilder...组件的组件 , 其中将 Animation 动画 和 Widget 组件都设置在该 AnimatedBuilder 中 , Animation 动画设置在 animation 字段中 , child...字段需要设置到 build 字段中 , 设置的方法如下 : AnimatedBuilder( animation: animation, builder...State 类 /// 每个 StatefulWidget 都需要一个配套的 State 类 class _AnimationAppState extends State

    1.8K10

    为什么Flutter会选择 Dart ?

    Dart使Flutter不需要单独的声明式布局语言,如JSX或XML,或单独的可视化界面构建器,因为Dart的声明式编程布局易于阅读和可视化。...虚拟机(VM)的概念开始流行,它其实只是一个高级的解释器,用软件模拟硬件设备。虚拟机使语言移植到新的硬件平台更容易。因此,VM的输入语言常常是中间语言。...统一的布局 Dart的另一个好处是,Flutter不会从程序中拆分出额外的模板或布局语言,如JSX或XML,也不需要单独的可视布局工具。...以下是一名开发人员在一篇题为“为什么原生应用程序开发人员应认真看待Flutter”的文章中写的内容。...一个程序员在名为“为什么Flutter 2018年将起飞”的文章中写到: Dart是用于开发Flutter应用程序的语言,很易学。谷歌在创建简单、有文档记录的语言方面拥有丰富的经验,如Go。

    2.1K30

    Flutter 高性能原理浅析

    Dart中类似线程的概念叫做Isolate,每个Isolate之间是无法共享内存的,所以这种分配策略可以让Dart实现无锁的快速分配。...Dart 单线程 异步消息机制 客户端交互简述 对于移动端的交互来说,大多数情况下都是在等待状态,等待网络请求,等待用户输入等.那么设想一下,发起一个网络请求只在一个线程中可以进行吗?...那么这样,如果控件的属性发生了变化 (因为控件的属性是只 读的, 所以变化也就意味着重新创建了新的控件树), 但是其树上每个节点的类型没有变化时, element 树和 render 树可以完全重用原来的对象...渲染对象树中的每个对象都会在布局过程中接受父 对象的 Constraints 参数,决定自己的大小, 然后父对象 就可以按照自己的逻辑决定各个子对象的位置,完成布局过程....子对象的位 置信息存储在它自己的 parentData 字段中,但是该字段由它的父对象负责维护,自身并不关心该字段的内容。

    2.3K31

    Flutter完整开发实战详解(二、 快速开发实战篇)

    作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter App 常用功能脚手架,快速开发一个完整的...本系列的最终目的是:让你感受 Flutter 的愉悦!那么就让我们愉悦的往下开始吧!(◐‿◑) ? 我是简陋的下图 一、基础控件 所谓的基础,大概就是砍柴功了吧!...返回的一个对象 } 2、Json序列化   在 Flutter 中,json 序列化是有些特殊的。...中引入 store,通过 StoreProvider 将创建 的 store 引用到 Flutter 中。...这里主要提供一种思路,按照 sqflite 文档提供的方法,重新做了一小些修改,通过定义 Provider 操作数据库: 在 Provider 中定义表名与数据库字段常量,用于创建表与字段操作; 提供数据库与数据实体之间的映射

    5.2K10

    K8S deployment可视化故障排查指南

    您是否应该为每个服务创建一个新端口,以免它们冲突? 标签名称重要吗?所有的都应该一样吗? 在进行调试之前,让我们回顾一下这三个组件如何相互链接。 让我们从Deployment和Service开始。...您应该记住三件事: 服务选择器应至少与Pod的一个标签匹配 服务targetPort应与containerPortPod中容器的匹配 服务port可以是任何号码。...创建Pod时,应为Pod containerPort中的每个容器定义端口。 创建服务时,可以定义port和targetPort。但是您应该连接哪一个容器?...Ingress有一个名为servicePort的字段 Service端口和ingress servicePort应始终匹配。...现在可以用吗? 如果可行,则问题出在基础架构中。您应该调查流量如何路由到您的群集。 如果不起作用,则问题出在Ingress控制器中。您应该调试Ingress。

    2.6K10

    Flutter完整开发实战详解(二、 快速开发实战篇)

    作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter App 常用功能脚手架,快速开发一个完整的...本系列的最终目的是: 让你感受 Flutter 的愉悦! 那么就让我们愉悦的往下开始吧!(◐‿◑) [我是简陋的下图] 一、基础控件  所谓的基础,大概就是砍柴功了吧!...返回的一个对象 } 2、Json序列化   在 Flutter 中,json 序列化是有些特殊的。...中引入 store,通过 StoreProvider 将创建 的 store 引用到 Flutter 中。...这里主要提供一种思路,按照 sqflite 文档提供的方法,重新做了一小些修改,通过定义 Provider 操作数据库: 在 Provider 中定义表名与数据库字段常量,用于创建表与字段操作; 提供数据库与数据实体之间的映射

    5K30

    Flutter vs React Native

    Flutter 的优势在于: 快速开发 Flutter 拥有热加载功能,只需几毫秒就能运行应用程序。它的自定义窗体功能也可以用来创建原生界面。...Flutter 中的每个窗体都由自己的属性,可以嵌套在其他组件中。窗体也能调用父组件的属性。 在 React Native 中,使用原生模块和用户界面组件只需桥接就可以。...但在 Flutter 中无法这样做,因为 Flutter 有自己的渲染引擎。 这里是 Flutter 窗体(https://flutter.io/widgets/)的一些例子。...14.React Native 中的样式 React Native 中的样式用 JavaScript 定义。所有 React Native 的核心组件都支持一个名为 style 的属性。...招用户喜欢的设计 Flutter 的设计方式使得开发者很容易创建自己的窗体,或定制已有的窗体。

    2.1K40

    如何在flutter中构建响应式布局(第五节)

    使用相同的代码库使您的应用程序适应如此多样的屏幕尺寸和像素密度始终是一个挑战。在 Flutter 中设计响应式布局没有硬性规定。在本文中,我将向您展示一些在设计此类布局时可以遵循的方法。...它可用于创建适应不同屏幕尺寸和尺寸的灵活且响应迅速的 UI 设计。ConstraintLayout 允许您根据与布局中其他视图的空间关系为每个视图指定位置和大小。...Fragment,您可以将 UI 逻辑提取到单独的组件中,以便在为大屏幕尺寸设计多窗格布局时,您不必单独定义逻辑。您可以重用您为每个片段定义的逻辑。...在 iOS 中,UISplitViewController以分层界面管理子视图控制器,用于控制多个视图控制器。现在,让我们继续讨论 Flutter。Flutter 引入了[ ?widgets的概念。...中创建了一个完全响应的应用程序。

    2.9K10

    Flutter vs React Native,谁才是跨平台应用开发的最佳利器?

    Flutter 的优势在于: 快速开发 Flutter 拥有热加载功能,只需几毫秒就能运行应用程序。它的自定义窗体功能也可以用来创建原生界面。...Flutter 中的每个窗体都由自己的属性,可以嵌套在其他组件中。窗体也能调用父组件的属性。 在 React Native 中,使用原生模块和用户界面组件只需桥接就可以。...但在 Flutter 中无法这样做,因为 Flutter 有自己的渲染引擎。 这里是 Flutter 窗体(https://flutter.io/widgets/)的一些例子。...14.React Native 中的样式 React Native 中的样式用 JavaScript 定义。所有 React Native 的核心组件都支持一个名为 style 的属性。...招用户喜欢的设计 Flutter 的设计方式使得开发者很容易创建自己的窗体,或定制已有的窗体。

    2.5K20

    《深入浅出Dart》Flutter实战之TODO应用

    现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 Flutter实战之TODO应用 在本篇文章中,我们将构建一个TODO应用,使用最新的Dart语法和Flutter框架...这个TODO应用将具备添加、编辑、删除任务,以及任务的状态管理等功能。让我们一步一步地构建这个TODO应用。 步骤 1:创建Flutter项目 首先,我们需要创建一个Flutter项目。...在lib/screens/todo_list_screen.dart中创建一个新的Dart文件,并添加以下代码: import 'package:flutter/material.dart'; import...在lib/screens/todo_edit_screen.dart中创建一个新的Dart文件,并添加以下代码: import 'package:flutter/material.dart'; import...在initState方法中,我们初始化了文本编辑器的控制器,并根据传入的任务初始化了相应的值。 在build方法中,我们使用Scaffold和Column来显示标题、描述和完成状态的输入字段。

    26220

    创建可维护和可测试的 Windows 窗体应用程序的 10 种方法(译)

    如果将这些区域中的每个区域的控件放入它们自己的容器中,那么你自己的生活就会变得更加轻松,而在 Windows 窗体中,最简单的方法是使用用户控件。...因此,如果你有一个资源管理器样式的应用程序,左侧是树视图,右侧是详细信息视图,则将 TreeView 放入其自己的 UserControl,并为每个可能的右侧视图创建一个 UserControl。...同样,如果你有选项卡控件,请为选项卡控件中的每个页面创建一个单独的 UserControl。 这样做不仅可以防止你的类变得难以管理,而且还可以调整大小和设置Tab 键顺序等,使任务变得更加简单。...用接口创建被动视图 一种特别有用的技术是使你创建的每个窗体和用户控件都实现一个视图接口。此接口应包含允许设置和检索视图中控件的状态和内容的属性。...使用命令模式 如果你的应用程序包含一个带有大量按钮供用户单击的工具栏,则命令模式可能非常适合。命令模式规定你为每个命令创建一个类。这有很大的好处,可以将你的代码分成小类,每个小类都有一个责任。

    1.3K10

    EDID编码详情

    显示出的效果是最佳效果吗?不仅如此,随便输出一个分辨率还有损坏显示器硬件的可能,这可太危险了。于是,EDID临危受命,担当起显示器和PC之前的传话筒。...它的使用是可选的。使用时,该字段的位顺序如下表3.6所示。将监视器的序列号表示为一个单独的描述符块中的ASCII字符串。当序列号在描述符块中表示为字符串时,则该字段的字节数不应为00h。...当bit7=0(模拟信号输入)时,其余的bit6-0定义如下: 当bit7=1(数字信号输入)时,其余的bit6-0定义如下: [6:1]:保留字段。...每个数字用长度为10位的二进制分数表示。在这个分数中,小数点(第9位)右边的位的值1表示2的幂为-1。最右边的位(位0)中的值为1表示提升到-10次方的值2。 高位(9:2)存储为单字节。...该为设置为1表示支持该时序。 38-53字节: 显示器的标准时序及定时。 该16个字节提供最多8个额外计时的标识,每个计时由一个从模式格式和刷新率派生的唯一2字节代码标识。

    1.2K10

    MR应知应会:MungeSumstats包

    请注意,为每个 SNP 估算样本量并不正确,只能作为最后的手段。 N 还可以通过为该字段传递其中之一或多个向量来输入“ldsc”、“sum”、“giant”或“metal”。...Sum 和整数值在输出中创建 N 列,而 Giant、metal 或 ldsc 创建 Neff 或有效样本大小。如果传递多个,则会指示用于推导它的公式。...log_folder_ind应存储包含所有过滤掉的 SNP 的日志文件(每个过滤器单独的文件)。数据以与生成的 sumstats 文件指定的相同格式输出。...imputation_ind 应该为每个插补步骤添加一列,以显示哪些 SNP 对不同字段具有插补值。这包括表示 SNP 等位基因翻转(翻转)的字段。...对于翻转值,这表示等位基因是否根据 MungeSumstats 从输入列标题中选择的 A1、A2 进行切换,因此可能与创建者的意图不符。请注意,这些列将出现在返回的格式化摘要统计信息中。

    2.5K11

    Excel编程周末速成班第21课:一个用户窗体示例

    示例要求将邮政编码字段中的数据输入限制为数字,这可以认为是数据验证的一种形式。...将每个控件的Value属性设置为空白字符串很简单。这段代码被放在名为ClearForm的过程中,如清单21-4所示。下面将此过程添加到窗体中。...清单21-6中显示了代码。注意,这三个事件过程中的每一个都调用了先前创建的ClearForm过程。在用户窗体中输入这里的代码,即可开始试运行该工程。...图21-3:运行程序输入地址 要点回顾 本课程引导你完成创建使用用户窗体进行数据输入的真实程序的完整过程。 在开始编程之前计划项目总是一个好主意。 数据验证是任何数据输入程序的重要组成部分。...可以在输入数据之后或输入数据时执行数据验证。 当你的代码将在程序的多个位置中使用时,将其放在单独的过程中。 自我测评 1.请说明使用用户窗体进行数据输入的两个好处。

    6.1K10

    Flutter为什么使用Dart?

    借助Flutter,我们希望使开发人员能够创建快速,流畅的用户体验。为了实现这一点,我们需要能够在每个动画帧中运行大量的最终开发人员代码。...虚拟机(VM)的概念变得很流行,它实际上只是一种模仿软件中的硬件机器的高级解释器。虚拟机可以更轻松地将语言移植到新的硬件平台。在这种情况下,VM的输入语言通常是中间语言。...统一布局 Dart的另一个好处是Flutter不会在您的程序和其他模板化或布局语言(例如JSX或XML)之间拆分布局,也不需要单独的可视化布局工具。...这是开发人员在题为“ 为什么本机应用程序开发人员应认真看待Flutter ” 的文章中写的。...” Flutter使用由Google创建的Dart语言,说实话,我不喜欢C#或JAVA之类的强类型语言,但我不知道Dart编写代码的方式为什么看起来有所不同。我写起来很舒服。

    1.5K20

    2019年最全的UI设计之输入字段剖析

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器。 今天,我想谈谈UI设计中最常用的一个设计元素 - 输入字段。输入字段允许用户在UI中输入文本。...输入字段的默认与禁用状态 不要将文本字段设计为与按钮类似 UI元素的视觉外观在解释其含义的过程中起着关键作用。一个物品的外观可以使用户了解他们如何与之交互。...不要让搜索看起来像按钮的输入字段 根据应用程序的UI设计,为容器选择对应的视觉样式 应该为容器使用圆角或方角吗?这个问题没有一个标准的答案。应该选择最适合你应用程序的视觉风格的产品。 2....此输入字段要求输入用户ID 3. 标签文本 标签文本用于通知用户文本字段请求的信息。每个文本字段都应该有一个标签。 清晰标签 标签的最终目的是帮助用户一目了然地了解所需的信息。...聚焦状态 你需要使用视觉效果突出显示活动字段。 当字段处于活动状态时,始终显示光标。光标应指示当前用户在该字段中的位置。它可以防止用户进行不必要的操作。 ?

    2.4K20
    领券