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