Click here to enter the ABP Development Notes directory
Create a directory
In the presentation layer (ie JD.CRS.Web.Mvc) of \ wwwroot \ view-resources \ Views \ New Folder under Course // will hold the relevant script Course
Create a script
New two JavaScript files in the \ wwwroot \ view-resources \ Views under JD.CRS.Web.Mvc \ Course
Query script
Index.js // Course for the query view (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 })();
Modify the script
_EditCourseModal.js // Course for modifying the view (_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);
small tools
Bundler & Minifier // available for the merge / compress js, css etc.
Open VS Tools / expanded and updated / online / search Bundler & Minifier, click on the download, restart VS to complete the installation.
Right-file to be processed, select Bundler & Minifier / Minify File to generate a compressed version.