在页面中将另一个 laravel 刀片视图显示为模式答案

【问题标题】：Display another laravel blade view as a modal in a page在页面中将另一个 laravel 刀片视图显示为模式
【发布时间】：2020-11-16 15:17:51
【问题描述】：

大家好，拜托，我是 Laravel 的新手，我正在创建一个项目管理应用程序，我为项目创建了一个索引页面，并且我有一个可以创建新项目的按钮，它完全是另一个刀片文件，我需要显示刀片作为模态，我尝试使用@include 和引导模态，但是索引页面是显示在模态弹出窗口中而不是创建页面中的页面，我不知道我在哪里弄错了，我需要帮助，因为有很多地方我都需要用到modal。

这是我的索引页

@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col-lg-12 margin-tb">

        <div class="pull-right">
            <a class="btn btn-success" data-toggle="modal" href="{{ route('projects.create') }}" data-target="#createModal"> New Project</a>
        </div>
    </div>
</div>

@if ($message = Session::get('success'))
<div class="alert alert-success">
    <p>{{ $message }}</p>
</div>
@endif

<table class="table table-bordered table-hover">
    <thead class="text-primary">
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Description</th>
            <th>Date Created</th>
            <th>Action</th>
        </tr>
    </thead>
    @foreach ($projects as $project)
    <tbody class="table-striped">

        <tr>
            <td>{{ ++$i }}</td>
            <td>{{ $project->name }}</td>
            <td>{{ $project->introduction }}</td>
            <td>{{ $project->created_at->format('d/m/Y') }}</td>
            <td>
                <form action="{{ route('projects.destroy',$project->id) }}" method="POST">
                    <a class="fas fa-eye fa-lg text-warning mr-1" href="{{ route('projects.show',$project->id) }}"></a>
                    <a class="fas fa-edit fa-lg text-primary mr-1" href=" {{ route('projects.edit',$project->id) }}"></a>

                    @csrf
                    @method('DELETE')

                    <button type="submit" class="fa fa-trash fa-lg text-danger" style="border: none; background-color:white;"></button>
                </form>
            </td>
        </tr>
    </tbody>
    @endforeach
</table>

{!! $projects->links() !!}

@endsection

<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModal" data-attr="{{ route('projects.create') }}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                @include('projects.create')
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

虽然这是创建页面

@extends('layouts.modal')

@section('content')
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h2>New Project</h2>
        </div>
        <div class="pull-right">
            <a class="btn btn-primary" href="{{ route('projects.index') }}"> Back</a>
        </div>
    </div>
</div>

@if ($errors->any())
<div class="alert alert-danger">
    <strong>Whoops!</strong> There were some problems with your input.<br><br>
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<form action="{{ route('projects.store') }}" method="POST">
    @csrf

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Name:</strong>
                <input type="text" name="name" class="form-control" placeholder="Name">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Introduction:</strong>
                <textarea class="form-control" style="height:50px" name="introduction" placeholder="Introduction"></textarea>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>location:</strong>
                <textarea class="form-control" style="height:150px" name="location" placeholder="Location"></textarea>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>

</form>
@endsection

提前谢谢你

【问题讨论】：

我没有你的全部代码库，但我猜你应该从 projects/create 中删除 @extends('layouts.modal') @section('content') 和 @endsection
非常感谢，这就是它的答案，它有效
@NoOorZ24, .@include 适用于不需要 id 的路线，但是需要 id 的路线之一，我如何使用 .@include This .@include(' projects.create) 有效，但我也在尝试这样做 .@include('projects.edit', $project->id)，但似乎不允许
可以通过按不同的按钮（在同一视图中）来更改 ID 还是静态的？如果它正在改变，那么解决方案是：getbootstrap.com/docs/3.3/javascript/#modals-related-target。如果它是静态的，那么您的包含文件已经在同一范围内并且所有变量都可以访问，但是如果您希望在多个视图中使用相同的模式并且您想要标准化传递的数据，则可以传递数据数组：@include('view.name', ['variable' => $variable])

标签： php jquery laravel bootstrap-modal laravel-blade

【解决方案1】：

我后来想出了答案，我做的错误是包括

@extends('layouts.app')

@section('content')

所以页面应该只是表单或您想要显示的内容，没有 @extends('layouts.app')

<form action="{{ route('projects.store') }}" method="POST">
@csrf

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <strong>Name:</strong>
            <input type="text" name="name" class="form-control" placeholder="Name">
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <strong>Introduction:</strong>
            <textarea class="form-control" style="height:50px" name="introduction" placeholder="Introduction"></textarea>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <strong>location:</strong>
            <textarea class="form-control" style="height:150px" name="location" placeholder="Location"></textarea>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</div>

【讨论】：