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即可生成压缩版本．