完善Person页面的视图操作功能

经过上一篇，我们的person的权限已经正常加上了。那么我们回到我们的菜单类。给他重新加上权限。

这样的话，我们在启动页面的时候就不会看见联系人管理菜单了。只有登录后才可以看到菜单信息了。

添加控制器和视图

添加控制器

[AbpMvcAuthorize(PersonAppPermissions.Person)]
    public class PersonManageController : PhoneBookControllerBase
    {

        private readonly IPersonAppService _personAppService;

        public PersonManageController(IPersonAppService personAppService)
        {
            _personAppService = personAppService;
        }

        // GET: PersonManage
        public async System.Threading.Tasks.Task<ActionResult> Index(GetPersonInput input)
        {

            var output = await _personAppService.GetPagedPersonsAsync(input);

            return View(output);
        }
    }

控制器上也是做了权限判断的，还有就是将personservice注入到控制器中。

调用联系人查询信息，这里我们使用了异步调用

添加视图界面

@using Abp.Web.Mvc.Extensions
@using YoYoCMS.PhoneBook
@model Abp.Application.Services.Dto.PagedResultOutput<YoYoCMS.PhoneBook.Persons.Dtos.PersonListDto>
 @{
    ViewBag.ActiveMenu = "Persons.Person"; 
    ViewBag.Title = L("PersonHeaderInfo");
 
}

@section scripts{
 @Html.IncludeScript("~/Views/PersonManage/Index.js")


}
<div>
    <h1>@L("Person")</h1>
    <div class="row">
        <div class="col-md-12">
            <button data-toggle="modal" data-target="#PersonCreateModal" class="btn btn-primary pull-right"> <i class="fa fa-plus"></i> @L("CreatePerson")</button>
            <table class="table">
                <thead>
                <tr>
                    <th>@L("Name")</th>
                    <th>@L("EmailAddress")</th>
                    <th>@L("CreationTime")</th>
                </tr>
                </thead>
                <tbody>
                @foreach (var person in Model.Items)
                {
                    <tr>
                        <td>@person.Name </td>
                        <td>@person.EmailAddress</td>
                        <td>@person.CreationTime</td>
                    </tr>
                }
                </tbody>
            </table>


        </div>


    </div>



</div>


<div class="modal fade" id="PersonCreateModal" tabindex="-1" role="dialog" aria-labelledby="PersonCreateModalLabel" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form name="tenantCreateForm" role="form" novalidate class="form-validation">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>@L("CreatePerson")</span>
                    </h4>
                </div>
                <div class="modal-body">
 

                    <div class="form-group">
                        <label>@L("Name")</label>
                        <input class="form-control" type="text" name="Name" required maxlength="@PhoneBookConsts.MaxNameLength" minlength="2">

                     </div>

                    <div class="form-group">
                        <label>@L("EmailAddress")</label>
                        <input class="form-control" type="email" name="EmailAddress"  required maxlength="@PhoneBookConsts.MaxEmailAddressLength" minlength="2">

                    </div>

              

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">@L("Cancel")</button>
                    <button type="submit" class="btn btn-primary blue">
                        <i class="fa fa-save"></i> <span>@L("Save")</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

然后是js代码

(function() {
    $(function() {
        var _personService = abp.services.app.person;

        var _$modal = $('#PersonCreateModal');

        var _$form = _$modal.find("form");

        _$form.validate();

        _$form.find('button[type="submit"]').click(function (e) {

            e.preventDefault();
            if (!_$form.valid()) {
                return;
            }

            var person = _$form.serializeFormToObject();
            abp.ui.setBusy(_$modal);
            console.log(person);
            _personService.createPersonAsync(person).done(function () {
                _$modal.modal("hide");
                location.reload(true); //reload page to see new person!
            }).always(function() {
                abp.ui.clearBusy(_$modal);
            });
            });


     










        _$modal.on('shown.bs.modal', function () {
            _$modal.find('input:not([type=hidden]):first').focus();
        });
    });
})();

然后运行项目

ok，就是正常实现了。添加person功能

那么我们的删除、修改功能怎么做呢。空了我在更新。