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)

 1 (function () {
 2     $(function () {
 3 
 4         var _courseService = abp.services.app.course;
 5         var _$modal = $('#CourseCreateModal');
 6         var _$form = _$modal.find('form');
 7 
 8         _$form.validate({
 9         });
10 
11         $('#RefreshButton').click(function () {
12             refreshCourseList();
13         });
14 
15         $('.delete-course').click(function () {
16             var courseId = $(this).attr("data-course-id");
17             var courseName = $(this).attr('data-course-name');
18             deleteCourse(courseId, courseName);
19         });
20 
21 
22         $('.edit-course').click(function (e) {
23             var courseId = $(this).attr("data-course-id");
24 
25             e.preventDefault();
26             $.ajax({
27                 url: abp.appPath + 'Course/EditCourseModal?courseId=' + courseId,
28 
29                 type: 'POST',
30                 contentType: 'application/html',
31                 success: function (content) {
32                     $('#CourseEditModal div.modal-content').html(content);
33                 },
34 
35                 error: function (e) { }
36             });
37         });
38 
39         _$form.find('button[type="submit"]').click(function (e) {
40             e.preventDefault();
41 
42             if (!_$form.valid()) {
43                 return;
44             }
45 
46             var course = _$form.serializeFormToObject(); //serializeFormToObject is defined in main.js         
47 
48             abp.ui.setBusy(_$modal);
49             _courseService.create(course).done(function () {
50                 _$modal.modal('hide');
51                 location.reload(true); //reload page to see new user!
52 
53             }).always(function () {
54                 abp.ui.clearBusy(_$modal);
55             });
56         });
57 
58 
59         _$modal.on('shown.bs.modal', function () {
60             _$modal.find('input:not([type=hidden]):first').focus();
61 
62         });
63 
64 
65         function refreshCourseList() {
66             location.reload(true); //reload page to see new user!
67 
68         }
69 
70         function deleteCourse(courseId, courseName) {
71             abp.message.confirm(
72                 abp.utils.formatString(abp.localization.localize('AreYouSureWantToDelete', 'CRS'), courseName),
73 
74                 function (isConfirmed) {
75                     if (isConfirmed) {
76                         _courseService.delete({
77                             id: courseId
78 
79                         }).done(function () {
80                             refreshCourseList();
81 
82                         });
83                     }
84                 }
85             );
86         }
87     });
88 })();
View Code

修改脚本

_EditCourseModal.js //用于Course的修改视图(_EditCourseModal.cshtml)

 1 (function ($) {
 2     var _courseService = abp.services.app.course;
 3     var _$modal = $('#CourseEditModal');
 4     var _$form = $('form[name=CourseEditForm]');
 5 
 6 
 7     function save() {
 8 
 9         if (!_$form.valid()) {
10             return;
11         }
12 
13         var course = _$form.serializeFormToObject(); //serializeFormToObject is defined in main.js   
14 
15 
16         abp.ui.setBusy(_$form);
17         _courseService.update(course).done(function () {
18 
19             _$modal.modal('hide');
20 
21             location.reload(true); //reload page to see edited course!
22         }).always(function () {
23             abp.ui.clearBusy(_$modal);
24         });
25     }
26 
27 
28     //Handle save button click
29     _$form.closest('div.modal-content').find(".save-button").click(function (e) {
30         e.preventDefault();
31         save();
32 
33     });
34 
35     //Handle enter key
36     _$form.find('input').on('keypress', function (e) {
37 
38         if (e.which === 13) {
39             e.preventDefault();
40             save();
41         }
42 
43     });
44 
45     $.AdminBSB.input.activate(_$form);
46 
47     _$modal.on('shown.bs.modal', function () {
48         _$form.find('input[type=text]:first').focus();
49 
50     });
51 
52 })(jQuery);
View Code

小工具

Bundler & Minifier //可用于合并/压缩js, css等

打开VS工具/扩展和更新/联机/搜索Bundler & Minifier，点击下载，重启VS完成安装．

右键要处理的文件，选择Bundler & Minifier / Minify File即可生成压缩版本．

 

posted @ 2019-10-03 01:37  智慧园区-老朱  阅读(1972)  评论(0)  编辑  收藏  举报