Laravel 8 View Render Example Tutorial

Jun 05, 2021 . Admin

Hi Dev,

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

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

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

Step 1 : 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 2 : 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.

Path : 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 3: Create Blade File Path : resources/views/render/renderView.blade.php 
<!DOCTYPE html>
<html>
<head>
	<title>Laravel 8 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 8 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 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 etc.</p>
			</div>
		</div>
	</div>
</body>
</html>
Path : 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 8 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>

It will help you...

#Laravel 8 #Laravel

You might also like...