带有 HTML 表单的 Laravel 删除按钮

Posted 2023-02-24

【中文标题】带有 HTML 表单的 Laravel 删除按钮

【英文标题】：Laravel delete button with HTML form

【发布时间】：2018-02-16 08:05:18

【问题描述】：

我使用的是 html 表单，而不是 Laravel Collective。

现在我已经成功地为我的 CMS 中的用户创建了一个 CRUD，但有一件事情困扰着我：

如何在我的用户列表中设置删除按钮，而不是在特定的编辑页面？

此外，当用户单击“删除”按钮以显示删除特定用户的确认弹出窗口时会很好。

所以，这是我的代码：

控制器：

/**
 * Remove the specified resource from storage.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function destroy($id)

    $user = User::findOrFail($id);
    $user->delete();

    return redirect('/admin/users'); 

用户列表页面：

@extends('layouts.backend')

@section('content')
  <h1>Users</h1>
  <a class="btn btn-primary" href="/admin/users/create">Create new user</a>
  <table class="table">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Status</th>
        <th>Created</th>
        <th>Updated</th>
        <th>Operations</th>
      </tr>

    </thead>
    <tbody>
      @if($users)
        @foreach($users as $user)
          <tr>
            <td>$user->id</td>
            <td>$user->name</td>
            <td>$user->email</td>
            <td>$user->role ? $user->role->name : 'User has no role'</td>
            <td>$user->status == 1 ? 'Active' : 'Not active'</td>
            <td>$user->created_at->diffForHumans()</td>
            <td>$user->updated_at->diffForHumans()</td>
            <td>
              <a href="/admin/users/$user->id/edit" class="btn btn-primary">Edit</a>
              <a class="btn btn-danger" href="">Delete</a> // HOW TO ACHIEVE THIS?
            </td>
          </tr>
        @endforeach
      @endif
    </tbody>
  </table>

@endsection

具体编辑用户页面：

@extends('layouts.backend')

@section('content')
  <h1>Edit user</h1>
  <form method="POST" action="/admin/users/$user->id">
     csrf_field() 
     method_field('PATCH') 

    <div class="form-group">
      <label>Name:</label>
      <input type="text" name="name" class="form-control" value="$user->name">
    </div>

    <div class="form-group">
      <label>Email:</label>
      <input type="text" name="email" class="form-control" value="$user->email">
    </div>

    <div class="form-group">
      <label>Role:</label>
      <select name="role_id" class="form-control">
        @if($user->role_id == 1)
          <option value="1" selected>Administrator</option>
          <option value="2">Editor</option>
        @else
          <option value="1">Administrator</option>
          <option value="2" selected>Editor</option>
        @endif
      </select>
    </div>

    <div class="form-group">
      <label>Status:</label>
      <select name="status" class="form-control">
        @if($user->status == 1)
          <option value="1" selected>Active</option>
          <option value="0">Not active</option>
        @else
          <option value="1">Active</option>
          <option value="0" selected>Not active</option>
        @endif
      </select>
    </div>

    <div class="form-group">
      <label>Password</label>
      <input type="password" name="password" class="form-control" value="$user->password">
    </div>

    <div class="form-group">
      <input type="submit" name="submit" value="Update user" class="btn btn-primary">
    </div>
  </form>

  <form id="delete-form" method="POST" action="/admin/users/$user->id">
     csrf_field() 
     method_field('DELETE') 

    <div class="form-group">
      <input type="submit" class="btn btn-danger" value="Delete user">
    </div>
  </form>

  @include('inc.errors')
@endsection

路线：

Route::group(['middleware'=>'admin'], function()
     Route::resource('admin/users', 'AdminUsersController');

     Route::get('/admin', function()
       return view('admin.index');
     );
    // Route::resource('admin/posts', 'AdminPostsController');
);

【参考方案1】：

带有“laravel 表单助手”和 jquery 的选项

<div class="actions">
    <a href="#" class="list-icons-item delete-action">
        <i class="icon-trash"></i>
    </a>
     Form::open(['url' => route('admin.users.destroy', $user), 'method' => 'delete']) 
     Form::close() 
</div>


<script>
    $(document).ready(function () 
        $('.delete-action').click(function (e) 
            if (confirm('Are you sure?')) 
                $(this).siblings('form').submit();
            

            return false;
        );
    );
</script>

【参考方案2】：

你可以像这样更新你的代码：

<a class="btn btn-danger" href="/admin/users/$user->id/delete" >Delete</a>

或您应该使用以下路由名称删除用户：

<a href=" route('admin.user.delete', [$user->id]) " class="btn btn-xs btn-danger" onclick="return confirm('Are you sure?')">Delete</a>

【讨论】：

这行不通，因为我没有删除方法的路线，也不想为此创建页面。正如 Mayank 所回答的，最好使用 AJAX。还是谢谢你！

【参考方案3】：

从您发布的代码中并不明显，但您的 DELETE 路由需要 DELETE 方法。应该的！

但在您的列表中，您正尝试使用 GET 方法访问它。

真的，您应该只重用编辑页面中的代码，它已经伪造了DELETE 方法。

类似这样的：

...
<td>
    <a href="/admin/users/$user->id/edit" class="btn btn-primary">Edit</a>
    <form method="POST" action="/admin/users/$user->id">
         csrf_field() 
         method_field('DELETE') 

        <div class="form-group">
            <input type="submit" class="btn btn-danger delete-user" value="Delete user">
        </div>
    </form>
</td>
...

...
// Mayank Pandeyz's solution for confirmation customized for this implementation
<script>
    $('.delete-user').click(function(e)
        e.preventDefault() // Don't post the form, unless confirmed
        if (confirm('Are you sure?')) 
            // Post the form
            $(e.target).closest('form').submit() // Post the surrounding form
        
    );
</script>

【讨论】：

哇，这是最好的解决方案，而且很简单！我怎么没想到在循环中直接使用表单……所以，我不需要 AJAX。我已经尝试过了，效果很好！非常感谢，开发者！

乐于助人:)

加一个比我的解决方案更好:)

嗨，我也在尝试这种用户删除功能，但不起作用 删除

@csrf 和 @method('DELETE') 当前

【参考方案4】：

正如您所说当用户单击“删除”按钮以显示删除特定用户的确认弹出窗口时会很好。为此，您必须使用jquery 和ajax。更改以下代码：

<a class="btn btn-danger" href="">Delete</a>

到

<a class="btn btn-danger delete_user" href="javascript:void(0);" id="$user->id">Delete</a>

并放置一个事件监听器，例如：

$('.delete_user').click(function()
  if( confirm('Are you sure?') )
  
    var id = $(this).attr('id');
    // Make an ajax call to delete the record and pass the id to identify the record
  
);

【讨论】：

是的，我猜我必须使用 AJAX 来完成这项任务。好的，谢谢你的回答。干杯！