将数据属性值传递到刀片路由

Question

我正在建立一个博客来学习Laravel（5.4.13）。在我的帖子中显示视图，我循环浏览所有相应的帖子评论。每个评论旁边都有一个编辑按钮和一个删除按钮。对于评论编辑，我尝试使用模态而不是重定向到典型的编辑视图。目前，我将特定注释数据存储在两个数据属性中，然后使用jQuery检索这些值。然后我再次使用jQuery将数据传递给模态。这工作正常，但我不确定如何将$ comment-＆gt; id传递给表单路由。任何帮助深表感谢。

@extends('main')
@section('title', 'View Post')
@section('content')
    <div class="row">
        <div class="col-md-8">
            <h1><a href="{{ url('blog/'.$post->slug) }}">{{$post->title}}</h1></a>
            <small>Published: <i class="fa fa-clock-o"></i> {{ $post->created_at->format('M Y, h:i a') }}</small>
            <hr class="light-hr">
            <p class="lead">{{ str_limit($post->body, $limit = 200, $end = '...') }}</p>  
            <hr>

            <div class="tags">
                @foreach($post->tags as $tag)
                    <span class="label">
                        <a href="{{route('tags.show', $tag->id)}}" class="btn btn-sm btn-primary">{{ $tag->name }}</a>
                    </span>
                @endforeach
            </div>
            <br>
            <br>
            {{-- Display comments associated with posts --}}
            <h4>Related Posts <i class="fa fa-level-down"></i></h4>
            @foreach($post->comments as $comment)
                <?php $avatars = array('monsterid', 'identicon', 'wavatar', 'retro'); ?>
                <?php $randAvatars = urlencode($avatars[array_rand($avatars)]); ?>

                <div class="comments">
                    <div class="author-info">
                        <div class="author-img">
                            <img src={{"https://www.gravatar.com/avatar/".md5(strtolower(trim($comment->email)))."?s=55&d=".$randAvatars}} class="img-circle" alt="user profile image">
                        </div>
                        <div class="author-meta">
                            <a href="#"><b>{{$comment->name}}</b></a>
                            made a post.
                            <h6>Published: <i class="fa fa-clock-o"></i> {{ $comment->created_at->format('M Y, h:i a') }}</h6>
                        </div>
                        <div class="comment-controls pull-right">  
                            <button 
                                type="button" 
                                class="btn btn-primary btn-sm fa fa-pencil edit-comment" 
                                data-toggle="modal" 
                                data-comment="{{$comment->comment}}" 
                                data-comment-id="{{$comment->id}}"
                                data-target="#editComment">
                            </button>
                            <button type="button" class="btn btn-danger btn-sm fa fa-trash"></button>
                        </div>
                    </div>
                    <div class="author-comment">
                        <hr>
                        <p>{{$comment->comment}}</p> 
                    </div>
                </div>
            @endforeach
        </div>
        <div class="col-md-4">
            <div class="well">
                <dl class="dl-horizontal">
                    <dt>Created:&nbsp</dt>
                    <dd> {{ $post->created_at->format('M jS, Y') }}</dd>
                    <dd><i class="fa fa-clock-o"></i> {{ $post->created_at->format('h:i:s a') }}</dd>
                </dl>
                <dl class="dl-horizontal">
                    <dt>Last Updated:&nbsp</dt>
                    <dd>{{ $post->updated_at->format('M jS, Y') }}</dd>
                    <dd><i class="fa fa-clock-o"></i> {{ $post->updated_at->format('h:i:s a') }}</dd>
                </dl>
                <dl class="dl-horizontal">
                    <dt>Post Slug:&nbsp</dt>
                    <dd><a href="{{ url('blog/'.$post->slug) }}">{{ url('blog/'.$post->slug) }}</a></dd>
                </dl>
                <dl class="dl-horizontal">
                    <dt>Category:&nbsp</dt>
                    <dd>{{ $post->category->name }}</a></dd>
                </dl>
                <hr>
                <div class="row">
                    <div class="col-sm-6">
                        <a href="{{ URL::route('posts.edit', $post->id) }}" class="btn btn-primary btn-block">Edit</a>
                    </div>
                    <div class="col-sm-6">
                        <form action="{{ route('posts.destroy', $post->id) }}" method="POST">
                            <input type="submit" value="Delete" class="btn btn-danger btn-block">
                            <input type="hidden" name="_token" value="{{ Session::token() }}">
                            {{ method_field('DELETE') }}
                        </form>
                    </div>
                    <div class="col-sm-12">
                        <a href="{{URL::route('posts.index')}}" class="btn btn-default btn-block">Back to <i class="fa fa-long-arrow-right" aria-hidden="true"></i> Posts</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="editComment" tabindex="-1" role="dialog" aria-labelledby="editCommentLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="editCommentLabel">Edit Comment</h4>
          </div>
          <div class="modal-body">

            <form action="{{route('comments.update', $comment->id)}}" method="POST">
                <div class="modal-body">
                    <div class="form-group">
                        <textarea name="comment" class="form-control current-comment"></textarea>
                        <span class="test"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" value="Save Changes" class="btn btn-primary">
                    <input type="hidden" name="_token" value="{{ Session::token() }}">
                    {{ method_field('PUT') }}
                </div>
            </form>

          </div>
        </div>
      </div>
    </div>
    @section('scripts')
        <script>
            $('.edit-comment').on('mousedown', function(){
                var comment = $(this).attr('data-comment');
                var comment_id = $(this).attr('data-comment-id');
                $('.current-comment').html(comment);
                $('.test').html(comment_id);
            });
        </script>
    @endsection
@endsection




// Comments Routes
Route::post('comments/{id}', ['uses' => 'CommentsController@store', 'as' => 'comments.store']);
Route::put('comments/{id}', ['uses' => 'CommentsController@update', 'as' => 'comments.update']);

Answer 1

你快到了。我建议您不需要传递{id}，因为您使用[PUT]方法传递{form}中的数据。

我们可以在{form}中设置一个新的隐藏{input}类型（例如input [name =“edit_comment_id”]），并从表单的{action}属性中的url中删除request参数。

像这样：

<form action="{{route('comments.update')}}" method="POST" id="update-comment">
    <div class="modal-body">
        <div class="form-group">
            <input type="hidden" name="edit_comment_id" /> //place the {id} in here
            <textarea name="comment" class="form-control current-comment"></textarea>
            <span class="test"></span>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <input type="submit" value="Save Changes" class="btn btn-primary">
    <input type="hidden" name="_token" value="{{ Session::token() }}">
    {{ method_field('PUT') }}
    </div>
</form>

然后在您的{scripts}部分：

$('.edit-comment').on('mousedown', function(){
    var comment = $(this).attr('data-comment'); 
    var comment_id = $(this).attr('data-comment-id'); // (e.g 12)
    var oFormUpdateComment = $('#update-comment'); //add an {id} attribute on your form name 'update-comment' as given above.
    oFormUpdateComment.find('input[name="edit_comment_id"]').val(comment_id);
}); 

由于我们不再在'comments'网址旁边传递请求参数，您将更新[routes.php]，如下所示：

Route::post('comments', ['uses' => 'CommentsController@store', 'as' => 'comments.store']);
Route::put('comments', ['uses' => 'CommentsController@update', 'as' => 'comments.update']);

然后在你的[CommentsController]中，因为你已经知道如何获取这些值：

use Illuminate\Support\Facades\Input;
class CommentsController extends Controller
{
    protected function store()
    {
        print_r('<pre>');
        var_dump(Input::get('edit_comment_id'));
    }

    protected function update()
    {
        print_r('<pre>');
        var_dump(Input::all());
    }
}

希望这有助于您的情况。

Answer 2

我不愿意自己回答这个问题，但是在重新思考我的方法之后能够让它发挥作用。我没有尝试以某种方式改变表单中的刀片URL，而是将action属性留空并在事件触发时动态构建url。正如我之前所做的那样，我从数据属性中获取数据，但不是尝试更改表单中的刀片标记，而是构建url，然后将其添加到action属性中。 thread这是一个很好的帮助。我发布了我的更新代码，它可以帮助任何人。

@extends('main')
@section('title', 'View Post')
@section('content')
    <div class="row">
        <div class="col-md-8">
            <h1><a href="{{ url('blog/'.$post->slug) }}">{{$post->title}}</h1></a>
            <small>Published: <i class="fa fa-clock-o"></i> {{ $post->created_at->format('M Y, h:i a') }}</small>
            <hr class="light-hr">
            <p class="lead">{{ str_limit($post->body, $limit = 200, $end = '...') }}</p>  
            <hr>
            <div class="tags">
                @foreach($post->tags as $tag)
                    <span class="label">
                        <a href="{{route('tags.show', $tag->id)}}" class="btn btn-sm btn-primary">{{ $tag->name }}</a>
                    </span>
                @endforeach
            </div>
            <br>
            <br>
            {{-- Display comments associated with posts --}}
            <h4>Related Posts <i class="fa fa-level-down"></i></h4>
            @foreach($post->comments as $comment)
                <?php $avatars = array('monsterid', 'identicon', 'wavatar', 'retro'); ?>
                <?php $randAvatars = urlencode($avatars[array_rand($avatars)]); ?>

                <div class="comments">
                    <div class="author-info">
                        <div class="author-img">
                            <img src={{"https://www.gravatar.com/avatar/".md5(strtolower(trim($comment->email)))."?s=55&d=".$randAvatars}} class="img-circle" alt="user profile image">
                        </div>
                        <div class="author-meta">
                            <a href="#"><b>{{$comment->name}}</b></a>
                            made a post.
                            <h6>Published: <i class="fa fa-clock-o"></i> {{ $comment->created_at->format('M Y, h:i a') }}</h6>
                        </div>
                        <div class="comment-controls pull-right">
                            {{-- Store comment specific data to built URL for modal --}}
                            <button 
                                type="button" 
                                class="btn btn-primary btn-sm fa fa-pencil edit-comment" 
                                data-toggle="modal" 
                                data-comment="{{$comment->comment}}" 
                                data-comment-id="{{$comment->id}}"
                                data-target="#editComment">
                            </button>
                            <button type="button" class="btn btn-danger btn-sm fa fa-trash" ></button>
                        </div>
                    </div>
                    <div class="author-comment">
                        <hr>
                        <p>{{$comment->comment}}</p> 
                    </div>
                </div>
            @endforeach
        </div>
        <div class="col-md-4">
            <div class="well">
                <dl class="dl-horizontal">
                    <dt>Created:&nbsp</dt>
                    <dd> {{ $post->created_at->format('M jS, Y') }}</dd>
                    <dd><i class="fa fa-clock-o"></i> {{ $post->created_at->format('h:i:s a') }}</dd>
                </dl>
                <dl class="dl-horizontal">
                    <dt>Last Updated:&nbsp</dt>
                    <dd>{{ $post->updated_at->format('M jS, Y') }}</dd>
                    <dd><i class="fa fa-clock-o"></i> {{ $post->updated_at->format('h:i:s a') }}</dd>
                </dl>
                <dl class="dl-horizontal">
                    <dt>Post Slug:&nbsp</dt>
                    <dd><a href="{{ url('blog/'.$post->slug) }}">{{ url('blog/'.$post->slug) }}</a></dd>
                </dl>
                <dl class="dl-horizontal">
                    <dt>Category:&nbsp</dt>
                    <dd>{{ $post->category->name }}</a></dd>
                </dl>
                <hr>
                <div class="row">
                    <div class="col-sm-6">
                        <a href="{{ URL::route('posts.edit', $post->id) }}" class="btn btn-primary btn-block">Edit</a>
                    </div>
                    <div class="col-sm-6">
                        <form action="{{ route('posts.destroy', $post->id) }}" method="POST">
                            <input type="submit" value="Delete" class="btn btn-danger btn-block">
                            <input type="hidden" name="_token" value="{{ Session::token() }}">
                            {{ method_field('DELETE') }}
                        </form>
                    </div>
                    <div class="col-sm-12">
                        <a href="{{URL::route('posts.index')}}" class="btn btn-default btn-block">Back to <i class="fa fa-long-arrow-right" aria-hidden="true"></i> Posts</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="editComment" tabindex="-1" role="dialog" aria-labelledby="editCommentLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="editCommentLabel">Edit Comment</h4>
          </div>
          <div class="modal-body">
            <form id="comment-edit-modal" action="" method="POST">
                <div class="modal-body">
                    <div class="form-group">
                        <textarea name="comment" class="form-control current-comment"></textarea>
                        <span class="test"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" value="Save Changes" class="btn btn-primary">
                    <input type="hidden" name="_token" value="{{ Session::token() }}">
                    {{ method_field('PUT') }}
                </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    @section('scripts')
        <script>
            $('.edit-comment').on('mousedown', function(){
                var comment = $(this).attr('data-comment');
                $('.current-comment').html(comment);
                var comment_id = $(this).attr('data-comment-id');
                var form = $('#comment-edit-modal')
                // Set current URL
                var comment_edit_URL = {!! json_encode(url('/comments')) !!} + '/' + comment_id;
                // Append currrent URL
                form.attr('action', comment_edit_URL);
            });
        </script>
    @endsection
@endsection