欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ABP开发手记12 - 展示层实现增删改查-脚本

程序员文章站 2022-06-09 11:29:40
点这里进入ABP开发手记目录 创建目录 在展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\下新建文件夹Course //用以存放Course相关脚本 创建脚本 在JD.CRS.Web.Mvc\wwwroot\view-resources\View ......

点这里进入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完成安装.

ABP开发手记12 - 展示层实现增删改查-脚本

右键要处理的文件,选择bundler & minifier / minify file即可生成压缩版本.

ABP开发手记12 - 展示层实现增删改查-脚本