Crud implemented by Contact
This commit is contained in:
@ -1,5 +1,6 @@
|
||||
@page "/contacts"
|
||||
@inject NavigationManager NavigationManager
|
||||
@inject HttpClient Http
|
||||
<h3>Contacts</h3>
|
||||
|
||||
<SfGrid DataSource="GridData" AllowFiltering="true" Toolbar="@(new List<string>() {"Search"})">
|
||||
@ -14,6 +15,15 @@
|
||||
}
|
||||
</Template>
|
||||
</GridColumn>
|
||||
<GridColumn Width="60">
|
||||
<Template>
|
||||
@{
|
||||
var contact = context as Contact;
|
||||
<SfButton CssClass="e-inherit" IconCss="e-icons e-delete"
|
||||
OnClick="@(() => DeleteContact(contact!))"></SfButton>
|
||||
}
|
||||
</Template>
|
||||
</GridColumn>
|
||||
<GridColumn Field="FirstName" HeaderText="First Name"></GridColumn>
|
||||
<GridColumn Field="LastName" HeaderText="Last Name"></GridColumn>
|
||||
<GridColumn Field="NickName" HeaderText="Nick Name"></GridColumn>
|
||||
@ -23,43 +33,108 @@
|
||||
|
||||
</SfGrid>
|
||||
|
||||
<p>
|
||||
<SfButton IsPrimary="true" Content="Create New Contact" OnClick="CreateContact" />
|
||||
</p>
|
||||
|
||||
<SfDialog Width="335px" IsModal="true" @bind-Visible="showDeleteDialog">
|
||||
<DialogTemplates>
|
||||
<Header>Are you sure?</Header>
|
||||
<Content>
|
||||
<p>Do you really want to delete @contactToDelete!.NickName</p>
|
||||
</Content>
|
||||
</DialogTemplates>
|
||||
<DialogButtons>
|
||||
<DialogButton Content="Yep." IsPrimary="false" OnClick="ConfirmDeleteContact"></DialogButton>
|
||||
<DialogButton Content="Nope." IsPrimary="true" OnClick="CancelDeleteContact"></DialogButton>
|
||||
</DialogButtons>
|
||||
<DialogAnimationSettings Effect="@DialogEffect.Zoom" ></DialogAnimationSettings>
|
||||
</SfDialog>
|
||||
|
||||
@code {
|
||||
Contact? contactToDelete;
|
||||
public List<Contact> GridData { get; set; } = new List<Contact>
|
||||
{
|
||||
new Contact
|
||||
{
|
||||
Id = 1,
|
||||
FirstName = "Peter",
|
||||
LastName = "Parker",
|
||||
NickName = "Spider-Man",
|
||||
Place = "New York City",
|
||||
DateOfBirth = new DateTime(2001, 8, 1),
|
||||
DateCreated = DateTime.Now
|
||||
},
|
||||
new Contact
|
||||
{
|
||||
Id = 1,
|
||||
FirstName = "Tony",
|
||||
LastName = "Stark",
|
||||
NickName = "Iron Man",
|
||||
Place = "Malibu",
|
||||
DateOfBirth = new DateTime(1970, 5, 29),
|
||||
DateCreated = DateTime.Now
|
||||
},
|
||||
new Contact
|
||||
{
|
||||
Id = 1,
|
||||
FirstName = "Bruce",
|
||||
LastName = "Wayne",
|
||||
NickName = "Batman",
|
||||
Place = "Gotham City",
|
||||
DateOfBirth = new DateTime(1915, 4, 7),
|
||||
DateCreated = DateTime.Now
|
||||
}
|
||||
//new Contact
|
||||
//{
|
||||
// Id = 1,
|
||||
// FirstName = "Peter",
|
||||
// LastName = "Parker",
|
||||
// NickName = "Spider-Man",
|
||||
// Place = "New York City",
|
||||
// DateOfBirth = new DateTime(2001, 8, 1),
|
||||
// DateCreated = DateTime.Now
|
||||
//},
|
||||
//new Contact
|
||||
//{
|
||||
// Id = 1,
|
||||
// FirstName = "Tony",
|
||||
// LastName = "Stark",
|
||||
// NickName = "Iron Man",
|
||||
// Place = "Malibu",
|
||||
// DateOfBirth = new DateTime(1970, 5, 29),
|
||||
// DateCreated = DateTime.Now
|
||||
//},
|
||||
//new Contact
|
||||
//{
|
||||
// Id = 1,
|
||||
// FirstName = "Bruce",
|
||||
// LastName = "Wayne",
|
||||
// NickName = "Batman",
|
||||
// Place = "Gotham City",
|
||||
// DateOfBirth = new DateTime(1915, 4, 7),
|
||||
// DateCreated = DateTime.Now
|
||||
//}
|
||||
};
|
||||
|
||||
bool showDeleteDialog = false;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var result = await Http.GetFromJsonAsync<List<Contact>>("api/contacts");
|
||||
if(result is not null)
|
||||
{
|
||||
GridData = result;
|
||||
}
|
||||
}
|
||||
|
||||
void EditContact(int Id)
|
||||
{
|
||||
NavigationManager.NavigateTo($"contacts/edit/{Id}");
|
||||
}
|
||||
|
||||
void CreateContact()
|
||||
{
|
||||
NavigationManager.NavigateTo($"contacts/new");
|
||||
}
|
||||
|
||||
void DeleteContact(Contact contact)
|
||||
{
|
||||
contactToDelete = contact;
|
||||
showDeleteDialog = true;
|
||||
}
|
||||
|
||||
void CancelDeleteContact()
|
||||
{
|
||||
showDeleteDialog = false;
|
||||
}
|
||||
|
||||
async Task ConfirmDeleteContact()
|
||||
{
|
||||
if(contactToDelete is null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
showDeleteDialog = false;
|
||||
var result = await Http.DeleteAsync($"api/contacts/{contactToDelete.Id}");
|
||||
if (result.IsSuccessStatusCode)
|
||||
{
|
||||
var jsonResult = await result.Content.ReadFromJsonAsync<List<Contact>>();
|
||||
if(jsonResult is not null)
|
||||
{
|
||||
GridData = jsonResult;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user