Question <input type="text" @bind-value="@client.Name" generating a lot of errors - Blazor

[Pablo]

Hello all,
I'm working on the Add/Update page. Before, I had typed just value instead of @bind-value, and it appeared the correct value, but those fields were not updated. (Could it be because it was missing the "two way" binding?). Then I changed to @bind-value as you can see in the code, and I got seven errors "Left part of an assignment must be a variable, a property, or an indexer"; but the left part is @bind-value!

@page "/AddEditClient/{id:int}"
@using WebAPICountries.Models
@using WebAPICountries.Blazor.Services
@inject NavigationManager Navigator

<h2>@title</h2>

<label>Client Name:</label>
<br />
<input type="text" @bind-value="@client?.Name" />
<br />
<label>Department:</label>
<br />
<select @onchange="DeptValueChanged">
    @foreach (var department in departments)
    {
        if (client?.Department?.Id == department.Id)
        {
            <option value="@department.Id" selected>@department.Name</option>
        }
        else
        {
            <option value="@department.Id">@department.Name</option>
        }
    }
</select>
<br />
<label>Salary</label>
<br />
<input type="text" @bind-value="@client?.Salary" />
<br />
<label>Hire Date:</label>
<br />
<input type="text" @bind-value="@client?.HireDate" />
<br />
<label>City:</label>
<br />
<select @onchange="CityValueChanged">
    @foreach (var city in cities)
    {
        if (client?.City?.Id == city.Id)
        {
            <option value="@city.Id" selected>@city.Name</option>
        }
        else
        {
            <option value="@city.Id">@city.Name</option>
        }
    }
</select>
<br />
<button type="button" class="btn btn-primary btn-sm" @onclick="SaveClient">Save Client</button>
<button type="button" class="btn btn-close btn-sm" @onclick="Cancel">Cancel</button>

@code {
    [Parameter]
    public int id { get; set; }
    private string? title;
    private int departmentId = 0;
    private List<Department>? departments;
    private DepartmentService? departmentService;
    private List<City> cities;
    private CityService cityService;
    private ClientService? clientService;
    private Client? client;

    protected override void OnInitialized()
    {
        if (id == 0)
            title = "Add New Client";
        else
            title = "Update Client";

        departmentService = new DepartmentService();
        departments = departmentService.GetAllDepartments();
        cityService = new CityService();
        cities = cityService.GetAllCities();
        clientService = new ClientService();
        if (id > 0)
            client = clientService.GetClientById(id);
        else
            client = new Client();
    }

    private void DeptValueChanged(ChangeEventArgs e)
    {
        client.Department.Id = Convert.ToInt16(e.Value?.ToString());
    }

    private void CityValueChanged(ChangeEventArgs e)
    {
        client.City.Id = Convert.ToInt32(e.Value?.ToString());
    }

    private void SaveClient()
    {
        if (client?.Id == 0)
            clientService?.AddNewClient(client);
        else
            clientService?.UpdateClient(client);
        Navigator.NavigateTo("/ClientList");
    }

    private void Cancel()
    {
        Navigator.NavigateTo("/ClientList");
    }
}

The other issue I'm getting refers to MudBlazor's IDialogService.ShowMessageBox() method. The below code has no errors neither runtime, it works fine except that the MessageBox is never shown. I debugged the page and it stops at the DeleteClient() method's first sentence (which calls the ShowMessageBox() method), then I continued and the second sentence is never reached, it is skipped. I would imagine there's an error in the first sentence, but can't figure what, because I stole that code from here: MudBlazor - Blazor Component Library

@page "/ClientList"
@using MudBlazor;
@using WebAPICountries.Models
@using WebAPICountries.Blazor.Services
@inject NavigationManager Navigator

<h2>Client List</h2>

<button type="button" class="btn-primary btn-sm" @onclick="AddNewClient">Add New Client</button>
<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Salary</th>
            <th>Hire Date</th>
            <th>City</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var client in clients)
        {
            <tr>
                <td>@client.Name</td>
                <td>@client.Department?.Name</td>
                <td>@client.Salary</td>
                <td>@client.HireDate</td>
                <td>@client.City?.Name</td>
                <td> <button type="button" class="btn-secondary btn-sm" @onclick="() => UpdateClient(client.Id)">Update</button></td>
                <td> <button type="button" class="btn-danger btn-sm" @onclick="() => DeleteClient(client.Id)">Delete</button></td>
            </tr>
        }
    </tbody>
</table>

@code {
    private IDialogService? dialogService;
    private List<Client>? clients;
    private ClientService? clientService;

    protected override void OnInitialized()
    {
        clientService = new ClientService();
        clients = clientService.GetAllClients();
        dialogService = new DialogService();
    }

    private void AddNewClient()
    {
        Navigator.NavigateTo("/AddEditClient/0");
    }

    private void UpdateClient(int id)
    {
        Navigator.NavigateTo("/AddEditClient/" + id.ToString());
    }

    private async void DeleteClient(int id)
    {
        bool? result = await dialogService.ShowMessageBox(
            "Warning",
            "Deleting can not be undone!",
            yesText: "Delete!", cancelText: "Cancel");
        if (result == true)
            clientService?.DeleteClient(id);
    }
}

I would appreciate your help very much. Thanks!
Pablo

 

[cjard]

@bind-value="@client?.Salar

You can't do this, even in normal c#: C# Online Compiler | .NET Fiddle

When you use @bind-value, c# takes what you supply and wires it up for you as if you'd written this:

 Value="client?.Salary" ValueChanged="v=>client?.Salary = v"

You can't assign to an expression that propagates a nul

---

Not really sure why you're mixing standard Blazor inputs and MudBlazor... why no MudTextField?

 

[cjard]

I would imagine there's an error in the first sentence, but can't figure what

The example uses dependency [Inject]ion to create the dialog service; you created it yourself. It doesn't work if you do:

TryMudBlazor - Write, compile, execute and share Blazor components in the browser

TryMudBlazor is a fiddle-like platform for writing, compiling, executing and sharing Blazor components entirely in the browser. Perfect for code playground and testing.

try.mudblazor.com

 

[Pablo]

Hi cjard,
I'm moving (or trying to) all my project to MudBlazor. You'll see my new questions soon.
Thank you.
Regards