Countries & Cities - Part 5

Deleting Cities

The method for deleting a city will be less complicated than adding or editing cities!  We start by adding a button under the data-grid of cities, labelled 'Delete a City'.  The user will select a city and click the 'Delete' button.  A check will be made to ensure that a city has been selected, and if so, a warning will be shown to the user asking for confirmation that the record should be deleted.

First, we add the 'Delete' button.  Paste the following code into the HTML section of CountriesAndCities.razor, under the HTML for the Add and Delete buttons.

    <SfButton CssClass="e-small e-success" @onclick="DeleteCity">
        Delete a City
    </SfButton>

Having checked that a city is selected, the button onClick event will open a 'DeleteCity' dialog.  Add the code for this, 'DialogDeleteCity', in the HTML section; under the EditCity dialog would seem a good place.

<SfDialog @ref="DialogDeleteCity" IsModal="true" Width="250px" ShowCloseIcon="true" Visible="false">
    <DialogTemplates>
        <Header> Confirm Delete </Header>
        <Content> Please confirm that you want to delete this record. </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Delete" IsPrimary="true" OnClick="@ConfirmDeleteYes" />
        <DialogButton Content="Cancel" IsPrimary="false" OnClick="@ConfirmDeleteNo" />
    </DialogButtons>
</SfDialog>

Changes to @Code

The changes needed to the C# code section cover:

• Declare the new SfDialog
• Logic for the onClick event to open the DeleteCity dialog
• Logic for the onClick event to confirm deletion of the city
• Logic for the onClick event to abandon deletion of the city.

Declare SfDialog 'DialogDeleteCity'

Add the following to the top of the code section, under the existing SfDialog declarations.

SfDialog DialogDeleteCity;

Display the DeleteCity dialog

If there is no city selected the warning dialog we used for editing a city is used, otherwise the DialogDeleteCity is displayed.  Paste the code shown below into the code section, I suggest under the EditCity procedure.

    private async Task DeleteCity()
    {
        //Check that a Country has been selected
        if (SelectedCityId == 0)
        {
            await this.DialogMissingCity.Show();
        }
        else
        {
            await this.DialogDeleteCity.Show();
        }
    }

Confirm delete

If the user confirms that they want to delete the city, the CitiesDelete is called from CitiesService.  No changes are needed to the standard SQL stored procedures created by the code generator used earlier.  Once the city is deleted the cities object is repopulated, the dialog closed and SelectedCityId set to zero.  Paste the following code into the code section

    public async void ConfirmDeleteYes()
    {
        await CitiesService.CitiesDelete(SelectedCityId);

        cities = await CitiesService.Cities_GetByCountry(this.SelectedCountryId);
        await this.DialogDeleteCity.Hide();
        StateHasChanged();
        SelectedCityId = 0;
    }

Cancel delete

This just closes the Delete dialog.  Paste the following into the code section, under the ConfirmDeleteYes procedure.

    public async void ConfirmDeleteNo()
    {
        await this.DialogDeleteCity.Hide();
    }

Build and run the project.

Full Code

The full code for the changes made in this section can be found by clicking the above heading.

YouTube Video

Blazor + Syncfusion + Dapper: Part 10