Laravel 9 View Render Example Tutorial

Apr 30, 2022 . Admin

Hi Dev,

In this TUtorial, I will share with you how to view render in laravel 9.you can easy and simply view render in laravel 9.

So, we utilize get html view layout from ajax request. At that, you have to first render the view file and then you require to store the view in a variable, and then we can return that variable. In the bellow example, I render a view with pass data you can visually perceive how I did:

Here, I Will give you a simple example of how to view render with ajax you can check the code and copy it.

Step 1: Download Laravel

Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app
Step 2: Create Route

In this step,you can create route file in laravel.

routes/web.php 
<?php

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

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('view', [RenderController::class, 'index']);
Route::post('view/render', [RenderController::class, 'renderView'])->name('view.render');
Step 3: Create Controller

In this second step we will now we should create new controller as RenderController. So run bellow command and create new controller.

php artisan make:controller RenderController

After you create successfully RenderController above command you will find new file in this path app/Http/Controllers/RenderController.php.

app/Http/Controllers/RenderController.php 
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class RenderController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        return view('render.index');
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function renderView(Request $request)
    {
        $renderview = view('render.renderView')->render();
        return response()->json([
            'success' => true,
            'html'=>$renderview
        ]);
    }
}
Step 4: Create Blade File resources/views/render/renderView.blade.php 
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 View Render Example - MyWebTuts.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3>Laravel 9 View Render Example - MyWebTuts.com</h3>
                <p>MyWebTuts specifically for sharing programming issue and examples. We’ll be sharing some chunks of codes of PHP, Laravel 9 Framework, CSS3, HTML5, MYSQL, Bootstrap, CodeIgniter Framework, JQuery, Javascript, Server, Ionic Framework etc. In our site i am sure you will find something good solution and find example of topics of PHP, Laravel 9 etc.</p>
            </div>
        </div>
    </div>
</body>
</html>
resources/views/render/index.blade.php 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 9 View Render Example - MyWebTuts.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <style>
        body{
            background:#f7fcff !important;
        }
        .wrapper{
            margin-top: 250px;
        }
        .wrapper h3{
            margin-bottom:25px !important ;
            text-align: center;
        }
        .wrapper p{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 wrapper">
                <div class="viewRender">
                    
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $_token = "{{ csrf_token() }}";
            $.ajax({
                headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
                type:"POST",
                url: "{{ route('view.render') }}",
                cache:"false",
                data: {'_token': $_token },
                datatype:"html",
                beforeSend: function() {
                    //something before send
                },
                success:function (data) {
                    console.log(data);
                    $('.viewRender').html(data.html);
                }
            });
        });
    </script>
</body>
</html>
Run Laravel App:

All steps have been done, now you have to type the given command and hit enter to run the laravel app:

php artisan serve

Now, you have to open web browser, type the given URL and view the app output:

http://localhost:8000/view

It will help you...

#Laravel 9

You might also like...