Blazor binding input value not working on button click

Question

I am using Blazor server side to do subscribe to a newsletter. When I press the subscribe button, I see that the system has not bound the EmailAddress to the user entered email address. What am I missing?

@inherits InstaTranscribeServerSide.Layouts.SubscribeToNewsletterComponent

<div class="container">
      <form class="mt-4">            
            <input type="email" name="email" placeholder="Enter your email address" text="@EmailAddress">
              <button type="button" @onclick="SubscribeToNewsletterClick">
              </button>
      </form>
</div>

public class SubscribeToNewsletterComponent : InstaTranscribeComponentBase
  {
    [Inject] protected ILogger<SubscribeToNewsletter> logger { get; set; }
    protected string EmailAddress { get; set; } = string.Empty;
    protected async Task SubscribeToNewsletterClick()
    {
      try
      {
        await this.EmailSender.AddUpdateContactAsync(EmailAddress);
        await JSRuntime.NotifySuccess($"You have been subscribed to our newsletter.");
      }
      catch (Exception exception)
      {
        await JSRuntime.NotifyError($"There was an error subscribing you to our newsletter.");
      }
    }
    protected override async Task OnInitializedAsync()
    {      
    }
}

screenshot showing emailaddress is blank:

screenshot showing emailaddress entered by user:

Khashayar Pakkhesal · Accepted Answer · 2021-11-16 05:42:15Z

1

try using @bind-value="EmailAddress" this is how two-way data binding works in blazor you can also use value="@EmailAddress" just for one way and you can always get the input as reference and access it's properties

answered Nov 16, 2021 at 5:42

Khashayar Pakkhesal

5443 silver badges15 bronze badges

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

2 Comments

Ajit Goel Over a year ago

The solution above does not work.

Ajit Goel Over a year ago

Changing to @bind-value="@EmailAddress" worked. Thank you @khashayarPakkhesal

MrC aka Shaun Curtis · Accepted Answer · 2021-11-17 08:12:45Z

1

Your page looks a little "un-Blazor" like. FYI here's a fairly classic Blazor version of your page.

It uses the Blazor EditForm components and an in-page status display.

@page "/"
<h3>Subscribe To My Site</h3>
<EditForm EditContext=this.editContext OnSubmit=this.SubmitForm>
    <div class="col">
        <InputText class="form-control" typeof="email" @bind-Value=this.model.Email placeholder="Enter your email address" />
    </div>
    <div class="col m-2 p-2 text-end">
    <button type="submit" class="btn btn-primary">Subscribe</button>
    </div>
</EditForm>
@if (this.isMessage)
{
    <div class="m-2">
        <div class="alert @this.alertCss">@this.message</div>
    </div>
}

@code {
    private NewsLetterCredentials model = new NewsLetterCredentials();

    private EditContext? editContext;

    private string message = string.Empty;
    private bool isMessage => !string.IsNullOrWhiteSpace(message);
    private string alertCss => this.success ? "alert-success" : "alert-danger";
    private bool success = true;

    protected override void OnInitialized()
        => this.editContext = new EditContext(model);

    private async Task SubmitForm()
    {
        await Task.Delay(200);
        // emulate save to database
        this.success = !this.success;
        this.message = this.success
            ? "Subscribed"
            : "Error Subscribing";

    }

    public class NewsLetterCredentials
    {
        public string Email { get; set; } = string.Empty;
    }
}

edited Nov 17, 2021 at 8:12

answered Nov 16, 2021 at 9:39

MrC aka Shaun Curtis

32.4k3 gold badges27 silver badges56 bronze badges

5 Comments

enet Over a year ago

[Very polite] Your button element is missing the type="submit" attribute. Incidentally, I don't see any reason to use the Forms element here, and I guess that the form element is applied here without giving it too much thought, as no post request is implied, and in any case, the form as is cannot be summitted, because the type attribute of the button element is set to "button"

enet Over a year ago

Voted you up ....

MrC aka Shaun Curtis Over a year ago

@enet . You don't actually need to set the button type - the default is submit not button within a form context. Run the code and see.

enet Over a year ago

Yes, you're right, which is why I've mentioned that the code by the asker won't result in HTTP post request as the type attribute is set to button. Still, it is important to make one's intention clear by adding type="submit" to a form. Minimalism is bad, and the one introduced in Net 6.0 is horrible and may lead to many issues and misunderstandings. See this question to how minimalism works for folks: stackoverflow.com/q/69970525/6152891

MrC aka Shaun Curtis Over a year ago

I normally adhere to that practice. As I've quoted to people before, "Image the chaos if MS changed the default for bool to true!". So it was actually a bit of an oversight on my behalf, which worked when I compiled and ran the code (but didn't review it later) so I missed doing it correctly. I've updated the answer.

Collectives™ on Stack Overflow

Blazor binding input value not working on button click

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related