OK I'm new to Blazor and I'm trying to change the value set to an InputSelect control. When I change the value, it resets it back to what it was before I changed it. Here is my code:

@page "/movies/edit"
@rendermode InteractiveServer
@using Microsoft.EntityFrameworkCore
@using BlazorWebAppMovies.Models
@using BlazorWebAppMovies.Data
@inject IDbContextFactory<BlazorWebAppMovies.Data.BlazorWebAppMoviesContext> DbFactory
@inject NavigationManager NavigationManager

<PageTitle>Edit</PageTitle>

<h1>Edit</h1>

<h2>Movie</h2>
<hr />
@if (Movie is null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="row">
        <div class="col-md-4">
            <EditForm method="post" Model="Movie" OnValidSubmit="UpdateMovie" FormName="edit" Enhance>
                <DataAnnotationsValidator />
                <ValidationSummary role="alert"/>
                <input type="hidden" name="Movie.Id" value="@Movie.Id" />
                <div class="mb-3">
                    <label for="title" class="form-label">Title:</label>
                    <InputText id="title" @bind-Value="Movie.Title" class="form-control" />
                    <ValidationMessage For="() => Movie.Title" class="text-danger" />
                </div>
                <div class="mb-3">
                    <label for="releasedate" class="form-label">Release Date:</label>
                    <InputDate id="releasedate" @bind-Value="Movie.ReleaseDate" class="form-control" />
                    <ValidationMessage For="() => Movie.ReleaseDate" class="text-danger" />
                </div>
                <div class="mb-3">
                    <label for="genre" class="form-label">Genre:</label>
                    <InputText id="genre" @bind-Value="Movie.Genre" class="form-control" />
                    <ValidationMessage For="() => Movie.Genre" class="text-danger" />
                </div>
                <div class="mb-3">
                    <label for="price" class="form-label">Price:</label>
                    <InputNumber id="price" @bind-Value="Movie.Price" class="form-control" />
                    <ValidationMessage For="() => Movie.Price" class="text-danger" />
                </div>
                <div class="mb-3">
                    <label for="rating" class="form-label">Rating:</label>
                    <InputText id="rating" @bind-Value="Movie.Rating" class="form-control" />
                    <ValidationMessage For="() => Movie.Rating" class="text-danger" />
                </div>
                <div class="mb-3">
                    <label for="moviestarrating" class="form-label:">Movie Star Rating:</label>
                    <InputSelect id="moviestarrating" @bind-value="Movie.MovieStarRatingId" class="form-control">
                        @foreach (var movieStarRating in StarRatings)
                        {
                            @if (movieStarRating.Id != 0)
                            {
                                if (movieStarRating.Id == Movie.MovieStarRatingId)
                                {
                                    <option value="@movieStarRating.Id" selected>@movieStarRating.Descr</option>
                                }
                                else
                                {
                                    <option value="@movieStarRating.Id">@movieStarRating.Descr</option>
                                }
                            }                           
                        }
                    </InputSelect>
                    <ValidationMessage For="() => Movie.MovieStarRating" class="text-danger"></ValidationMessage>
                </div>
                <button type="submit" class="btn btn-primary">Save</button>
            </EditForm>
        </div>
    </div>
}

<div>
    <a href="/movies">Back to List</a>
</div>

@code {
    private BlazorWebAppMoviesContext context = default!;

    [SupplyParameterFromQuery]
    private int Id { get; set; }

    [SupplyParameterFromForm]
    private Movie? Movie { get; set; }

    private IList<MovieStarRating> StarRatings { get; set; } = [];

    protected override async Task OnInitializedAsync()
    {
        using var context = DbFactory.CreateDbContext();
        Movie ??= await context.Movie.FirstOrDefaultAsync(m => m.Id == Id);

        if (Movie is null)
        {
            NavigationManager.NavigateTo("notfound");
        }

        StarRatings = await context.MovieStarRating.ToListAsync();
    }

    // To protect from overposting attacks, enable the specific properties you want to bind to.
    // For more information, see .
    private async Task UpdateMovie()
    {
        using var context = DbFactory.CreateDbContext();
        context.Attach(Movie!).State = EntityState.Modified;

        try
        {
            await context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!MovieExists(Movie!.Id))
            {
                NavigationManager.NavigateTo("notfound");
            }
            else
            {
                throw;
            }
        }

        NavigationManager.NavigateTo("/movies");
    }

    private bool MovieExists(int id)
    {
        using var context = DbFactory.CreateDbContext();
        return context.Movie.Any(e => e.Id == id);
    }
}

I'm sure this is probably something simple but like I say, I'm new to Blazor here. I've been playing around with it some since I'm going to develop a new web app using it and I'm also trying to improve my skillset here.

I want to further emphasize what occurs - Suppose I change the Star Rating from 3 Stars to 4 Stars - I do that and I click the update button. What happens is for a split second is that the value in the drop down list changes BACK to 3 Stars and the value doesn't update in the database (well I guess it does but is the same value since it somehow goes back to that on the submit click).

OK I'm new to Blazor and I'm trying to change the value set to an InputSelect control. When I change the value, it resets it back to what it was before I changed it. Here is my code:

@page "/movies/edit"
@rendermode InteractiveServer
@using Microsoft.EntityFrameworkCore
@using BlazorWebAppMovies.Models
@using BlazorWebAppMovies.Data
@inject IDbContextFactory<BlazorWebAppMovies.Data.BlazorWebAppMoviesContext> DbFactory
@inject NavigationManager NavigationManager

<PageTitle>Edit</PageTitle>

<h1>Edit</h1>

<h2>Movie</h2>
<hr />
@if (Movie is null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="row">
        <div class="col-md-4">
            <EditForm method="post" Model="Movie" OnValidSubmit="UpdateMovie" FormName="edit" Enhance>
                <DataAnnotationsValidator />
                <ValidationSummary role="alert"/>
                <input type="hidden" name="Movie.Id" value="@Movie.Id" />
                <div class="mb-3">
                    <label for="title" class="form-label">Title:</label>
                    <InputText id="title" @bind-Value="Movie.Title" class="form-control" />
                    <ValidationMessage For="() => Movie.Title" class="text-danger" />
                </div>
                <div class="mb-3">
                    <label for="releasedate" class="form-label">Release Date:</label>
                    <InputDate id="releasedate" @bind-Value="Movie.ReleaseDate" class="form-control" />
                    <ValidationMessage For="() => Movie.ReleaseDate" class="text-danger" />
                </div>
                <div class="mb-3">
                    <label for="genre" class="form-label">Genre:</label>
                    <InputText id="genre" @bind-Value="Movie.Genre" class="form-control" />
                    <ValidationMessage For="() => Movie.Genre" class="text-danger" />
                </div>
                <div class="mb-3">
                    <label for="price" class="form-label">Price:</label>
                    <InputNumber id="price" @bind-Value="Movie.Price" class="form-control" />
                    <ValidationMessage For="() => Movie.Price" class="text-danger" />
                </div>
                <div class="mb-3">
                    <label for="rating" class="form-label">Rating:</label>
                    <InputText id="rating" @bind-Value="Movie.Rating" class="form-control" />
                    <ValidationMessage For="() => Movie.Rating" class="text-danger" />
                </div>
                <div class="mb-3">
                    <label for="moviestarrating" class="form-label:">Movie Star Rating:</label>
                    <InputSelect id="moviestarrating" @bind-value="Movie.MovieStarRatingId" class="form-control">
                        @foreach (var movieStarRating in StarRatings)
                        {
                            @if (movieStarRating.Id != 0)
                            {
                                if (movieStarRating.Id == Movie.MovieStarRatingId)
                                {
                                    <option value="@movieStarRating.Id" selected>@movieStarRating.Descr</option>
                                }
                                else
                                {
                                    <option value="@movieStarRating.Id">@movieStarRating.Descr</option>
                                }
                            }                           
                        }
                    </InputSelect>
                    <ValidationMessage For="() => Movie.MovieStarRating" class="text-danger"></ValidationMessage>
                </div>
                <button type="submit" class="btn btn-primary">Save</button>
            </EditForm>
        </div>
    </div>
}

<div>
    <a href="/movies">Back to List</a>
</div>

@code {
    private BlazorWebAppMoviesContext context = default!;

    [SupplyParameterFromQuery]
    private int Id { get; set; }

    [SupplyParameterFromForm]
    private Movie? Movie { get; set; }

    private IList<MovieStarRating> StarRatings { get; set; } = [];

    protected override async Task OnInitializedAsync()
    {
        using var context = DbFactory.CreateDbContext();
        Movie ??= await context.Movie.FirstOrDefaultAsync(m => m.Id == Id);

        if (Movie is null)
        {
            NavigationManager.NavigateTo("notfound");
        }

        StarRatings = await context.MovieStarRating.ToListAsync();
    }

    // To protect from overposting attacks, enable the specific properties you want to bind to.
    // For more information, see https://learn.microsoft/aspnet/core/blazor/forms/#mitigate-overposting-attacks.
    private async Task UpdateMovie()
    {
        using var context = DbFactory.CreateDbContext();
        context.Attach(Movie!).State = EntityState.Modified;

        try
        {
            await context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!MovieExists(Movie!.Id))
            {
                NavigationManager.NavigateTo("notfound");
            }
            else
            {
                throw;
            }
        }

        NavigationManager.NavigateTo("/movies");
    }

    private bool MovieExists(int id)
    {
        using var context = DbFactory.CreateDbContext();
        return context.Movie.Any(e => e.Id == id);
    }
}

I'm sure this is probably something simple but like I say, I'm new to Blazor here. I've been playing around with it some since I'm going to develop a new web app using it and I'm also trying to improve my skillset here.

I want to further emphasize what occurs - Suppose I change the Star Rating from 3 Stars to 4 Stars - I do that and I click the update button. What happens is for a split second is that the value in the drop down list changes BACK to 3 Stars and the value doesn't update in the database (well I guess it does but is the same value since it somehow goes back to that on the submit click).

• c#
• asp-core
• blazor
• edit

Share Improve this question Follow edited Mar 12 at 19:11 Rusty0918-B asked Mar 3 at 15:40 Rusty0918-BRusty0918-B 2133 bronze badges 2

• 2 I'm not sure, but could the issue be that in @bind-value you have the v as lower instead of upper case? – Uerschel Commented Mar 4 at 7:49
• I tried that and it didn't work. – Rusty0918-B Commented Mar 12 at 18:52

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Please bear with me that I can't reproduce your issue in my side. I create a sample based on your code snippet but everything worked well. And please create a new component using my codes and have a test to see whether the submit method could get the expected model value.

@page "/movies/edit"
@rendermode InteractiveServer

<PageTitle>Edit</PageTitle>
<h1>Edit</h1>
<h2>Movie</h2>
<hr />
@if (Movie1 is null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="row">
        <div class="col-md-4">
            <EditForm method="post" Model="Movie1" OnValidSubmit="UpdateMovie" FormName="edit" Enhance>
                <div class="mb-3">
                    <label for="price" class="form-label">Price:</label>
                    <InputNumber id="price" @bind-Value="Movie1.Price" class="form-control" />
                    <ValidationMessage For="() => Movie1.Price" class="text-danger" />
                </div>
                <div class="mb-3">
                    <label for="moviestarrating" class="form-label:">Movie Star Rating:</label>
                    <InputSelect id="moviestarrating" @bind-value="Movie1.MovieStarRatingId" class="form-control">
                        @foreach (var movieStarRating in StarRatings)
                        {
                            @if (movieStarRating.Id != 0)
                            {
                                if (movieStarRating.Id == Movie1.MovieStarRatingId)
                                {
                                    <option value="@movieStarRating.Id" selected>@movieStarRating.Descr</option>
                                }
                                else
                                {
                                    <option value="@movieStarRating.Id">@movieStarRating.Descr</option>
                                }
                            }                           
                        }
                    </InputSelect>
                    <ValidationMessage For="() => Movie1.MovieStarRating" class="text-danger"></ValidationMessage>
                </div>
                <button type="submit" class="btn btn-primary">Save</button>
            </EditForm>
        </div>
    </div>
}

<div>
    <a href="/movies">Back to List</a>
</div>

@code {
    [SupplyParameterFromQuery]
    private int Id { get; set; }

    [SupplyParameterFromForm]
    private Movie? Movie1 { get; set; }

    private IList<MovieStarRating> StarRatings { get; set; } = [];

    protected override async Task OnInitializedAsync()
    {
        Movie1 = new Movie { Id = 2 , MovieStarRating = 2, MovieStarRatingId = 2, Price = 12};

        StarRatings = new List<MovieStarRating> { 
            new MovieStarRating { Id = 4, Descr = "desc4" },
            new MovieStarRating { Id = 3, Descr = "desc3" },
            new MovieStarRating { Id = 2, Descr = "desc2" },
            new MovieStarRating { Id = 1, Descr = "desc1" } 
        };
    }

    private async Task UpdateMovie()
    {
        var value = Movie1.Id;
    }

    public class Movie { 
        public int Id { get; set; }
        public int MovieStarRatingId { get; set; }
        public int MovieStarRating { get; set; }
        public int Price { get; set; }
    }

    public class MovieStarRating { 
        public int Id { get; set; }
        public string Descr { get; set; }
    }
}