Issue
i am beginner in the spring and i try to create a simple layout with child view in the spring using hibernate. but i can't understand how to create it. please help me.:D
simple layout in asp.net core
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>ProDent - Dentist Template</title>
<meta charset="UTF-8" />
<meta name="description" content="ProDent dentist template" />
<meta name="keywords" content="prodent, dentist, creative, html" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon -->
<link href="/img/favicon.ico" rel="shortcut icon" />
<link href="~/css/fontiran.css" rel="stylesheet" />
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i" rel="stylesheet" />
<!-- Stylesheets -->
<link href="~/css/persianDatepicker-default.css" rel="stylesheet" />
<link href="~/css/RegistrationStyles.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/flaticon.css" />
<link rel="stylesheet" href="/css/owl.carousel.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/animate.css" />
<!-- rtl -->
<link rel="stylesheet" href="/css/rtl.css" />
@RenderSection("StylesOnViews", false) <!--here rendering styles on child views-->
</head>
<body>
<!-- Page Preloder -->
<div id="preloder">
<div class="loader"></div>
</div>
<!-- Page Preloder End -->
<!-- Header section -->
@(await Component.InvokeAsync("HeaderSiteComponent"))
<!-- Header section end -->
@RenderBody() <!--here rendering child view-->
<!-- Footer top section -->
@(await Component.InvokeAsync("footerSiteComponent"))
<!-- Footer top section end -->
<!--====== Javascripts & Jquery ======-->
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/circle-progress.min.js"></script>
<script src="/js/main.js"></script>
<script src="~/js/FactsScripts.js"></script>
<script src="~/js/persianDatepicker.js"></script>
@RenderSection("ScriptsOnViews", false) <!-- here rendering scripts on child views -->
</body>
</html>
and my child view :
all of this html file replaced with @RenderBody in layout
@{
ViewData["Title"] = "Login";
Layout = "~/Views/Shared/_defaultLayout.cshtml";
}
<section class="page-info-section set-bg" data-setbg="img/page-info-bg/1.jpg">
<div class="container">
<h2 class="text-center">ورود کاربران</h2>
</div>
</section>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-form-title" style="background-image: url(img/dentists.jpg);">
<span class="login100-form-title-1">ورود کاربران</span>
</div>
<form class="login100-form validate-form">
<div class="wrap-input100 validate-input m-b-26" data-validate="لطفا نام کاربری خود را وارد کنید!">
<span class="label-input100">نام کاربری</span>
<input class="input100" type="text" name="username" placeholder="نام کاربری خود را وارد کنید">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-18" data-validate="لطفا رمز عبور خود را وارد کنید!">
<span class="label-input100">رمز عبور</span>
<input class="input100" type="password" name="pass" placeholder="رمز عبور خود را وارد کنید">
<span class="focus-input100"></span>
</div>
<div class="flex-sb-m w-full p-b-30 text-right" dir="rtl">
<div>
<a href="#" class="txt1">رمز عبور خود را فراموش کرده اید؟</a>
</div>
<div class="contact100-form-checkbox">
<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
<label class="label-checkbox100" for="ckb1">مرا بخاطر بسپار</label>
</div>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">وارد شوید</button>
</div>
</form>
</div>
</div>
</div>
@(await Component.InvokeAsync("HeaderSiteComponent"))
and
@(await Component.InvokeAsync("footerSiteComponent"))
in the layout are header(menu items and..etc) and footer. menu items in the header component load form dataBase and also i can send data to this component..
what is this equivalent in spring?
Solution
i found answer this question :
for create a layout or component i should create fragment in spring using thymeleaf.
for example :
1-create footer html file and called footer.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="footer">
<p>your content....</p>
</footer>
</body>
</html>
notice : only attention to footer tag because only footer will be insert into homePage moreover you should call footer by name that put front th:fragment
2- now you may call footer in homePage. see following code :
<body>
...
<div th:insert="fragments/footer :: footer"></div>
</body>
more information :
Answered By - Hamid
Answer Checked By - Timothy Miller (JavaFixing Admin)
