我们可以将两个对象绑定到 Blazor 应用程序中的单个 InputText 字段吗？

Question

我在这里有一个奇怪的要求，或者它对我来说有点扭曲 :D 我想将两个对象绑定到一个 InputText 字段。例如，我有如下输入文本：

               <div class="form-group col">
                    <label>Register Number</label>
                    <InputText @bind-Value="RegistrationNumber.Number" class="form-control"/>
                    <ValidationMessage For="@(() => RegistrationNumber.Number)" />
                </div>
                <div class="form-group col">
                    <label>VAT Number</label>
                    <InputText @bind-Value="RegistrationNumber.Number" class="form-control"/>
                    <ValidationMessage For="@(() => RegistrationNumber.Number)" />
                </div>

型号：

public class CompanyMetaData
    {
        public List<RegistrationNumber> RegistrationNumbers { get; set; }
    }

public class RegistrationNumber 
    {
        public string NumberDescription { get; set; } 

        public string Number { get; set; }

    }

正如您在此处看到的，InputText 的绑定值为 RegistrationNumber.Number 现在无论我在输入文本中输入什么，它都将存储在数据库中。但是有了这个，我必须存储硬编码的字符串值，即 RegistrationNumber.NumberDescription = "Company Register Number" for first input text,RegistrationNumber.NumberDescription = "VATNumber" for 2nd input text。我应该在 C# 端处理这个 (@code{}) 吗？希望我的问题很清楚。期待一个很好的 blazor 方式来做到这一点。提前致谢。

已编辑问题

     <div class="form-row">
       <div class="form-group col">
       <label>Register ID</label>
        <InputText @bind-Value="RegistrationNumber.registrationNumber" class="form-control" />
        <ValidationMessage For="@(() => RegistrationNumber.registrationNumber)" />
       </div>
     </div>
     <div class="form-row">
       <div class="form-group col">
       <label>VAT ID Number</label>
       <InputText @bind-Value="RegistrationNumber.registrationNumber" class="form-control" />
       <ValidationMessage For="@(() => RegistrationNumber.registrationNumber)" />
       </div>
     </div>
    
    @code
    {
     RegistrationNumber RegistrationNumber { get; set; } = new RegistrationNumber();
     public List<RegistrationNumber> ListRegisterNumber { get; set; } = new List<RegistrationNumber>();
    
      private void HandleValidSubmit()
            {
                
                RegistrationNumber.registrationNumberDescription = "Company ID Number";
                ListRegisterNumber.Add(RegistrationNumber);
 RegistrationNumber.registrationNumberDescription = "VATID Number";
                ListRegisterNumber.Add(RegistrationNumber);
            }
    }

我又试了一次，但这仍然对我没有帮助。我期待像下面这样的一些价值存储。请注意我没有遵循列表语法： ListRegisterNumber = [registrationNumberDescription :"Company ID Number", registerNumber=1234 & registrationNumberDescription :"VAT ID Number", registerNumber = 4567]

Answer 1

如果它是一个硬编码值，那么我想就不需要绑定了。将其存储为常量即可。

public class RegistrationNumber
{
    public const string NumberDescription = "Company Register Number";

    public string Number { get; set; }
}

Answer 2

以下代码片段说明了您应如何绑定到 RegistrationNumber 个对象的集合...

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

    <EditForm Model="@company" OnSubmit="@submitChanges">
       <DataAnnotationsValidator />
       <p>
        <InputText id="name" @bind-Value="company.Name" /><br />
        </p>
        @foreach (var registrationNumber in company.RegistrationNumbers)
       {
          <p>
            <InputText @bind-Value="registrationNumber.Number" />
          </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 {

        CompanyMetaData company;



        protected override void OnInitialized()
       {
           company= new CompanyMetaData ();

       }
       
        public class CompanyMetaData 
        {
           public string Name { get; set; } = "jeff";
           public List<RegistrationNumber> RegistrationNumbers { get; } = new 
                List<RegistrationNumber>() 
                    { new RegistrationNumber {
                           NumberDescription = "Company 
                           Register Number", Number = "123456" }};
          }

        public class RegistrationNumber 
        
            public string NumberDescription { get; set; } 

            public string Number { get; set; }

        }

    }

第 2 部分：更新

您不能实例化 RegistrationNumber 对象，并将 registrationNumber 字段绑定到两个不同的输入元素，就像您在此处所做的那样：

<InputText @bind-Value="RegistrationNumber.registrationNumber" class="form-control" />

并期望字段包含不同的值。同样，字段 registrationNumberDescription 将始终包含值“VATID Number”

我已经告诉你该怎么做了。你试过了吗？

这是我上面使用 foreach 循环的代码示例的最简单的工作代码。复制并测试代码，并尝试了解它如何解决您的问题。

@page "/"

<EditForm Model="company" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />

      <label>Company Name: </label>     
      <label>@company.Name</label>
       <div class="form-row">
       <div class="form-group col">
       <label>Register ID</label>
        <InputText @bind-Value="company.RegistrationNumbers[0].Number" class="form-control" />
        <ValidationMessage For="@(() => company.RegistrationNumbers[0].Number)" />
       </div>
     </div>

     <div class="form-row">
       <div class="form-group col">
       <label>VAT ID Number</label>
       <InputText @bind-Value="company.RegistrationNumbers[1].Number" class="form-control" />
       <ValidationMessage For="@(() => company.RegistrationNumbers[1].Number)" />
       </div>
     </div>
        <p>

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

        </p>
    </EditForm>

    @foreach(var item in company.RegistrationNumbers)
    {
        <div>@item.NumberDescription: @item.Number</div>
    }

    @code
    {

   
    CompanyMetaData company = new CompanyMetaData
    {
        Name = "Enet Studio",
        RegistrationNumbers = new List<RegistrationNumber> { new RegistrationNumber
                                { NumberDescription = "Company ID Number" },
                                new RegistrationNumber { NumberDescription = "VATID Number" } } 
    };

    
        public class CompanyMetaData
       {
           public string Name { get; set; }
           public List<RegistrationNumber> RegistrationNumbers { get; set; }
        
        }

public class RegistrationNumber 
    {
        public string NumberDescription { get; set; } 

        public string Number { get; set; }

    }

   

    private void HandleValidSubmit()
     {
         Console.WriteLine("Submit...");
     }

   }

Answer 3

Can we bind two objects to a single InputText field in Blazor app?

这是一个明确的问题，答案是肯定的，你可以。您问题中的剃须刀代码应该已经可以使用了。

But with this I have to store the hardcoded string value i.e. RegistrationNumber.NumberDescription = "Company Register Number" for first input text, ...

很不清楚。

@code 部分显示了一个未在其他任何地方使用的列表，我们缺少 <EditForm ...> 详细信息。他们一起可能会得出答案。

所以，完成问题。

我们可以将两个对象绑定到 Blazor 应用程序中的单个 InputText 字段吗？

Can we bind two objects to a single InputText field in Blazor app?

c#

razor

blazor

blazor-webassembly

第 2 部分：更新