Blazor Editform 更改事件

2023-12-01

我希望在 blazor editform 中有一个 InputSelect ,它绑定到模型值,并且还有一个 onchange 事件,该事件根据新值更改模型中的其他属性。

绑定到 @bind-Value 和 @onchange 不起作用(我猜测是因为绑定值同时使用输入的值和值更改属性。

我可以绑定到 oninput,但我想知道是否有更好的方法来做到这一点。

<InputSelect id="inputPeriod" name="inputPeriod" class="form-control" @bind-Value="model.Period" @oninput="periodChanged">


protected void periodChanged(ChangeEventArgs e)
        {}

我可以像这样绑定到 oninput

但理想情况下,我想在模型属性更新后绑定到 @onchange 事件,或者知道最佳实践是什么。如果不使用绑定值,模型验证将无法工作,因此我能想到的唯一替代方法是让更改事件在模型的属性内部工作,但这似乎是错误的


这是一个愚蠢的示例,您必须输入您的名字,然后选择您的宠物,结果是以您亲爱的宠物的名字重命名您。该示例描述了当字段发生变化时如何操作模型:

<EditForm EditContext="@EditContext">
<DataAnnotationsValidator />

<div class="form-group">
    <label for="name">Enter your Name: </label>
    <InputText Id="name" Class="form-control" @bind-Value="@person.Name"></InputText>
    <ValidationMessage For="@(() => person.Name)" />

</div>
<div class="form-group">
    <label for="body">Select your pet: </label>
    <InputSelect @bind-Value="@person.Pet">
        <option value="Cat">Cat</option>
        <option value="Dog">Dog</option>
        <option value="Horse">Horse</option>
        <option value="Lion">Lion</option>
    </InputSelect>
     <ValidationMessage For="@(() => person.Pet)" />
</div>

<p>
    <button type="submit">Submit</button>
</p>
</EditForm>


 @code
 {
    private EditContext EditContext;
    private Person person = new Person();


    protected override void OnInitialized()
    {
        EditContext = new EditContext(person);
        EditContext.OnFieldChanged += EditContext_OnFieldChanged;

        base.OnInitialized();
    }

    // Note: The OnFieldChanged event is raised for each field in the model
    private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
    {
        if (e.FieldIdentifier.FieldName == "Pet")
        {

            person.Name = person.Pet;

        }
    }


    public class Person
    {
        public string ID { get; set; }
        public string Name { get; set; }
        public string Pet { get; set; }
    }
}

我能想到的唯一替代方法是让更改事件在我的模型中的属性内工作,但这似乎是错误的

一点也不...

模型不需要实现 INotifyPropertyChanged,但如果需要,您可以轻松地将其连接到 EditContext。然后,您无需使用内置的 Input* 组件 - 您可以绑定到常规 HTML 元素,并且仍然可以获得修改通知。这为 UI 的呈现方式提供了更大的灵活性,但代价是模型类中的复杂性和样板代码变得更加复杂。

希望这可以帮助...

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Blazor Editform 更改事件 的相关文章

随机推荐

  • 使用 php 向 Google Cloud Messaging 发送通知会出现未经授权的错误 401

    在搜索有关如何使用 GCM 但使用 PHP 而不是 servlet 发送通知的一些信息时 我发现了以下内容 GCM 与 PHP 谷歌云消息传递 我测试了这些问题的回答的工作代码 我还为浏览器应用程序创建了一个密钥 带有引用者 并且我授予了该
  • Haskell 中的递减范围

    我对 Haskell 很陌生 有人可以解释一下为什么定义这样的列表会返回空列表 ghci gt let myList 10 1 ghci gt myList 然而这工作正常 ghci gt let myList 10 9 1 ghci gt
  • Go中的浮点运算

    go 中的示例代码如下 package main import fmt func mult32 a b float32 float32 return a b func mult64 a b float64 float64 return a
  • Android 分享意图中的 Instagram 选项

    我正在开发一个应用程序 它将在不同的社交网站上共享内容 问题是我在分享意图中看不到 Instagram 选项 我可以看到蓝牙 邮件 消息等 但看不到 Instagram 我的设备上安装了 Instagram 应用程序 谁能告诉我这是什么问题
  • 对用德语 Fraktur 编写的 5800+ PDF 进行批量 OCR

    我想批量OCR约5800PDF 由我上一个问题中的每页 2 到 6 页组成here 在 Mac 上使用开源命令行工具 这次冒险的主要目的是我想从所有这些文本中检索尽可能可靠的名字 姓氏最重要 PDF Here是一个问题的示例 此时 我不知道
  • Nuxtjs Auth 模块无法在中间件中工作

    您好 我在 StackOverFlow 上发现了一个与我类似的老问题 但没有答案 nuxtjs auth axios 不发送 cookie 同样在 GitHub 上 没有有效的解决方案 https github com nuxt commu
  • 内存中的文件*(无磁盘访问)

    我们有接受 FILE CImg 的库 出于性能原因 我们希望处理内存中已有的数据而不访问磁盘 目标平台是 Windows 不幸的是它不支持 fmemopen 和 funopen char buf new char sz FILE fp fo
  • 在 Tomcat 7 中访问 Jersey 应用程序时出现 404

    我是 Web 开发领域的新手 我正在努力使用 jersey 创建一个简单的 Rest Web 服务 打包为独立的 war 文件 部署在 tomcat 7 上 我已经遵循了这个教程为了创建简单的 hello world 安静的 Web 服务
  • 我可以获得当前运行的java可执行文件的路径吗?

    假设我想从命令行运行一个java程序 我使用这个命令 myExes java java exe AJavaProgram 如您所见 java exe 不在我的路径中 因此我手动运行它 而不是简单地使用命令java AJavaProgram
  • 在 Windows 窗体控件中调整大小以及窗体大小调整

    我的 C Windows 窗体应用程序中有一些控件 组框 表格 gridview 等 我想根据屏幕宽度 高度缩放它们 例如 屏幕的起始分辨率为 640x480 然后最大化到 1920x1200 我希望能够增加控件的宽度 高度 以便在调整窗口
  • 将指针分配给使用 malloc 保留的块

    基于这个答案 https stackoverflow com a 19765782 1606345 include
  • 如何在iOS中注册一个在指定时间提醒应用程序的事件

    我需要每晚凌晨 1 点或每两周启动一次同步 我将如何在 iOS 中实现这一目标 iOS 中有没有一种方法可以让我的应用程序在此时提醒我 并且应该在指定的特定时间提醒我的应用程序 后台获取是操作系统提供的机会 iOS 7 及以上版本 到请求在
  • 为什么无法更改 css 中的内容?

    CSS2 1伪选择器如 after and before允许向页面添加文本内容 例如 CSS p after content Batman HTML p Na Na Na Na Na Na p 浏览器中的输出 Na Na Na Na Na
  • 了解 Cassandra 消息延迟指标

    我试图了解如何使用org apache cassandra metrics type Messaging公制 我设置了 3 个数据中心 每个数据中心 1 个节点 当我测量指标时 对于每个节点 我获得 2 个跨数据中心指标和 1 个跨节点延迟
  • 为什么主题函数没有将更改应用于 ggplot?

    我想更改 y 轴描述的文本大小并将绘图标题居中 主题函数中编码的所有内容都没有应用于我的图表 哪里有问题 finalchart ggplot euall aes day cumulative cases of 14 days per 100
  • 另一个针对 excel 2007 的优化宏 vba 代码。该代码是我的数据的一种转置器

    您好 这段代码最初不是由我完成的 这里有一些事情我不太明白 我已经对我的同事代码进行了一些修改以适应我的数据并且它有效 但太慢了 当我有 4000 kb 的 Excel 文件时 它可能会完全冻结 我已经检查过 当这个转置器运行时和之后 它仍
  • 如何使用curl 和 GraphQL updateIssueComment 突变更新 Github 中的问题或 PR 评论

    我想更新 Github PR 或问题中的评论 但我发现很难找到有效的示例 这就是为什么我问这个问题 我自己来回答 希望其他人可以使用这个 以下代码片段将使用 GraphQL 突变和curl 更新问题或 PR 评论 确保更换
  • C++ 模块到底是什么?

    我一直在跟踪 C 标准化并遇到了 C 模块的想法 我找不到关于它的好文章 到底是关于什么的 动机 简单的答案是 C 模块就像header那也是一个翻译单位 它就像一个标头 您可以使用它 与import 这是一个新的上下文关键字 来访问库中的
  • 如何从 ResourceDictionary 引用 BindingProxy 实例

    任何 wpf 程序员迟早都会开始使用绑定代理 我试图通过将一些资源移动到单独的资源字典中来拆分 xaml 我的问题是资源包含对BindingProxy 我该如何处理这种情况 举个例子 假设有一个资源BindingProxy这是在某处使用的
  • Blazor Editform 更改事件

    我希望在 blazor editform 中有一个 InputSelect 它绑定到模型值 并且还有一个 onchange 事件 该事件根据新值更改模型中的其他属性 绑定到 bind Value 和 onchange 不起作用 我猜测是因为