Blazor EditForm 从列表绑定

2024-06-24

我正在尝试制作一个页面来编辑客户数据。

客户对象有一个电话号码(字符串)列表,因为大多数人都有固定电话和手机。 我似乎找不到一种方法将其放入编辑表单中。我尝试使用 foreach 循环,但它无法绑定到此。 我还尝试在循环中使用本地副本并绑定到它。这可行,但按下提交按钮后我无法检索更改。 我究竟做错了什么 ?执行此操作的正确方法是什么?我似乎找不到任何涵盖此内容的教程。

我已经将我的页面重新创建到最少,以执行相同的操作:

这是我的客户课程

public class Customer
    {
        public string Name { get; set; }
        // arbitrary extra fields
        public List<string> phoneNumber { get; set; }
    }
}

 public class CustomerService
    {
        Customer jeff;

        public CustomerService()
        {
            jeff = new Customer
            {
                Name = "Jeff",
                phoneNumber = new List<string> { "123456", "654321" },
            };
        }

        public Customer getCustomer()
        {
   
            return jeff;
        }

        public void setCustomer(Customer cust)
        {
            jeff = cust;
        }
    }

还有我的页面

<EditForm Model="@customer" OnSubmit="@submitChanges">

    <InputText id="name" @bind-Value="@customer.Name" /><br/>
    <!-- How do i link the multiple phonenumbers-->

    @foreach(string phone in customer.phoneNumber)
    {
        //this does not compile
        //<InputText @bind-Value="@phone"/>

        //this compiles but i can't find how to acces the data afterward ???
        string temp = phone;
        <InputText @bind-Value="@temp"/>

    }

    @for(int i=0;i<customer.phoneNumber.Count();i++)
    {
        //this compiles but chrashed at page load
        // <InputText @bind-Value="@customer.phoneNumer[i]"/>
    }


    <button type="submit">submit</button>
      
</EditForm>
代码部分
@code {        

    Customer customer;
   
    protected override void OnInitialized()
    {
        customer = _data.getCustomer();           
    }

    private void submitChanges()
    {
        _data.setCustomer(customer);
    }
}

@Wolf,今天我读到了对象图数据注释验证器 https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1#nested-models-collection-types-and-complex-types它用来代替数据注释验证器成分

验证绑定模型的整个对象图,包括 集合类型和复杂类型属性

强调包括收藏。因此,我搜索了在 EditForm 中实现集合的示例,但找不到。经过一番努力,我成功地做到了这一点。这是代码:

@page "/"
@using Microsoft.AspNetCore.Components.Forms
@using System.ComponentModel.DataAnnotations;

<EditForm Model="@customer" OnSubmit="@submitChanges">
    <DataAnnotationsValidator />
    <p>
        <InputText id="name" @bind-Value="customer.Name" /><br />
    </p>
    @foreach (var phone in customer.phones)
    {
        <p>
            <InputText @bind-Value="phone.PhoneNumber" /> 
        </p>

     }

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

    </EditForm>

 <div>
    <p>Edit  customer</p>

    <p>@customer.Name</p>
    @foreach (var phone in customer.phones)
    {
        <p>@phone.PhoneNumber</p>

    }

</div>
@code {

Customer customer;



protected override void OnInitialized()
{
    customer = new Customer();

}
private void submitChanges()
{
    // _data.setCustomer(customer);
}

public class Customer
{
    public string Name { get; set; } = "jeff";
    //[ValidateComplexType]
    public List<Phone> phones { get; } = new List<Phone>() { new Phone 
     {PhoneNumber = "123456" }, new Phone {PhoneNumber = "654321" }};
}

public class Phone
{
    public string PhoneNumber { get; set; }
}

}

希望这可以帮助...

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

Blazor EditForm 从列表绑定 的相关文章

  • 发送用户注册密码,django-allauth

    我在 django 应用程序上使用 django alluth 进行身份验证 注册 我需要创建一个自定义注册表单 其中只有一个字段 电子邮件 密码将在服务器上生成 这是我创建的表格 from django import forms from
  • 在 blazor 中添加全局使用指令

    命名空间 MyClassLibrary Models 中不存在类型或命名空间名称 XXX 是否缺少程序集引用 该错误参考此 BlazorProject MyPager azor g cs 在这种情况下我得到了这个错误 创建了一个类型的文件
  • PHP 电子邮件表单每次刷新页面时都会发送电子邮件

    我的 php 电子邮件每次刷新页面时都会发送电子邮件 例如 用户正在填写表单并使用发送按钮发送 这一切都很好 但如果他们刷新页面 它会再次发送包含所有相同表单信息的电子邮件 我相信这是问题代码 但不知道它是什么 require once c
  • 如何在 Express (NodeJS) 中验证和处理表单

    Express 是否有首选的表单处理和验证库 我真的在寻找与 Django 表单中类似的抽象级别 即模板中的验证和错误报告 如果可以在客户端使用相同的验证 那就太好了 有人用过或者写过什么好东西吗 看起来有一个模块位于https githu
  • 让登录更安全

    我已使用此代码进行管理员登录 仅当用户输入正确的用户名和密码时才应打开loginhome php 但后来我意识到这根本不安全 任何人都可以直接访问 mywebsite loginhome php 而无需登录 注销后 可以使用后退按钮打开 l
  • PHP 如何判断用户是否按下了 Enter 键或 Submit 按钮?

    我遇到的问题是我在一个表单中有多个提交输入 每个提交输入都有不同的值 我更愿意将它们保留为提交 Whenever the user presses Enter it is as though the topmost submit input
  • 使用 swiftmailer 向多个收件人发送电子邮件

    我正在尝试在我的项目中使用 swiftmailer 以便我可以向多个用户发送 html 新闻通讯 我已经彻底搜索过 但我得到的一切从未对我有用 我想在表单输入字段中粘贴多个收件人 以逗号分隔 然后将 html 电子邮件发送给他们 我将收件人
  • 提交前验证表单(比检查空字段更复杂)

    我有一个包含时间输入的表单 具体来说 开放时间和结束时间 当按下提交按钮时 它会转到一个 php 页面 其中这些输入将添加到数据库中 在允许提交表单之前我想检查一些事情 例如 我想确保开始时间早于 小于 结束时间 这是表格 Opens
  • Django 接受 AM/PM 作为表单输入

    我试图弄清楚如何使用 DateTime 字段在 Django 中接受 am pm 作为时间格式 但我遇到了一些麻烦 我尝试在 forms py 文件中这样设置 pickup date time from DateTimeField inpu
  • 屏幕阅读器应读取 aria-label 并忽略带有 for 属性的标签

    我目前正在制作一个具有适当残疾人通道的 html 表单 我有用带有 for 属性的标签标记的输入 但现在我希望一个输入为屏幕阅读器获取与标签显示不同的文本 div class cc form w50 t5 div
  • 如果表单字段尚未修改,如何禁用 jQuery 中的提交按钮?

    我有一个 HTML 表单 其中包含文本字段 复选框 单选按钮和提交按钮 我希望仅在修改字段内容时才启用提交按钮 现在这里有一个问题 如果用户将字段内容修改回原始值 则应再次禁用表单按钮 原始字段值 foo gt 提交按钮被禁用 用户将字段值
  • blazor 如何检测授权/未授权

    我正在定制AuthenticationStateProvider在 Blazor 应用程序中进行测试 我担心新类不会具有与 AuthenticationStateProvider 类相同的功能 因为我不确定 AuthenticationSt
  • 当用户单击其他按钮时,如何取消选择整组单选按钮?

    假设我有一个表格 人们可以选择他们想要什么样的宠物 并且可以选择指定品种和年龄 如下所示
  • 没有实例的 Django Formset

    In this http docs djangoproject com en dev topics forms modelforms inline formsetsDjango Doc 解释了如何创建一个表单集 该表单集允许您编辑属于特定作
  • symfony2 选择单选框的默认值

    我的项目是使用 Silex 和 Symfony 组件 即表单组件 编写的 我尝试创建一组从类中构建的单选按钮 并且我想预先选择其中一个单选按钮 我创建这样的表格 form app form factory gt createBuilder
  • Chrome 不渲染
    标签,FF 渲染

    我有一个非常烦人的问题 我的网站有一个表单 可以在 Firefox 中运行 但不能在 IE 或 Chrome 中运行 它是用 WordPress 的 Gravity Forms 制作的 但这可能与该问题无关 因为另一个表单插件也出现了同样的
  • 翻译即时消息

    如果表单成功 我正在尝试翻译我发送的即时消息 正常的请求是这样的 request gt getSession gt getFlashBag gt add notice Your E Mail has been sent 所以我尝试使用以下变
  • django:将表单字段添加到从另一个表生成的表单中

    我有这张表产品 size color etc 和另一张桌子图片 产品编号 picture 我已经从产品表生成了表单 但我还需要在该字段中向该产品添加图片 是否可以在产品生成的表单中添加图片字段 提前致谢 您可以在同一个表格中包含多个表格
  • 有没有办法阻止 Firefox 将缓存的电子邮件和密码放在我的注册表单上?

    我有一个提供注册和修改帐户表格的网站 当用户导航到这些页面之一时 Firefox 会填写表单的某些区域 它正在填写
  • 正确使用OnAfterRender?

    我有一个项目 我经常使用 OnAfterRender 来调用子组件上的方法 作为一个简单的示例 假设我有两个 Blazor 组件 Counter razor 和 CounterParent razor Counter page counte

随机推荐

  • 在 WIN32 与 WIN64 中配置浮点单元上下文

    我正在尝试编写一个未处理的异常过滤器 请参阅 SetUnhandledExceptionFilter 以与 Windows SEH 一起使用来报告无效的浮点操作 我想捕获异常 打印堆栈跟踪 然后禁用浮点异常并使用生成的非有限或非数字值恢复执
  • 新门户上的 SQL Azure 防火墙规则

    我们使用 SQL Azure 已经大约一年了 为了直接访问Azure之外的服务器 您需要在SQL Azure中添加防火墙规则 那挺好的 旧门户有办法做到这一点 http blogs msdn com b windowsazure archi
  • 更改 Google Play 服务 AccountPicker 对话框的样式

    我正在显示 AccountPicker 对话框Google Play Services用这个代码 String accountTypes new String com google Intent intent AccountPicker n
  • C++ 中带有空尖括号的 template<> 是什么意思?

    template lt gt class A some class data 这种代码我见过很多次了 有什么用template lt gt 在上面的代码中 什么情况下我们需要强制使用它 template lt gt 告诉编译器接下来是模板专
  • 实现c#超时

    使用这样的 while 循环是不好的做法吗 也许使用秒表更好 或者这个解决方案可能有一些陷阱 public void DoWork do some preparation DateTime startTime DateTime Now in
  • C# 中的线程

    如何在 C 中使用线程调用带有两个参数的函数 我必须从另一个函数调用 StartDNIThread string storeID string queryObject 我必须传递两个值 两者都是字符串 您的选择是 将参数封装在一个新类中 并
  • 如何始终将属性附加到 Laravel Eloquent 模型?

    我想知道如何始终将一些数据附加到 Eloquent 模型中 而不需要询问它 例如 在获取帖子表单数据库时 我想将每个用户的用户信息附加为 id 1 title My Post Title body Some text created at
  • 为什么 bash for 循环出错?

    我正在尝试使用 for 循环运行以下代码 但出现语法错误 请帮忙 输入格式 输入的第一行包含一个整数N 表示整数的个数 下一行包含 N 个空格分隔的整数 它们构成数组 A read n sum 0 for i 1 i lt n i do r
  • 为什么这段代码总是产生输出为“?”

    众所周知 java遵循unicode系统 支持多种语言的所有字母表 我搜索发现 的Unicode值为2309 的Unicode值为2310 它们是DEVANAGRI语言的字母 我写的代码是这样的 class Test public stat
  • 如何将 python csv.DictReader 与二进制文件一起使用? (针对babel自定义提取方法)

    我正在尝试为 babel 编写一个自定义提取方法 以从 csv 文件中的特定列中提取字符串 我按照文档进行操作here http babel pocoo org en latest messages html writing extract
  • ModuleNotFoundError:没有名为“schedule”的模块

    我有导入时间表的Python程序 import schedule 在开头 使用 python3 命令执行代码没有问题 但从其他 python 文件启动它call sudo python3 ProgramWithSchedule py she
  • 备用 Couchbase UI [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有谁知道除了安装 Couchbase 时提供的官方用户界面之外是否还有其他 Couchbase 用户界面
  • 更新 MongoDB 中精确元素数组中的字段

    我有一个结构如下的文档 id 43434 heroes nickname test items nickname test2 items Can I set的第二个元素items数组中嵌入对象的数组heros with nickname t
  • Git分支切换不会改变代码文件夹文件

    这是后续this https stackoverflow com questions 9406651 code base for git master feature branch问题 我使用克隆了远程主项目文件夹git clone ema
  • 将 NSString 分成行(以适合所需的宽度)

    我正在尝试将 NSString 分成几行以适合所需的宽度 因为它会发生在内部 sizeWithFont constrainedToSize 有没有比猜测中断发生在哪里更好的方法呢 sizeWithFont If NSLayoutManage
  • Python 在列表列表中查找值

    最近我必须找到某个列表中的某些内容 我使用了 def findPoint haystack needle haystack 1 2 3 4 5 6 7 8 9 for x in range len haystack if needle in
  • 从 SERVICE 执行 COMPONENT 方法

    我正在尝试执行一个组件method from a 服务方式 我看到了另外 2 个线程 Link1 如何从服务调用组件方法 https stackoverflow com questions 40788458 how to call comp
  • Vuetify 连接 v-select 的 item-text 中的两个字段

    有没有办法在 v select 的项目文本字段中将两个字段连接在一起 我让它适用于下拉列表值 但可见条目不显示这两个字段 问题出在这里 item text data item name data item group Code
  • MageUI.exe 删除 CompatibleFrameworks 元素

    我们使用 MageUI exe 手动创建不同版本的 ClickOnce 部署 以进行开发 测试和生产 我们改变出版商以便使程序图标出现在 开始 菜单的单独文件夹中 我们使用MageUI exe版本适用于 Windows 7 和 NET Fr
  • Blazor EditForm 从列表绑定

    我正在尝试制作一个页面来编辑客户数据 客户对象有一个电话号码 字符串 列表 因为大多数人都有固定电话和手机 我似乎找不到一种方法将其放入编辑表单中 我尝试使用 foreach 循环 但它无法绑定到此 我还尝试在循环中使用本地副本并绑定到它