asp.net zero 8.2 學習-8-實現在頁面添加、編輯、刪除、查看實體

本節學習在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 name="id"></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 class="modal-body">
    <div id="DemoObjectInformationsTab">

        <form name="DemoObjectInformationsForm" role="form" novalidate class="form-validation">

            @if (Model.IsEditMode) //判斷是否爲編輯狀態
            {
                <input type="hidden" name="id" value="@Model.DemoObject.Id" />
            }

            <div class="form-group">
                <label for="DemoObject_Name">@L("Name")</label>
                <input class="form-control" id="DemoObject_Name" value="@Model.DemoObject.Name" type="text" name="name" required maxlength="@EDU.SIS.Demo.DemoObjectConsts.MaxNameLength" />
            </div>

            <div class="form-group">
                <label for="DemoObject_Age">@L("Age")</label>
                <input class="form-control m-input" id="DemoObject_Age" value="@Model.DemoObject.Age" type="number" name="age" />
            </div>

            <div class="form-group">
                <div class="kt-checkbox-list">
                    <label for="DemoObject_IsVip" class="kt-checkbox">
                        <input id="DemoObject_IsVip" type="checkbox" name="isVip" value="true" @Html.Raw(Model.DemoObject.IsVip ? "checked=\"checked\"" : "") />
                        @L("IsVip")
                        <span></span>
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label for="DemoObject_EndDateTime">@L("EndDateTime")</label>
                <input class="form-control date-picker" id="DemoObject_EndDateTime" type="text" name="endDateTime" value="@Model.DemoObject.EndDateTime" />
            </div>

        </form>
    </div>
</div>

<!--通用對話框底部-->
@await Html.PartialAsync("~/Areas/app/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")

三、在EDU.SIS.Web.Mvc\wwwroot\view-resources\Areas\app\Views\Demo目錄下編寫_CreateOrEditModal.js,用於保存創建或者編輯的實體

(function ($) {

    app.modals.CreateOrEditDemoObjectModal = function () {
        //後臺接口服務
        var _demoObjectService = abp.services.app.demoObject;
        var _modalManager;
        var _$demoObjectInformationForm = null;

        //初始化
        this.init = function (modalManager) {
            _modalManager = modalManager;
            //獲取modal對話框對象
            var modal = _modalManager.getModal();
            //時間選擇控件語言設置
            modal.find('.date-picker').datetimepicker({
                locale: abp.localization.currentLanguage.name === "zh-Hans" ? "zh-cn" : abp.localization.currentLanguage.name,
                format: 'YYYY-MM-DD HH:mm:ss'
            });
            //獲取模態對話框表單數據
            _$demoObjectInformationForm = _modalManager.getModal().find('form[name=DemoObjectInformationsForm]');
            ////驗證模態對話框表單數據
            _$demoObjectInformationForm.validate();
        };

        //保存操作
        this.save = function () {
            console.log(1);
            if (!_$demoObjectInformationForm.valid()) {
                return;
            }
            //序列化表單數據
            var demoObject = _$demoObjectInformationForm.serializeFormToObject();
            //設置繁忙狀態
            _modalManager.setBusy(true);
            //保存數據
            _demoObjectService.createOrEdit( //這裏的方法名稱createOrEdit必須首字母小寫
                demoObject
            ).done(function () {
                //通知對話框
                abp.notify.info(app.localize('SavedSuccessfully'));
                //關閉模態對話框
                _modalManager.close();
                // 觸發保存事件
                abp.event.trigger('app.createOrEditDemoObjectModalSaved');
            }).always(function () {
                //取消繁忙狀態
                _modalManager.setBusy(false);
            });
        };
    };
})(jQuery);

四、在EDU.SIS.Web.Mvc\wwwroot\view-resources\Areas\app\Views\Demo\index.js給創建按鈕添加事件，打開對話框
首先要創建模態對話框對象：

//創建修改模態框對象
var _createOrEditModal = new app.ModalManager({
    viewUrl: abp.appPath + 'app/Demo/CreateOrEditModal',
    scriptUrl: abp.appPath + 'view-resources/Areas/app/Views/Demo/_CreateOrEditModal.js',
    modalClass: 'CreateOrEditDemoObjectModal'
});

編寫按鈕點擊事件,實現創建實體功能

//打開創建修改模態框事件
$('#CreateNewDemoObjectButton').on('click', function () {
    _createOrEditModal.open();
});

給datatable,操作方法列，添加編輯操作：

{
    text: app.localize('Edit'),
    visible: function () {
        return _permissions.edit;
    },
    action: function (data) { //編輯數據
        //console.log('edit');
        _createOrEditModal.open({ id: data.record.demoObject.id });
    }
},

這樣就實現了創建或編輯實體功能。

刪除實體

首先在index.js添加刪除實體方法：

//刪除數據
function deleteDemoObject(demoObject) {
    //刪除確認對話框
    abp.message.confirm(demoObject.name, app.localize('AreYouSure'),function (isConfirmed) {
        if (isConfirmed) {
            //調用後臺，刪除數據
            _demoObjectService.delete({ id: demoObject.id }).done(function () {
                //刷新列表數據
                getDemoObject();
                //刪除成功提示
                abp.notify.success(app.localize('SuccessfullyDeleted'));
            });
        }
    });
}

再給datatable操作方法列，添加刪除實體方法,這樣就實現了刪除實體功能

 {
    text: app.localize('Delete'),
    visible: function () {
        return _permissions.delete;
    },
    action: function (data) { //刪除數據
        //console.log('delete');
        deleteDemoObject(data.record.demoObject);
    }
}

查看實體詳情

一、在DemoController中添加查看實體詳情方法：

/// <summary>
/// 查看實體詳情
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public async Task<PartialViewResult> ViewDemoObjectModal(int id)
{
    var rest = await _demoObjectAppService.GetDemoObjectForView(id);

    var model = new DemoObjectViewModel()
    {
        Name = rest.DemoObject.Name,
        Age = rest.DemoObject.Age,
        Price = rest.DemoObject.Price,
        IsVip = rest.DemoObject.IsVip ? "是" : "不是",
        EndDateTime = rest.DemoObject.EndDateTime.ToString("yyyy-MM-dd HH:mm:ss")
    };

    return PartialView("_ViewDemoObjectModal", model);
}

所需要的視圖模型：

namespace EDU.SIS.Web.Areas.app.Models.Demo
{
    public class DemoObjectViewModel
    {
        /// <summary>
        /// 姓名
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// 年齡
        /// </summary>
        public int Age { get; set; }
        /// <summary>
        /// 價格
        /// </summary>
        public double Price { get; set; }
        /// <summary>
        /// 是否爲會員
        /// </summary>
        public string IsVip { get; set; }
        /// <summary>
        /// 截至時間
        /// </summary>
        public string EndDateTime { get; set; }

    }
}

二、創建_ViewDemoObjectModal分部視圖：

@using EDU.SIS.Web.Areas.app.Models.Common.Modals
@using EDU.SIS.Web.Areas.app.Models.Demo
@model DemoObjectViewModel
@await Html.PartialAsync("~/Areas/app/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel("詳情"))

<div class="modal-body">
    <div id="DemoObjectInformationsTab">

        <div class="row">
            <div class="col-6 mb-3">
                <h6>@L("Name") :</h6>
                @Model.Name
            </div>
            <div class="col-6 mb-3">
                <h6>@L("Age") :</h6>
                @Model.Age
            </div>
            <div class="col-6 mb-3">
                <h6>@L("IsVip") :</h6>
                @Model.IsVip
            </div>
            <div class="col-6 mb-3">
                <h6>@L("EndDateTime") :</h6>
                @Model.EndDateTime
            </div>

        </div>

    </div>
</div>

@await Html.PartialAsync("~/Areas/app/Views/Common/Modals/_ModalFooterWithClose.cshtml")

三、在index.js中獲取ViewDemoObjectModal對象，再給datatable操作方法列，添加查看詳情點擊事件

//單條數據詳情,獲取模態對話框對象
var _viewDemoObjectModal = new app.ModalManager({
    viewUrl: abp.appPath + 'app/Demo/ViewDemoObjectModal',
    modalClass: 'ViewDemoObjectModal'
});

//給datatable操作方法列，添加查看詳情點擊事件
 {
    text: app.localize('View'),
    visible: function () { return true;},
    action: function (data) { //查看數據
        //console.log('view');
        _viewDemoObjectModal.open({ id: data.record.demoObject.id });
    }
},

總結

通過學習，完成了單個實體的添加、修改、刪除、查看詳情操作；