CODEWITHSUNDEEP
c#htmlblazor
Joshua Duxbury
Joshua Duxbury

Reputation: 5260

Blazor List Of Strings Input Binding

I'm trying to display a list of strings and I want the user to be able to edit the list to make changes to the object but when I view the list after modifying the input fields the changes haven't been made.

How do I bind a list of strings? 

 @foreach (var message in UserMessageService.GetSomeData())
    {
    <tr>
        <td><input type="text" bind="@message.Username" value="@message.Username" onblur="SaveMessages"/></td>
        <td><input type="text" bind="@message.Message" value="@message.Message" onblur="SaveMessages"/></td>
    </tr>
    }

Upvotes: 2

Views: 4215

Answers (2)

Joshua Duxbury
Joshua Duxbury

Reputation: 5260

silly mistake on my part, the issue wasn't with my syntax. I made the mistake of binding to my service instead of a local variable so when I left focus it couldn't update and just retrieved from the service

I simply added the local variable below 

        @foreach (var message in dataVariable)
        {
        <tr>
            <td><input type="text" @bind="message.Username" /></td>
            <td><input type="text" @bind="message.Message" /></td>
        </tr>
        }

   @code {
    private List<someData> dataVariable;

    protected override void OnInitialized()
    {
        TableSeats = UserMessageService.GetSomeData();
    }
}

Upvotes: 0

dani herrera
dani herrera

Reputation: 51765

Use right Blazor syntax:

<input
type="text" @bind="@message.Message"/>

If you need to execute function on blur:

<input value="@message.Message"
     @onchange="@((ChangeEventArgs __e) =>  
     { message.Message  = __e.Value.ToString());
     SaveMessages(); })" />

More info: https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#data-binding

Upvotes: 3

Related Questions