Blazor refreshing after clicking cancel or saving record.

[jacobrivera12]

Describe the bug

Its a very weird bug since I installed a new template on my project. Everytime when I attempt to edit a record then I click Cancel or Save it just refreshes the whole page. Same thing happens when I try to delete a record. I looked over this link: https://github.com/aspnet/Blazor/issues/1356 and everything seems to be the exact same thing but it just keeps happening. I have tried everything.

To Reproduce

Steps to reproduce the behavior:

1. Blazor 0.7.0
2. Run this code '....'

@using BlazorCrud.Shared.Models
@page "/editemployee/{empID}"
@inject HttpClient Http
@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper

<h2>Edit</h2>
<h4>Employees</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label for="Name" class="control-label">Name</label>
            <input for="Name" class="form-control" bind="@emp.Name" />
        </div>
        <div class="form-group">
            <label asp-for="Gender" class="control-label">Gender</label>
            <select asp-for="Gender" class="form-control" bind="@emp.Gender">
                <option value="">-- Select Gender --</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
        </div>
        <div class="form-group">
            <label asp-for="Department" class="control-label">Department</label>
            <input asp-for="Department" class="form-control" bind="@emp.Department" />
        </div>
        <div class=" form-group">
            <label asp-for="City" class="control-label">City</label>
            <input asp-for="City" class="form-control" bind="@emp.City" />
        </div>
        <div class=" form-group">
            <label asp-for="Date" class="control-label">City</label>
            <input asp-for="Date" class="form-control" bind="@emp.Date" />
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-default" onclick="@(async () => await UpdateEmployee())">Save</button>
            <button type="button" onclick=@cancel  class="btn">Cancel</button>
        </div>

    </div>
</div>

@functions {

    [Parameter]
    string empID { get; set; }

    Employees emp = new Employees();

    protected override async Task OnInitAsync()
    {
            emp = await Http.GetJsonAsync<Employees>("/api/Employee/Details/" + empID);
    }


    protected async Task UpdateEmployee()
    {
        await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/Edit", emp);
        UriHelper.NavigateTo("/fetchemployee");

    }

    void cancel()
    {
        UriHelper.NavigateTo("/fetchemployee");

    }

}

Expected behavior

Expected my code to not refresh the page.

The only thing I see different from my Add employee and Edit/Delete employee code is the {empID} parameter.

[jacobrivera12]

Whenever I try to Add a new employee and I click Save or Cancel it doesn't happens at all. I am using same code for both sides.

[RemiBou]

About your sample, I'm not sure what is causing the error but I see the following problems :

• You need a and use the onsubmit handler.
• You don't need the async / await on your click handler.
• "asp-for" are useless as Blazor does not handle Razor helpers
• You can change your cancel button by a simple
• And you are calling "UriHelper.NavigateTo("/fetchemployee"); " at the end of your update

About your problem, if the previous things do not fix your problem :

• Is there any error on the console (you need to check "Preserve log" for keeping logs across redirection
• Can you post your code to a github repo so we can reproduce it ?

[jacobrivera12]

Here is the project...

https://github.com/jacobrivera12/BlazorCrud/blob/master/BlazorCrud.rar

You just need to add a connection string on EmployeeContext and this is the code for the Database. (I am sure you know that)

Create table Employees(        
    EmployeeId nvarchar(128) NOT NULL,        
    Name nvarchar(50) NOT NULL,        
    City nvarchar(50) NOT NULL,        
    Department nvarchar(50) NOT NULL,        
    Gender nvarchar(50) NOT NULL,
	Date date NOT NULL       
)

I am not sure if I missed anything on my code, let me know and ill add it so you dont have to edit anything and just reproduce the issue than just adding a record. 😢

By the way, when I "Save" a new record it doesn't redirect me to "/fetchemployee" using urihelper.navigateto.

I really appreciate your help.
Thank you!

[Andrzej-W]

I don't know why, but you removed

<base href="/" />

line from index.html file. Add it and everything will work correctly.

It is interesting that your app was working correctly on this page (route)
@page "/addemployee"
and incorrectly on this one
@page "/editemployee/{empID}"

I mean call to UriHelper.NavigateTo("/fetchemployee"); was intercepted and handled internally by Blazor in the first case and request was sent to the server in the second case.

[jacobrivera12]

Thank you alot. I finally fixed the issue, I was adding a new template and I accidentaly removed it I guess.