Untitled
unknown
plain_text
2 years ago
14 kB
4
Indexable
$(document).ready(function () { $('#categoriesTable').DataTable({ dom: "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>", buttons: [{ text: 'Ekle', attr: { id: 'btnAdd'// id buton click durumu için burada kullanıldı. }, action : function (e, dt, node, config) { }, className: 'btn btn-success' }, { text: 'Yenile', action: function (e, dt, node, config) { //Burada yenile butonuna basıldığına da Ajax ile içeriğimizi yeniliyeceğiz. $.ajax({ type: 'GET', url: '/Admin/Category/GetAllCategories/', contentType: 'application/json', beforeSend: function () { $('#categoriesTable').fadeOut(1000); $('.spinner-border').show(); }, success: function (data) { const categoryListDto = jQuery.parseJSON(data); if (categoryListDto.ResultStatus === 0) { let tableBody = ''; $.each(categoryListDto.Categories.$values, function (index, category) { tableBody += ` <tr name="${category.Id}"> <td>${category.Id}</td> <td>${category.Name}</td> <td>${category.Description}</td> <td>${convertFirstLetterToUpperCase(category.IsActive)}</td> <td>${convertToShortDate(category.CreatedDate)}</td> <td>${category.CreatedByName}</td> <td> <button class="btn btn-warning btn-sm btn-update" data-id="${category.Id}"><span class="fas fa-edit text-white"></span></button> <button class="btn btn-danger btn-sm btn-delete" data-id="${category.Id}"><span class="fas fa-minus-circle"></span></button> </td> </tr> `; }); $('#categoriesTable > tbody').replaceWith(tableBody); $('.spinner-border').hide(); $('#categoriesTable').fadeIn(1000); }else{ toastr.error(`${categoryListDto.Message}`, 'İşlem başarısız!') } }, error: function (err) { toastr.error(err, 'Başarısız İşlem!') } }); }, className: 'btn btn-warning' }], language: { url: "//cdn.datatables.net/plug-ins/1.13.1/i18n/tr.json" } }); //Datatable burada bitiyor $(function () { const url = '/Admin/Category/Add/'; //url'ye veri tabanımızdan çekmiş olduğumuz kategorileri tanımlıyoruz. const placeHolderDiv = $('#modalPlaceHolder'); // burada da json da başlangı noktasını kullanmak için tanımlama yaptık //Ajax'la partial viewimizi ekrna getirme $('#btnAdd').click(function () { // butana tıklnamada verekli olan function başlaması $.get(url).done(function (data) {//url bilgisini aldık "done" sorun yoksa çalıştır placeHolderDiv.html(data); placeHolderDiv.find(".modal").modal('show'); // sayafada ekleme tablosunun görnmesini sağlıyoruz. }); }); //Ajax'la (GET) partial viewimizi ekrna getirme BİTTİ //Ajax'la (POST) işlemleri placeHolderDiv.on('click', '#btnSave', function (event) { // Add için kaydet tuşuna basılma anı için gerekli fonksiyonların başlaması event.preventDefault(); const form = $('#form-category-add'); // formun json dönşümü const actionUrl = form.attr('action');//formun ierisinde atribiut seçmek için const dataToSend = form.serialize();//formun içerisinde tüm verileri almak için $.post(actionUrl, dataToSend).done(function (data) { // const categoryAddAjaxModel = jQuery.parseJSON(data); // data veriloerinin json da dömnüşümü const newFormBody = $('.modal-body', categoryAddAjaxModel.CategoryAddPartial); placeHolderDiv.find('.modal-body').replaceWith(newFormBody); const isValid = newFormBody.find('[name="IsValid"]').val() === 'True'; // _CategoryAddPartial'ımız daki inputta durumun true olup olmadığını burada kontrol edip isValid içerisine atıyoruz. if (isValid) { const newTableRow = ` <tr name="${categoryAddAjaxModel.CategoryDto.Category.Id}"> <td>${categoryAddAjaxModel.CategoryDto.Category.Id}</td> <td>${categoryAddAjaxModel.CategoryDto.Category.Name}</td> <td>${categoryAddAjaxModel.CategoryDto.Category.Description}</td> <td>${convertFirstLetterToUpperCase(categoryAddAjaxModel.CategoryDto.Category.IsActive)}</td> <td>${convertToShortDate(categoryAddAjaxModel.CategoryDto.Category.CreatedDate)}</td> <td>${categoryAddAjaxModel.CategoryDto.Category.CreatedByName}</td> <td> <button class="btn btn-warning btn-sm btn-update" data-id="${categoryAddAjaxModel.CategoryDto.Category.Id}"><span class="fas fa-edit text-white"></span></button> <button class="btn btn-danger btn-sm btn-delete" data-id="${categoryAddAjaxModel.CategoryDto.Category.Id}"><span class="fas fa-minus-circle"></span></button> </td> </tr> `; const newTableRowObject = $(newTableRow); newTableRowObject.hide(); // oluşmuş olan yeni satırı gizliyoruz $('#categoriesTable').append(newTableRowObject); // yeni satırı tabloya ekliyoruz newTableRowObject.fadeIn(1000); // 3 saniye ye kadar ekrana yavaş - yavaş gelmesini sağlıyoruz. toastr.success(`${categoryAddAjaxModel.CategoryDto.Message}`, 'Başarılı!'); // toaster kütüphanesi ile kayıt durumu ekrana yazdırlıyo. placeHolderDiv.find(".modal").modal('hide'); // post ekranı kapatılıyor. } else { let summaryText = '<br>'; $('#validation-summary > ul > li').each(function () { // each ile hata lar var ise sırasıyla toaster kütüphanesinden ekrana yazdırlıyor. let liText = $(this).text(); summaryText += `*${liText}<br><br>`; }); toastr.warning(summaryText, 'DİKKAT !'); } }); }); //Ajax'la (post) işlemleri bitti //Ajax'la DELETE işlemleri //on burda tıklamayı alıyor $(document).on('click', '.btn-delete', function (event) { event.preventDefault();//Burada butonumuzun tipi submit olmadığı için bunu kullanmasakta olur . Sadece alışkanlık olsun diye yazıyoruz. const id = $(this).attr('data-id'); Swal.fire({ title: 'Silmek istediğinizden emin misiniz?', text: "İlgili kategori silinecektir!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Evet', cancelButtonText: 'Hayır', }).then((result) => { if (result.isConfirmed) { //Burada kategorinin silinme işlemleri yapılacak, ardından silinmiş mesajı gösterilecek $.ajax({ type: 'POST', dataType: 'json', data: { categoryId: id }, url: '/Admin/Category/Delete/', success: function (data) { const result = jQuery.parseJSON(data); if (result.ResultStatus === 0) { Swal.fire({ title: 'İşlem başarılı!', text: 'İlgili kategori silinmiştir.', icon: 'success', cofirmButtonText: 'Tamam' }); const tableRow = $(`[name="${id}"]`); tableRow.fadeOut(3000); } else { Swal.fire({ title: 'Hata oluştu', text: `${result.Message}`, icon: 'error', cofirmButtonText: 'Tamam' }); } }, error: function (err) { toaster.error(err.statusText, 'Hata!'); } }); }; }); }); }); $(function () { const url = '/Admin/Category/Update/'; const placeHolderDiv = $('#modalPlaceHolder'); //category update partial view getirme $(document).on('click', '.btn-update', function (event) { event.preventDefault(); const id = $(this).attr('data-id'); $.get(url, { categoryId: id }) .done(function (data) { placeHolderDiv.html(data); placeHolderDiv.find('.modal').modal('show'); }) .fail(function () { toastr.error('Bir hata oluştu!'); }); }); //category update partial view getirme bitti // placeHolderDiv.on('click', '#btnUpdate', function (event) { event.preventDefault(); const form = $('#form-category-update'); const actionUrl = form.attr('action'); const dataToSend = form.serialize(); $.post(actionUrl, dataToSend) .done(function (data) { const categoryUpdateAjaxModel = jQuery.parseJSON(data); const newFormBody = $('.modal-body', categoryUpdateAjaxModel.CategoryUpdatePartial); placeHolderDiv.find('.modal-body').replaceWith(newFormBody); const isValid = newFormBody.find('[name="IsValid"]').val() === 'True'; if (isValid) { placeHolderDiv.find('.modal').modal('hide'); const currentCategoryTableRow = $(`[name="${categoryUpdateAjaxModel.CategoryDto.Category.Id}"]`); if (!categoryUpdateAjaxModel.CategoryDto.Category.IsDeleted) { const newTableRow = ` <tr name="${categoryUpdateAjaxModel.CategoryDto.Category.Id}"> <td>${categoryUpdateAjaxModel.CategoryDto.Category.Id}</td> <td>${categoryUpdateAjaxModel.CategoryDto.Category.Name}</td> <td>${categoryUpdateAjaxModel.CategoryDto.Category.Description}</td> <td>${convertFirstLetterToUpperCase(categoryUpdateAjaxModel.CategoryDto.Category.IsActive)}</td> <td>${convertToShortDate(categoryUpdateAjaxModel.CategoryDto.Category.CreatedDate)}</td> <td>${categoryUpdateAjaxModel.CategoryDto.Category.CreatedByName}</td> <td> <button class="btn btn-warning btn-sm btn-update" data- id="${categoryUpdateAjaxModel.CategoryDto.Category.Id}"><span class="fas fa-edit text-white"></ span></button> <button class="btn btn-danger btn-sm btn-delete" data- id="${categoryUpdateAjaxModel.CategoryDto.Category.Id}"><span class="fas fa-minus-circle"></span></ button> </td> </tr> `; const newTableRowObject = $(newTableRow); newTableRowObject.hide(); currentCategoryTableRow.replaceWith(newTableRowObject); newTableRowObject.fadeIn(1000); toastr.success(`${categoryUpdateAjaxModel.CategoryDto.Message}`, 'İşlem Başarılı!'); } else { currentCategoryTableRow.fadeOut(1000); toastr.success(`${categoryUpdateAjaxModel.CategoryDto.Category.Name} adlı kategori silindi`,'İşlem Başarılı!') } } else { let summaryText = '<br>'; $('#validation-summary > ul > li').each(function () { let text = $(this).text(); toastr.error(text); }); } }); }); }) });
Editor is loading...