Question

我正在研究Laravel应用程序的CRUD部分。

假设单击条目的删除按钮时，将显示一个模式，并要求用户确认是否删除相应的条目。

这是我的前端代码。

我的计划A：

您可以看到模式中的确认按钮位于代码中的表单内部，但位于实际HTML文档中的form元素之外。

单击该按钮可使模态可见

<button id="pj_btn_delete-{{ $project->id }}" 
   class="btn btn-danger pj_btn_delete" type="button" 
   data-toggle="modal" data-target="#pj_modal_delete-{{ $project->id }}">
   Delete</button>

刀片中的删除模式

<div id="pj_modal_delete-{{ $project->id }}" class="modal fade pj_modal_delete"
            tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">X</h4>
                </div>
                <div class="modal-body">
                  <p>Are you sure to delete it?</p>
                </div>
                <div class="modal-footer">
                        <button type="button" id="pj_cancel-{{ $project->id }}" class="btn btn-default pj_cancel" data-dismiss="modal">Cancel</button>
                        <form id="pj_form_delete-{{ $project->id }}"
                            action="{{ route('projects.destroy',$project->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" id="pj_delete-{{ $project->id }}"
                                class="btn btn-primary pj_delete">Confirm
                            </button>
                        </form>
                </div>
              </div>
            </div>
        </div>

顺便说一句，这些是路由和控制器的代码

路线

Route::resource('admin/projects','ProjectController');

控制器中的删除方法

 public function destroy(Project $project)
{
    $project->clients()->detach();
    $project->staff()->detach();
    // $project->slack_channels()->detach();
    $project->delete();

    return redirect()->route('projects.index')
                    ->with('success','The deletion is complete');
}

我的计划B：

我也试图像这样提交JS的删除表单，但是它没有任何改变。

$( ".pj_delete" ).click(function() {

    let pj_id = $(this).attr('id').split('-')[1];
    let pj_form_delete_id = "pj_form_delete-" + pj_id;

    $(pj_form_delete_id).submit();

});

我的计划C：

我还将模式的“确认”按钮变成了指向delete方法的链接。也没用。

<a class="btn btn-primary" href="{{ 
 route('projects.destroy',$project->id) }}">Confirm</a>

计划C删除路线

Route::delete('admin/project/delete/{id}',array('uses' => 'ProjectController@destroy', 'as' => 'project.delete'));

这两种方法均未生成可以删除具有相应ID的项目的确认按钮，并且在所有这些方法中我均未出错。请帮忙。谢谢！

Answer 1

您应该指出您的第一次尝试是什么错误。您只是说这没用。

对于计划B，您需要在选择器中添加＃：

let pj_form_delete_id = "#pj_form_delete-" + pj_id;

...，对于您的计划C，您需要一个GET路由而不是DELETE才能使其与链接一起使用。单击链接会生成一个GET请求。

Route::get('admin/project/delete/{id}',array('uses' => 'ProjectController@destroy', 'as' => 'project.delete'));

话虽如此，您应该尝试使用DELETE和有效的表单进行首次尝试。如果您可以提供更多关于不起作用的详细信息，则有人可以为您提供帮助。

Answer 2

这是我为您提供的解决方案（完整的计划A）。请注意，我留意了语言文件调用，因为我认为这样会派上用场：

如果您有任何疑问或需要查看开源项目的工作示例，请告诉我。

为方便起见，我正在使用此软件包Form Builder https://laravelcollective.com/docs/master/html#installation 不需要，但是您需要更改对普通HTML表单和HTML按钮的调用。

祝你好运！

杰里米

// Web管理员路由web.php

Route::group(['prefix' => 'admin'], function () {
    Route::resource('projects', 'ProjectController', [
        'names'    => [
            'destroy'   => 'destroyproject',
        ]
    ]);
});

// HTML表单刀片视图文件：/resources/views/admin/modals/delete-project-modal-form.php

<div class="modal fade modal-danger" id="modal_delete" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fa fa-question-circle fa-fw mr-1 text-white"></i>
                    {!! trans('admin.modals.delete-project.title') !!}
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">
                        {!! trans('admin.modals.delete-project.close') !!}
                    </span>
                </button>
            </div>
            <div class="modal-body">
                <p>
                    {!! trans('admin.modals.delete-project.message') !!}
                </p>
            </div>
            <div class="modal-footer">
                {!! Form::open(['method' => 'DELETE', 'route' => ['destroyproject', $projectId], 'role' => 'form', 'id' => 'delete_project_form', 'name' => 'delete_project_form']) !!}
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="_method" value="DELETE">
                    <meta name="_token" content="{!! csrf_token() !!}" />
                    {!! Form::button('<i class="fa fa-fw fa-close" aria-hidden="true"></i> ' . trans('admin.modals.delete-project.cancel'), array('class' => 'btn btn-outline pull-left btn-light', 'type' => 'button', 'data-dismiss' => 'modal' )) !!}
                    {!! Form::button('<i class="fa fa-fw fa-trash-o" aria-hidden="true"></i> ' . trans('admin.modals.delete-project.confirm'), array('class' => 'btn btn-danger pull-right', 'type' => 'submit', 'id' => 'confirm' )) !!}
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

//包括刀片中的上述模态刀片

@include('admin.modals.delete-project-modal-form', ['projectId' => $project->id])

//刀片中的模式HTML触发器

<button type="button" class="btn btn-danger btn-sm btn-block delete-project-trigger" data-toggle="modal" data-target="#modal_delete" data-projectid="{{ $project->id }}">
    <i class="fa fa-trash-o fa-fw" aria-hidden="true"></i>
    <span class="hidden-xs hidden-sm hidden-md">
        {{ trans('admin.buttons.delete') }}
    </span>
</button>

//包含在刀片中以触发模式的Javascript

@push('scripts')
    <script type="text/javascript">
        $('.delete-project-trigger').click(function(event) {
            var projectId = $(this).data("projectid");
            $('#modal_delete').on('show.bs.modal', function (e) {
                document.delete_project_form.action = "{{ url('/') }}" + "/admin/projects/" + projectId;
            });
        });
    </script>
@endpush

//在您的app.blade.php中或您使用的任何布局中包括此内容，以确保您可以包含脚本：

@stack('scripts')

//在ProjectController.php中 //确保在文件顶部包含对项目模型的调用，例如：

use App\Models\Project;

//这是destroy中的ProjectController.php方法

/**
 * Remove the specified resource from storage.
 *
 * @param Request $request
 * @param int $id
 *
 * @return \Illuminate\Http\Response
 */
public function destroy(Request $request, $id)
{
    $project = Project::findOrFail($id);

    $project->clients()->detach();
    $project->staff()->detach();
    // $project->slack_channels()->detach();

    $project->delete();

    return redirect()
        ->route('projects.index')
        ->withSuccess(trans('messages.success.project-deleted'));
}

//语言行文件：/resources/lang/en/admin.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Admin language lines
    |--------------------------------------------------------------------------
    |
    */

    'modals' => [
        'delete-project' => [
            'close'     => 'Close',
            'title'     => 'Confirm Delete',
            'message'   => 'Delete this project?',
            'cancel'    => 'Cancel',
            'confirm'   => 'Confirm Delete',
        ]
    ],

];

//语言行文件：/resources/lang/en/messages.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Message language lines
    |--------------------------------------------------------------------------
    |
    */

    'success' => [
        'project-deleted' => 'Project deleted.',
    ],

];

概述示例的工作文件以供参考：

示例项目1

路线 https://github.com/jeremykenedy/larablog/blob/master/routes/web.php#L48

控制器 https://github.com/jeremykenedy/larablog/blob/master/app/Http/Controllers/Admin/PostController.php#L115

请求 https://github.com/jeremykenedy/larablog/blob/master/app/Http/Requests/DestroyPostRequest.php

刀片文件 https://github.com/jeremykenedy/larablog/blob/master/resources/views/admin/post/edit.blade.php#L70

https://github.com/jeremykenedy/larablog/blob/master/resources/views/admin/post/edit.blade.php#L87

https://github.com/jeremykenedy/larablog/blob/master/resources/views/admin/post/edit.blade.php#L93

https://github.com/jeremykenedy/larablog/blob/master/resources/views/admin/modals/delete-modal.blade.php

示例项目2

路线 https://github.com/jeremykenedy/laravel-users/blob/master/src/routes/web.php#L15

控制器 https://github.com/jeremykenedy/laravel-users/blob/master/src/App/Http/Controllers/UsersManagementController.php#L246