如何在 laravel 中销毁 CategoryController 中的方法?

How to go destroy method in CategoryController in laravel?

我想使用模态删除数据,我已经得到了我要删除的数据的id,但是当我在模态中点击删除按钮时没有任何反应。如果有问题请告诉我。非常感谢。

我在将数据传输到我的删除确认模式时遇到问题。我已经验证我的删除路由可以从数据库中删除数据,但我面临的问题是我无法将 categoty->id 传递到模态以访问删除。

blade 和 ajax

 @extends('Admin.master')

@section('content')
    <div class="col-md-10 p-5 pt-2">
        <h3><i class="fas fa-tachometer-alt ml-2"></i>دسته بندی ها</h3><hr>
        <a href="{{ route('categories.create') }}" class="btn btn-primary mb-3">
            <i class="fas fa-plus-square"></i>
            افزودن دسته بندی جدید
        </a>
        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>نام دسته</th>
                    <th>تاریخ ایجاد شده</th>
                    <th>اکشن ها</th>
                </tr>
                </thead>
                <tbody>
                @foreach($categories as $category)
                    <tr>
                        <td>{{ $category->id }}</td>
                        <td>{{ $category->name }}</td>
                        <td>{{ $category->created_at }}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('categories.edit', $category->id) }}"  class="btn btn-primary">ویرایش</a>
                                <button type="button" class="btn btn-danger" data-action="{{ route('categories.destroy', $category->id) }}" data-toggle="modal" data-target="#deleteCategory">حذف</button>
                            </div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="deleteCategory" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="deleteCategory" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
            <form action="{{ route('categories.destroy', $category->id) }}">
                @csrf
                @method('DELETE')
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">این عمل برگشت پذیر نیست..</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        آیا از حذف {{ $category->name }} اطمینان دارید؟
                        <input type="hidden" id="category" name="category">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn bg-white" data-dismiss="modal">بستن</button>
                        <button type="submit" class="btn btn-danger" data-action="{{ route('categories.destroy', $category->id) }}" data-toggle="modal" data-target="#deleteCategory">حذف</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $('#deleteCategory').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var modal = $(this);
            modal.find('form').attr('action', action);
        });
    </script>
@endsection

CategoryController.php

public function destroy(Category $category)
{
    dd($category);
}

web.php

Route::resource('categories', 'CategoryController');

我想转到 CategoryController.php 中的 destroy 方法。

它甚至没有显示 dd

我认为您应该更改设置方式。在我看来,如果表单位于另一个页面中,您想要设置表单的方式将起作用,因此当单击删除类别按钮时,浏览器将重定向到另一个页面而不是模态页面。 要使其按照我认为您想要的方式工作,您可以使用一些 HTML 数据属性。 首先,模式中的表单应该类似于

<form id="form-delete-category">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">این عمل برگشت پذیر نیست..</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <!-- a span is used as a container to show the category name -->
      آیا از حذف <span id="category-name"></span> اطمینان دارید؟
      <input type="hidden" id="category" name="category">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn bg-white" data-dismiss="modal">بستن</button>
      <!-- this is button type so no submit event is triggered -->
      <button type="button" class="btn btn-danger" id="handle_delete">حذف</button>
    </div>
  </div>
</form>

现在打开模式的按钮可以更改为:

<button type="button" class="btn btn-danger" data-category="{{$category}}" id="btn-delete-category">حذف</button>

我设置了整个类别对象,但是你可以只使用你需要的。在这种情况下,您的 JS 会发生一些变化。

<button type="button" class="btn btn-danger" data-category-id="{{$category->id}}" data-category-name="{{$category->name}}" id="btn-delete-category">حذف</button>

在您的 java-script 中添加一个函数来处理点击事件,如下所示:

$("#btn-delete-category").on("click", function(e) {
  e.preventDefault();

  // get the category object using the data() function
  let  category = $(this).data('category');
  
  /**
   * If only the name and id where set just get them separatly
   * 
   * let  id = $(this).data('category-id');
   * let  name = $(this).data('category-name');
  */

  // Set the variables in your dom
  $('#category-name').html(category.name);
  $('#category').html(category.id);

  // Generate the URL to delete this category
  $('#form-delete-category').attr('action', route_to_delete_category + category.id);

  // Show the modal
  $('#deleteCategory').modal('show');

});

$("#handle_delete").on("click", function(e) {
  e.preventDefault();

  // Show loading state

  $.ajax({
    url: $(this).attr('action'),
    type: 'DELETE'
  })
  .done(function(response) {
    // Hide loading state
    // Show success message
    $('#deleteCategory').modal('hide');
  })

});