In this article, we will learn about how to pass HTML from the Laravel controller to view.

We are also learning how to return a view from the controller to the Laravel blade file.

Steps for Render Html in Controller by Laravel

Step 1: Create Routes

Step 2: Create a method in the controller

Step 3: Create Blade files

Step 1: Create Routes

First, we need to add routes in the web.php file.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

Route::get('products-list', [ProductController::class,'productList'])->name('productList');

Route::get('render-products', [ProductController::class,'renderProducts'])->name('renderProducts');

Step 2: Create a method in the controller

In this step, we need to create two methods in the ProductController.

<?php

namespace App\Http\Controllers;

use App\Models\Product;
use Illuminate\Http\Request;

class ProductController extends Controller
{
    /**
     * Display a listing of the product page.
     */
    public function productList()
    {
        return view('products.product-listing');
    }
    /**
     * Render html with dynamic product data
     */
    public function renderProducts(Request $request)
    {
        if($request->ajax()){
            $products = Product::latest()->paginate(10);
            return view('products.render-product-list',compact('products'))->render();
        }
    }
}

Step 3: Create Blade files

In this step, we are creating blade files for the product listing blade file and product render blade file.

resources/views/products/product-listing.blade.php

@extends('layout.index')
 
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h3>Products list </h3>
            </div>
        </div>
    </div>
    <div id="apendHtml"> </div>
@endsection
{{-- Use cdn for jquery --}}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $.ajax({
        type:'GET',
        url:'{{ route('renderProducts') }}',
        success: function(html){
            $('#apendHtml').html(html);
        }
    }) 
</script>

resources/views/products/render-product-list.blade.php

<table class="table table-bordered">
    <tr>
        <th>No</th>
        <th>Name</th>
        <th>Price</th>
        <th>Details</th>
        <th width="280px">Action</th>
    </tr>
    @foreach ($products as $key => $product)
        <tr>
            <td>{{ $key + 1 }}</td>
            <td>{{ $product->name }}</td>
            <td>{{ $product->price }}</td>
            <td>{{ $product->detail }}</td>
            <td>
                <form action="{{ route('products.destroy',$product->id) }}" method="POST">

                    <a class="btn btn-info" href="{{ route('products.show',$product->id) }}">View</a>

                    <a class="btn btn-primary" href="{{ route('products.edit',$product->id) }}">Edit</a>

                    @csrf
                    @method('DELETE')

                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    @endforeach
</table>

Categorized in:

LaravelUncategorized