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

Question

I am here with a weird requirement or may be it's kinda twisted for me :D I want to bind two objects to a single InputText field. For example i have a input text like below:

               <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>

Model:

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

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

        public string Number { get; set; }

    }

As you can see here InputText has a bind-value as RegistrationNumber.Number Now whatever I will enter her in the input Text it will be stored in DB. But with this I have to store the hardcoded string value i.e. RegistrationNumber.NumberDescription = "Company Register Number" for first input text,RegistrationNumber.NumberDescription = "VATNumber" for 2nd input text . Should I handle this in C# side (@code{})? Hope my question is clear. Looking forward to a nice blazor way to do it. Thanks in advance.

EDITED QUESTION

     <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);
            }
    }

I tried something again but this still doesnt help me. I am expecting some value storing like below. Please note i am not following List syntax: ListRegisterNumber = [registrationNumberDescription :"Company ID Number", registerNumber=1234 & registrationNumberDescription :"VAT ID Number", registerNumber = 4567]

score 1 · Answer 1 · answered Jul 14 '21 at 16:47

1

If it's a hard-coded value, then I would guess there's no need for binding. Just store it as a constant.

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

    public string Number { get; set; }
}

answered Jul 14 '21 at 16:47

Neil W

7,670
3
28
41

Sorry my bad, I should have added the extended code & more details. In the process of making the question simple i missed out on main point. RegistrationNumber class is a List. Please check the edited question – Shrey Jul 14 '21 at 16:53
The answer to your question is No, you cannot bind multiple values from a single inputtext. Also, the code in your question is not binding to separate items from the list. You might to look at this for some guidance: https://stackoverflow.com/questions/60416018/how-to-bind-to-element-from-collection-list-in-blazor – Neil W Jul 14 '21 at 17:04

enet · Accepted Answer · 2021-07-16T12:16:08.530

The following code snippet illustrates how you should bind to a collection of RegistrationNumber objects...

 @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; }

        }

    }

Part 2: Update

You can't instantiate a RegistrationNumber object, and bind the registrationNumber field to two different input elements, as you do here:

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

and expect the fields to contain different values. Similarly, the field registrationNumberDescription will always contain the value "VATID Number"

I've already told you what to do. Did you try it ?

Here's a simplest working code of my code sample above the use the foreach loop. Copy and test the code, and try to understand how it solve your issue.

@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...");
     }

   }

This solution is very confusing to me. Only thing helps me here is a foreach for input text. May be you meant using foreach I am binding values twice . — Shrey, Jul 16 '21 at 09:04
Good morning, I've almost deleted my answer. This solution shows how to bind to a collection of objects. So far, you've been used to bind to a single object, but in your case, the binding should be applied to a collection. Please, show your newly written code, indicate where are the issues, and tell me what you want to achieve. Please, be quick, as I usually delete my answered if ignored — enet, Jul 16 '21 at 09:56
Very well answered. The razor code & List value assigning code is what i needed. Thanks a lot. Do you want to clear your code before I accept it as answer? — Shrey, Jul 16 '21 at 14:14
You can accept it as is, as the second code sample is a simplified version of the first one. — enet, Jul 16 '21 at 14:25

score 0 · Answer 3 · answered Jul 16 '21 at 11:10

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

This is a clear question and the answer is Yes, you can. The razor code in your question should work already.

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

is very unclear.

The @code section shows a list that isn't used anywhere else, and we are missing the <EditForm ...> details. Together they might lead to an answer.

So, complete the question.

The OP is confused but asking a very legitimate question. Answering with Yes without demonstrating how to do it is not helpful. — enet, Jul 16 '21 at 12:00

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

3 Answers3

Part 2: Update