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

经过上一篇,我们的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();
});
});
})();

然后运行项目

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

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

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

上一篇:解决Android SDK Manager更新失败问题


下一篇:在共享DLL中使用MFC