Deleting a Person

Let's add a delete button in people list as shown below:

Delete person

We're starting from UI in this case.


We're changing index.cshtml view to add a button (related part is shown here):

<div id="AllPeopleList" class="list-group">
    @foreach (var person in Model.Items)
        <a href="javascript:;" class="list-group-item" data-person-id="@person.Id">
            <h4 class="list-group-item-heading">
                @person.Name @person.Surname
        @if (IsGranted(AppPermissions.Pages_Tenant_PhoneBook_DeletePerson))
            <button title="@L("Delete")" class="btn btn-circle btn-icon-only btn-danger delete-person" href="javascript:;">
                <i class="la la-trash"></i>
            <p class="list-group-item-text">

Surely, we defined 'delete person' permission as like before.


We're using a LESS style here to take button right. Created a file named index.less and added following lines:

#AllPeopleList {
    .list-group-item-heading {
        button.delete-person {
            float: right;

And add the style to your Index.cshtml page (You can also add minified versions of styles for other environments like production and staging):

@section Styles
    <environment names="Development">
        <link rel="stylesheet" href="~/view-resources/Areas/App/Views/PhoneBook/Index.css" asp-append-version="true" />


Now, adding code to delete person (to Index.js):

var _personService = abp.services.app.person;

$('#AllPeopleList button.delete-person').click(function (e) {

    var $listItem = $(this).closest('.list-group-item');
    var personId = $listItem.attr('data-person-id');

        function(isConfirmed) {
            if (isConfirmed) {
                    id: personId
                }).done(function () {

It first shows a confirmation message when we click the delete button:

Confirmation message

If we click Yes, it simply calls deletePerson method of PersonAppService and shows a notification if operation succeed. Also, removes the person from the page using jQuery's remove function.

Application Service

First, adding a new method definition to IPersonAppService interface as always:

Task DeletePerson(EntityDto input);

EntityDto is a shortcut of ABP if we only get an id value. Implementation (in PersonAppService) is very simple:

public async Task DeletePerson(EntityDto input)
    await _personRepository.DeleteAsync(input.Id);

We also authorized deleting a person as did before for creating a person.

We also need to define Pages_Tenant_PhoneBook_DeletePerson constant in AppPermissions and define related permission in AppAuthorizationProvider.


In this document