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);
}