ABP入門教程12 - 展示層實現增刪改查-腳本

點這里進入ABP入門教程目錄 

創建目錄

在展示層(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\下新建文件夾Course //用以存放Course相關腳本

創建腳本

在JD.CRS.Web.Mvc\wwwroot\view-resources\Views\Course下新建兩個JavaScript文件

查詢腳本

Index.js //用於Course的查詢視圖(Index.cshtml)

(function () {
    $(function () {

        var _courseService = abp.services.app.course;
        var _$modal = $('#CourseCreateModal');
        var _$form = _$modal.find('form');

        _$form.validate({
        });

        $('#RefreshButton').click(function () {
            refreshCourseList();
        });

        $('.delete-course').click(function () {
            var courseId = $(this).attr("data-course-id");
            var courseName = $(this).attr('data-course-name');
            deleteCourse(courseId, courseName);
        });


        $('.edit-course').click(function (e) {
            var courseId = $(this).attr("data-course-id");

            e.preventDefault();
            $.ajax({
                url: abp.appPath + 'Course/EditCourseModal?courseId=' + courseId,

                type: 'POST',
                contentType: 'application/html',
                success: function (content) {
                    $('#CourseEditModal div.modal-content').html(content);
                },

                error: function (e) { }
            });
        });

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

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

            var course = _$form.serializeFormToObject(); //serializeFormToObject is defined in main.js         

            abp.ui.setBusy(_$modal);
            _courseService.create(course).done(function () {
                _$modal.modal('hide');
                location.reload(true); //reload page to see new user!

            }).always(function () {
                abp.ui.clearBusy(_$modal);
            });
        });


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

        });


        function refreshCourseList() {
            location.reload(true); //reload page to see new user!

        }

        function deleteCourse(courseId, courseName) {
            abp.message.confirm(
                abp.utils.formatString(abp.localization.localize('AreYouSureWantToDelete', 'CRS'), courseName),

                function (isConfirmed) {
                    if (isConfirmed) {
                        _courseService.delete({
                            id: courseId

                        }).done(function () {
                            refreshCourseList();

                        });
                    }
                }
            );
        }
    });
})();

修改腳本

_EditCourseModal.js //用於Course的修改視圖(_EditCourseModal.cshtml)

(function ($) {
    var _courseService = abp.services.app.course;
    var _$modal = $('#CourseEditModal');
    var _$form = $('form[name=CourseEditForm]');


    function save() {

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

        var course = _$form.serializeFormToObject(); //serializeFormToObject is defined in main.js   


        abp.ui.setBusy(_$form);
        _courseService.update(course).done(function () {

            _$modal.modal('hide');

            location.reload(true); //reload page to see edited course!
        }).always(function () {
            abp.ui.clearBusy(_$modal);
        });
    }


    //Handle save button click
    _$form.closest('div.modal-content').find(".save-button").click(function (e) {
        e.preventDefault();
        save();

    });

    //Handle enter key
    _$form.find('input').on('keypress', function (e) {

        if (e.which === 13) {
            e.preventDefault();
            save();
        }

    });

    $.AdminBSB.input.activate(_$form);

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

    });

})(jQuery);

小工具

Bundler & Minifier //可用於合並/壓縮js, css等

打開VS工具/擴展和更新/聯機/搜索Bundler & Minifier，點擊下載，重啟VS完成安裝．

右鍵要處理的文件，選擇Bundler & Minifier / Minify File即可生成壓縮版本．