ASP.NET ZERO 學習 —— (16) 應用開發Demo之刪除用戶

我們在人員列表裏增加刪除按鈕，如下所示：

視圖

我們修改index.cshtml增加一個按鈕：

<div class="portlet light">
    <div class="portlet-body">
        <h3>@L("AllPeople")</h3>
        <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 red delete-person" href="javascript:;">
                                <i class="icon-trash"></i>
                            </button>
                        }
                    </h4>
                    <p class="list-group-item-text">
                        @person.EmailAddress
                    </p>
                </a>
            }
        </div>
    </div>
</div>

當然，我們需要向前面一樣，定義‘刪除’權限。

樣式

我們使用LESS來讓按鈕置右。創建一個文件 index.less 並添加以下代碼：

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

並且在Index.cshtml頁面中添加引用（我們在頁面上添加編譯並壓縮的版本）

@section Styles
{
    @Html.IncludeStyle("~/Areas/Mpa/Views/PhoneBook/Index.min.css")
}

腳本

現在，我們在Index.js文件中添加刪除人員的代碼：

var _personService = abp.services.app.person;

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

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

    abp.message.confirm(
        app.localize('AreYouSureToDeleteThePerson'),
        function(isConfirmed) {
            if (isConfirmed) {
                _personService.deletePerson({
                    id: personId
                }).done(function () {
                    abp.notify.info(app.localize('SuccessfullyDeleted'));
                    $listItem.remove();
                });
            }
        }
    );
});

當我們點擊刪除按鈕後會提示：

如果點擊是，它會調用PersonAppService 的deletePerson 方法，如果執行成功會彈出消息提示，同時使用JQuery的remove方法在頁面上移除該人員的信息。

應用服務

首先，在IPersonAppService 接口裏添加一個新方法：

Task DeletePerson(EntityDto input);

IdInput是ABP裏用來獲取Id的快捷方法。實現非常簡單：

[AbpAuthorize(AppPermissions.Pages_Tenant_PhoneBook_DeletePerson)]
public async Task DeletePerson(EntityDto input)
{
    await this._personRepository.DeleteAsync(input.Id);
}