Blazor - EditForm not updating variables with bind-Value?

Question

I'm pretty new to Blazor and I'm working on this little webapp which just logs form data into a JSON file (code below). However, the values for tmp.Cname and Cdate remain null when I submit the EditForm. Did I not use Model or bind-Value correctly? Thanks!!

@using System.Text.Json;
@page "/"

@code {
    LogObject tmp = new LogObject();
   
    public class LogObject{
        public string Date {get; set;}
        public string CDate {get; set;}
        public string CName {get; set;}
    }

    public void OnSubmit(){
        Console.WriteLine(tmp.CName + " at " + tmp.CDate);
    }
}

<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>

<EditForm Model="tmp" OnSubmit = "OnSubmit" FormName="sample">
    <InputText @bind-Value="tmp.CName" /><br />
    <InputText @bind-Value="tmp.CDate" /><br />
    <button type="submit">Submit</button>
</EditForm>

<p>@tmp.CName changed at @tmp.CDate logged at @tmp.Date</p>

Are you using .NET-8? If so have you added a @rendermode

RBee
– RBee

2024-06-21 19:51:18 +00:00
Commented Jun 21, 2024 at 19:51 — RBee
– RBee, Commented Jun 21, 2024 at 19:51

Brando Zhang · Accepted Answer · 2024-06-24 02:28:42Z

5

According to your description, it seems you are using the Blazor web app 8, if you are not set the render mode, it will use the static server render mode by default.

By using this mode, it will work as static content which will not modify the page after you click the submit button, it is not Interactive.

To solve this issue, you need set the render mode for it, you could set it as InteractiveServer, then you could find it works well.

More details, you could refer to below example and this article:

Add this line: @rendermode InteractiveServer

@page "/"
@rendermode InteractiveServer

@code {
    LogObject tmp = new LogObject();

    public class LogObject
    {
        public string Date { get; set; }
        public string CDate { get; set; }
        public string CName { get; set; }
    }

    public void OnSubmit()
    {
        Console.WriteLine(tmp.CName + " at " + tmp.CDate);
    }
}

<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>

<EditForm Model="tmp" OnSubmit="OnSubmit" FormName="sample">
    <InputText @bind-Value="tmp.CName" /><br />
    <InputText @bind-Value="tmp.CDate" /><br />
    <button type="submit">Submit</button>
</EditForm>

<p>@tmp.CName changed at @tmp.CDate logged at @tmp.Date</p>

Result:

answered Jun 24, 2024 at 2:28

Brando Zhang

29.1k6 gold badges42 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vinu Philip Nov 20 at 3:19

"Adding @rendermode InteractiveServer" worked for me, and the 2-way binding started working.

emorning · Accepted Answer · 2024-06-21 23:29:41Z

0

Depending on the render mode that you're using, you may need a [SupplyParameterFromForm] attribute on your model...

[SupplyParameterFromForm(FormName = "sample")]
LogObject tmp = new LogObject();

answered Jun 21, 2024 at 23:29

emorning

263 bronze badges

Comments

Roberto Oropeza · Accepted Answer · 2024-07-06 23:29:58Z

0

I had the same problem, I did what Brando Zhang suggested of adding @rendermode InteractiveServer and the problem was solved

answered Jul 6, 2024 at 23:29

Roberto Oropeza

131 silver badge6 bronze badges

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

LW001 Over a year ago

Unless you have done something different or have something to add to the existing answer, please upvote that answer once you have enough reputation instead of posting a new one.

Collectives™ on Stack Overflow

Blazor - EditForm not updating variables with bind-Value?

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related