I have a Blazor form using .NET 6 and have it working with an API PUT endpoint that can update the database upon clicking a button. This takes all of the bound input fields in the form and submits them into the payload.

I’ve modified my endpoint such that if payload is missing any attributes, it sends null and doesn’t update the particular database field, essentially ensuring that only the sent changes are the items that get updated.

However, I’m struggling to find an example in Blazor where the submit only sends input fields on the form that were modified. I’m new to Blazor and my original implementation just had a button that had an @onclick event, which then called the endpoint, passing the object that has data bound in the form. This works but I’d prefer that I understand how to only send the data modified to not have unrequired overwrites.

Here’s a mockup of what I have (truncated for readability):

@inject IDataSetService DataSetService

@page "/GameData/Data/DataSetEdit"
@page "/GameData/Data/DataSetEdit/{IDRouteParam:int}"


<PageTitle>DataSet Edit</PageTitle>


<div class="content-wrapper">

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">                                   
            <!-- Card -->
            <div class="card">
                <div class="card-header">

                </div>
                <form>
                    <div class="card-body">     
                        
                        <div class="form-group">
                        <label for="ID">ID</label>
                        <input type="text" class="form-control" id="ID" placeholder="12345" value="@dataSet.ID">
                        </div>

                        <div class="form-group">
                        <label for="IsActive">Is Active?</label>                                                                       
                        <input type="text" class="form-control" id="IsActive" placeholder="IsActive" @bind-value="dataSet.IsActive">
                        </div>

                        <div class="form-group">
                        <label for="IsDeleted">Is Deleted?</label>                        
                        <input type="text" class="form-control" id="IsDeleted" placeholder="IsDeleted" @bind-value="dataSet.IsDeleted">
                        </div>
<div class="card-footer">
                    <button type="submit" class="btn btn-info" @onclick="() => UpdateDataSet()">Save</button>
                    <button type="submit" class="btn btn-danger">Cancel</button>
                    </div>
                </form>                
            </div>
            <!-- /.Card -->
            }
        </div>
    </section>
</div>

@code {
    private DataSet? dataSet = null;

    private string message = string.Empty;

    private bool ActiveChecked = false;

    private bool DeletedChecked = false;

    [Parameter]
    public int IDRouteParam { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        message = "Loading DataSet.. ";
        var result = await DataSetService.GetDataSetByID(IDRouteParam);    

        if (!result.Success)
        {
            message = result.Message;
        }
        else
        {
            dataSet = result.Data;
        }
    }

    async void UpdateDataSet()
    {        
        dataSet= await DataSetService.UpdateDataSet(dataSet);

    }
}

I have been reading on changing this to an EditForm along with an OnValidSubmit, but I haven’t come across an example that shows how to detect fields that were changed and how to use those to build the payload to send to the API.