点这里进入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即可生成压缩版本．
