asp.net zero 8.2 学习-8-实现在页面添加、编辑、删除、查看实体

系列目录：
asp.net zero 8.2 学习-1-安装

asp.net zero 8.2 学习-2-创建一个页面

asp.net zero 8.2 学习-3-添加实体，并迁移到数据库

asp.net zero 8.2 学习-4-创建接口及服务

asp.net zero 8.2 学习-5-实现增删改查服务及API测试

asp.net zero 8.2 学习-6-权限控制

asp.net zero 8.2 学习-7-展示实体列表，实现查询，分页，过滤，排序功能

asp.net zero 8.2 学习-8-实现在页面添加、编辑、删除、查看实体

asp.net zero 8.2 学习-9-多租户设置,发送邮件配置

asp.net zero 8.2 学习-10-发布到IIS

asp.net zero 8.2 学习-11-Metronic替换google字体，加速网页加载速度

本节学习在asp.net zero中添加添加、编辑、删除、查看实体的页面。

添加实体编辑实体

删除实体

查看实体详情

添加实体编辑实体

一、 在DemoController中添加CreateOrEditModal方法，用于打开添加或编辑对话框,
需要用到DemoObjectAppService类，通过构造函数注入，这里用到了视图对象模型：CreateOrEditDemoObjectModalViewModel，在mvc/model/demo文件中，

//构造函数注入获取DemoObjectAppService服务类对象 private readonly IDemoObjectAppService _demoObjectAppService; public DemoController(IDemoObjectAppService demoObjectAppServices) { this._demoObjectAppService = demoObjectAppServices; } //创建编辑实体的Action方法,用于显示对话框 /// <summary> /// 创建或编辑实体 /// </summary> /// <param></param> /// <returns></returns> [AbpMvcAuthorize(AppPermissions.Pages_Demo_Create, AppPermissions.Pages_Demo_Edit)] public async Task<PartialViewResult> CreateOrEditModal(int? id) { GetDemoObjectForEditOutput getDemoObjectForEditOutput; if (id.HasValue) { getDemoObjectForEditOutput = await _demoObjectAppService.GetDemoObjectForEdit(new EntityDto { Id = (int)id }); } else { getDemoObjectForEditOutput = new GetDemoObjectForEditOutput() { DemoObject = new CreateOrEditDemoObjectDto() }; getDemoObjectForEditOutput.DemoObject.EndDateTime = DateTime.Now.AddYears(1); } var viewModel = new CreateOrEditDemoObjectModalViewModel() { DemoObject = getDemoObjectForEditOutput.DemoObject }; return PartialView("_CreateOrEditModal", viewModel); } //CreateOrEditDemoObjectModalViewModel视图对象模型： using EDU.SIS.Demo.Dtos; namespace EDU.SIS.Web.Areas.app.Models.Demo { public class CreateOrEditDemoObjectModalViewModel { /// <summary> /// 实体数据 /// </summary> public CreateOrEditDemoObjectDto DemoObject { get; set; } /// <summary> /// 编辑或创建模式 /// </summary> public bool IsEditMode => DemoObject.Id.HasValue; } }

二、在EDU.SIS.Web.Mvc\Areas\app\Views\Demo下创建分部视图_CreateOrEditModal.cshtml，参考User的结构：

@using EDU.SIS.Web.Areas.app.Models.Common.Modals @using EDU.SIS.Web.Areas.app.Models.Demo @model CreateOrEditDemoObjectModalViewModel <!--通用对话框头部--> @await Html.PartialAsync("~/Areas/app/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel(Model.IsEditMode ? (L("EditDemoObject")) : L("CreateNewDemoObject"))) <div> <div> <form role="form" novalidate> @if (Model.IsEditMode) //判断是否为编辑状态 { <input type="hidden" value="@Model.DemoObject.Id" /> } <div> <label for="DemoObject_Name">@L("Name")</label> <input value="@Model.DemoObject.Name" type="text" required maxlength="@EDU.SIS.Demo.DemoObjectConsts.MaxNameLength" /> </div> <div> <label for="DemoObject_Age">@L("Age")</label> <input value="@Model.DemoObject.Age" type="number" /> </div> <div> <div> <label for="DemoObject_IsVip"> <input type="checkbox" value="true" @Html.Raw(Model.DemoObject.IsVip ? "checked=\"checked\"" : "") /> @L("IsVip") <span></span> </label> </div> </div> <div> <label for="DemoObject_EndDateTime">@L("EndDateTime")</label> <input type="text" value="@Model.DemoObject.EndDateTime" /> </div> </form> </div> </div> <!--通用对话框底部--> @await Html.PartialAsync("~/Areas/app/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")