點這裡進入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 })();

修改腳本

_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);

小工具

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

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

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