Countries & Cities - Part 5 - Code
The only file changed by adding the ability to delete cities is CountriesAndCities.razor. The code for this file is shown below:
@page "/countriesandcities"
@using BlazorCountries.Data
@inject ICountriesService CountriesService
@inject ICitiesService CitiesService
<h3>Countries and Cities</h3>
<div class="control_wrapper">
<SfDropDownList TItem="Countries"
TValue="string"
DataSource="@countries"
Placeholder="Select a country"
PopupHeight="200px"
PopupWidth="250px">
<DropDownListFieldSettings Text="CountryName" Value="CountryId"></DropDownListFieldSettings>
<DropDownListEvents TItem="Countries" TValue="string" ValueChange="OnChange"></DropDownListEvents>
</SfDropDownList>
</div>
<div>
<SfGrid ID="CityGrid"
DataSource="@cities"
AllowSorting="true"
AllowResizing="true"
Height="200">
<GridEvents RowSelected="RowSelectHandler" TValue="Cities"></GridEvents>
<GridColumns>
<GridColumn Field="@nameof(Cities.CityName)"
HeaderText="City Name"
TextAlign="@TextAlign.Left"
Width="50">
</GridColumn>
<GridColumn Field="@nameof(Cities.CityPopulation)"
HeaderText="Population"
Format="n"
TextAlign="@TextAlign.Right"
Width="50">
</GridColumn>
</GridColumns>
</SfGrid>
</div>
<div class="e-footer-content">
<br />
<SfButton CssClass="e-small e-success" @onclick="AddCity">
Add a City
</SfButton>
<SfButton CssClass="e-small e-success" @onclick="EditCity">
Edit a City
</SfButton>
<SfButton CssClass="e-small e-success" @onclick="DeleteCity">
Delete a City
</SfButton>
</div>
<SfDialog @ref="DialogAddCity" IsModal="true" Width="500px" ShowCloseIcon="true" Visible="false">
<EditForm Model="@addCities" OnValidSubmit="@CitiesSave">
<div>
<SfTextBox Enabled="true" Placeholder="City"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="addCities.CityName"></SfTextBox>
<SfNumericTextBox Enabled="true" Placeholder="Population" Width="50"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="addCities.CityPopulation"></SfNumericTextBox>
</div>
<br /><br />
<div class="e-footer-content">
<div class="button-container">
<button type="submit" class="e-btn e-normal e-primary">Save</button>
</div>
</div>
</EditForm>
</SfDialog>
<SfDialog @ref="DialogEditCity" IsModal="true" Width="500px" ShowCloseIcon="true" Visible="false">
<EditForm Model="@editCities" OnValidSubmit="@CitiesSaveEdit">
<div>
<SfTextBox Enabled="true" Placeholder="City"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="editCities.CityName"></SfTextBox>
<SfNumericTextBox Enabled="true" Placeholder="Population" Width="50"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="editCities.CityPopulation"></SfNumericTextBox>
</div>
<br /><br />
<div class="e-footer-content">
<div class="button-container">
<button type="submit" class="e-btn e-normal e-primary">Save</button>
</div>
</div>
</EditForm>
</SfDialog>
<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>
<SfDialog @ref="DialogMissingCountry" IsModal="true" Width="250px" ShowCloseIcon="true" Visible="false">
<DialogTemplates>
<Header> Warning! </Header>
<Content> You must select a country from the drop-down list. </Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialogMissingCountry" />
</DialogButtons>
</SfDialog>
<SfDialog @ref="DialogMissingCity" IsModal="true" Width="250px" ShowCloseIcon="true" Visible="false">
<DialogTemplates>
<Header> Warning! </Header>
<Content> You must select a city from the grid.</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialogMissingCity" />
</DialogButtons>
</SfDialog>
<SfDialog @ref="DialogDuplicateCity" IsModal="true" Width="250px" ShowCloseIcon="true" Visible="false">
<DialogTemplates>
<Header> Warning! </Header>
<Content> City already exists for this country; it cannot be added again.</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialogDuplicateCity" />
</DialogButtons>
</SfDialog>
<style>
.control_wrapper {
width: 250px;
}
</style>
@code{
IEnumerable<Countries> countries;
IEnumerable<Cities> cities;
SfDialog DialogAddCity;
SfDialog DialogMissingCountry;
SfDialog DialogDuplicateCity;
SfDialog DialogEditCity;
SfDialog DialogMissingCity;
SfDialog DialogDeleteCity;
Cities addCities = new Cities();
Cities editCities = new Cities();
[Parameter]
public int SelectedCountryId { get; set; } = 0;
public int SelectedCityId { get; set; } = 0;
protected override async Task OnInitializedAsync()
{
//Populate the list of countries objects from the Countries table.
countries = await CountriesService.CountriesGetAll();
}
public async Task OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args)
{
this.SelectedCountryId = args.ItemData.CountryId;
cities = await CitiesService.Cities_GetByCountry(this.SelectedCountryId);
SelectedCityId = 0; //If this isn't reset, editing a city for a new country could display an old record.
StateHasChanged();
}
public void RowSelectHandler(RowSelectEventArgs<Cities> args)
{
//{args.Data} returns the current selected records.
SelectedCityId = args.Data.CityId;
}
private async Task AddCity()
{
//Check that a Country has been selected
if (SelectedCountryId == 0)
{
await this.DialogMissingCountry.Show();
}
else
{
await this.DialogAddCity.Show();
}
}
private async Task CloseDialogMissingCountry()
{
await this.DialogMissingCountry.Hide();
}
protected async Task CitiesSave()
{
if (addCities.CityId == 0)
{
// Insert if CityId is zero.
addCities.CountryId = SelectedCountryId;
int Success = await CitiesService.CitiesInsertWithDuplicateCheck(addCities.CityName, addCities.CountryId, addCities.CityPopulation);
if (Success != 0)
{
//City Name already exists
await this.DialogDuplicateCity.Show();
}
else
{
await this.DialogAddCity.Hide();
this.StateHasChanged();
}
}
//clear City data
addCities.CityName = "";
addCities.CityPopulation = 0;
cities = await CitiesService.Cities_GetByCountry(this.SelectedCountryId);
StateHasChanged();
}
private async Task EditCity()
{
//Check that a City has been selected
if (SelectedCityId == 0)
{
await this.DialogMissingCity.Show();
}
else
{
//populate editCities (temporary data set used for the editing process)
editCities = await CitiesService.CitiesGetOne(SelectedCityId);
await this.DialogEditCity.Show();
}
}
protected async Task CitiesSaveEdit()
{
int Success = await CitiesService.CitiesUpdateWithDuplicateCheck(editCities.CityName, editCities.CountryId, editCities.CityPopulation, SelectedCityId);
if (Success != 0)
{
//City Name already exists
await this.DialogDuplicateCity.Show();
}
else
{
await this.DialogEditCity.Hide();
this.StateHasChanged();
editCities = new Cities();
}
cities = await CitiesService.Cities_GetByCountry(this.SelectedCountryId);
StateHasChanged();
}
private async Task DeleteCity()
{
//Check that a Country has been selected
if (SelectedCityId == 0)
{
await this.DialogMissingCity.Show();
}
else
{
await this.DialogDeleteCity.Show();
}
}
private async Task CloseDialogDuplicateCity()
{
await this.DialogDuplicateCity.Hide();
}
private async Task CloseDialogMissingCity()
{
await this.DialogMissingCity.Hide();
}
public async void ConfirmDeleteYes()
{
await CitiesService.CitiesDelete(SelectedCityId);
cities = await CitiesService.Cities_GetByCountry(this.SelectedCountryId);
await this.DialogDeleteCity.Hide();
StateHasChanged();
SelectedCityId = 0;
}
public async void ConfirmDeleteNo()
{
await this.DialogDeleteCity.Hide();
}
}