Hello I built an application in Spring with Thymeleaf and I am displaying the forms on one page and the results on another page and I would like to show both on the same page.
Here is my index page:
<!DOCTYPE html>
<html xmlns:th ="http://www.thymeleaf.org" >
<head>
<meta charset ="UTF-8" ></meta>
<meta name ="viewport" content ="width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Read CSS -->
<link rel ="stylesheet" th:href ="#{/webjars/bootstrap/css/bootstrap.min.css}" >
<link rel ="stylesheet" th:href ="#{/stil.css}" >
<!-- Read JS -->
<script th:src ="#{/webjars/jquery/jquery.min.js}" defer ></script>
<script th:src ="#{/webjars/bootstrap/js/bootstrap.min.js}" defer ></script>
<title> Cautare telefon sau e-mail</title>
</head>
<body class ="bg-light" >
<h2 text-align="center">Cautare telefon sau email</h2>
<div class ="text-center" >
<form method ="post" action ="/raspuns" >
<div class="form-group">
<input type ="number" minlength="10" maxlength="10" class="form-control" name ="text2" th:value ="${text2_value}" placeholder="Numar telefon" pattern="[0-9]{10}" required/>
<input type ="submit" value ="Cauta" class ="btn btn-primary" margin-top="2%"/>
</div>
</form>
<br></br>
<form method ="post" action ="/raspuns2" >
<div class ="form-group" >
<input type ="email" class ="form-control" placeholder ="Adresa email" th:value="${email_value}"
name ="email" />
<input type ="submit" value ="Cauta" class ="btn btn-primary" margin-top="2%"/>
</div>
</form>
</div>
</body>
</html>
An here is my results page:
<!DOCTYPE html>
<html xmlns:th ="http://www.thymeleaf.org" >
<head>
<meta charset ="UTF-8" ></meta>
<meta name ="viewport" content ="width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Read CSS -->
<link rel ="stylesheet" th:href ="#{/webjars/bootstrap/css/bootstrap.min.css}" >
<link rel ="stylesheet" th:href ="#{/stil.css}" >
<!-- Read JS -->
<script th:src ="#{/webjars/jquery/jquery.min.js}" defer ></script>
<script th:src ="#{/webjars/bootstrap/js/bootstrap.min.js}" defer ></script>
<title> Cautare telefon sau email</title>
</head>
<body>
<form action="/">
<button class ="btn btn-primary">Acasa</button>
</form>
<h1> Cautare telefon</h1>
<table class="table">
<tbody>
<tr th:each="map : ${map_list}" >
<td> CNP:</td>
<td th:text ="${map.get('cif')}" ></td>
<td> Nume:</td>
<td th:text ="${map.get('den_client')}" ></td>
</tr>
</tbody>
</table>
</body>
</html>
How can I make them appear on the same page ? I would appreciate if someone could give me a small example please. Thanks
Related
I have an assignment that requires us to use a shared Layout, tag helpers, etc. The Razor code works fine on every page except for the confirmaccount page
Here is a page it is working fine on:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#model bit285_assignment1_naps.Models.User;
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/naps.css" />
<title>Login Page</title>
</head>
<body>
<h1>Login</h1>
<fieldset>
<form>
<div>
<label>Username</label>
<input value="ian#home.com" />
<span>* required</span>
</div>
<div>
<label>Password</label>
<input type="password" value="bl-blue-Bansenauer" />
<span>* required</span>
</div>
<div>
<input type="button" value="Login" />
<input type="button" value="Reset" />
</div>
</form>
</fieldset>
</body>
</html>
And here is the problematic page:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#model bit285_assignment1_naps.Models.User;
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/naps.css" />
<title>Account Confirmation</title>
</head>
<body>
<h1>New Account Created</h1>
<fieldset>
<form>
<div>
<label>FirstName</label>
<span>Brian</span>
</div>
<div>
<label>Last Name</label>
<span>Bansenauer</span>
</div>
<div>
<label>Program</label>
<span>Web App Dev</span>
</div>
<div>
<label>Username</label>
<span>ian#home.com</span>
</div>
<div>
<label>Password</label>
<span>bl-blue-Bansenauer</span>
</div>
<div>
<input type="button" onclick="location.href='/login.html';" value="Go to Login" />
<input type="button" value="Reset" />
</div>
</form>
</fieldset>
</body>
</html>
At the very least, on the latter, the VS is not recognizing it and the text is completely white.
The first file is login.cshtml, the second is confirmaccount.cshtml
I have no idea why the confirmaccount one is not working, the code #model/layout works fine for 5 other pages. Also, most of this code is premade by my instructor and not my original work.
Hi I want to use a custom fragment in thymeleaf
I have a layout file which is not loaded by other hmtl files, main.html:
I want to use a custom fragment in thymeleaf
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SFJ - Egy sztori minden napra</title>
<link rel="stylesheet" href="../static/css/blog.css" th:href="#{/css/blog.css}"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Kezdőoldal</li>
<li class="">Sztorik</li>
<li class="">Bloggerek</li>
</ul>
<div class="navbar-text navbar-right">
Üdvözlünk <span sec:authentication="name">Anonymous </span>
<form sec:authorize="isAuthenticated()" id="frmlogout" th:action="#{/logout}" method="post" class="form-inline">
| Kijelentkezés
</form>
</div>
</div>
</div>
</nav>
<div layout:fragment="loginContent">
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<footer>
<p>San Franciscoból Jöttem - Az eredeti template összeállítója: http://therealdanvega.com</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>
</body>
</html>
I try to load it for example from login.html:
<!DOCTYPE html>
<html lang="en" layout:decorator="layouts/main">
<head>
<title>SFJ - Minden napra egy sztori</title>
</head>
<body>
<div layout:fragment="loginContent">
<form name="login" th:action="#{/login}" method="post" class="form-signin">
<h2 class="form-signin-heading">Kérlek jelentkezz be</h2>
<div id="err" th:if="${param.error}" class="alert alert-danger">Hibás felhasználói név és jelszó</div>
<div th:if="${param.logout}" class="alert alert-success">Sikeresen kijelentkeztél</div>
<label for="username" class="sr-only">Felhasználói név</label>
<input type="text" id="username" name="username" class="form-control" placeholder="Felhasználói név" required="true" />
<label for="password" class="sr-only">Jelszó</label>
<input type="password" id="password" name="password" class="form-control" placeholder="Jelszó" required="true" />
<div class="checkbox">
<label> <input id="remember-me" name="remember-me" type="checkbox" /> Emlékezz rám
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Bejelentkezés</button>
</form>
</div>
</body>
</html>
It doesn't not find the main.html, does not take into account...
It's loading only the content from login.html
Does anyone have any ideas why?
I have the below index.html code
<!DOCTYPE html>
<html>
<head>
<title>Myapp</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="Myapp" ng-controller="GameController">
<div>
<div class="guessLeft">{{guesses}}</div>
<div class="incorrectGuess">InCorrect guesses : <span ng-repeat="letter in incorrectlyChoosen">{{letter}}</span></div>
<div class="correctGuess">Correct guesses : <span ng-repeat="letter in correctlyChoosen">{{letter}}</span>
</div>
<div class="youhavetoGuess">Your have to guess : {{displayWord}}</div>
<div class="takeInput">
<input type="text" name="guess" ng-model="input.letter">
<button ng-click="letterChoosen()">Submit</button>
</div>
</div>
</body>
in the below div class
<div class="guessLeft">{{guesses}}</div>
I want to use jquery knob where I would show my guess count, that would start from 6 till 0.
what should I do to achieve this? any reference would help.
So my application's default layout creates a link to homepage that is I assume determined by either bootstrap or one of javascript files. Anyway, this is the code currently for my layout:
Layout CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Delivery</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Delivery</p>
</footer>
</div>
</body>
</html>
I removed all the references to bootstrap and js files that I have hoping to get rid of the links showing up, however whenever I execute my application, I end up with this above the view that I made:
Page code when it's ran
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - Delivery</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
Is there somewhere else besides the layout file I have to make changes in order for this not to run?
EDIT:
View Code
#using System;
#using Dostava.Data.Models;
#model Dostava.Data.ViewModel.KorisnikViewModel
<!doctype html>
<html>
<head>
<title>KorisnikMenu</title>
</head>
<body>
<div class="welcome">
Dobrodosli: <br />
#Model.Korisnik.KorisnickoIme
</div>
<div class="menu">
<div class="menubtn">
<input type="button" value="Nova narudzba" onclick="location.href='/Home/Glavna'" />
</div>
<div class="menubtn">
<input type="button" value="Obavijesti" onclick="location.href='/Home/Glavna'" />
</div>
<div class="menubtn">
<input type="button" value="Izmjena podataka" onclick="location.href='/Home/Edit?id=#Model.Korisnik.Id'" />
</div>
<div class="menubtn">
<input type="button" value="Log out" onclick="location.href='/Home/Glavna'" />
</div>
</div>
<div class="filter">
Pretraga narudžbi:
<hr style="border:1px solid black;" />
Aktivne <input type="checkbox" value="Aktivne" />
Zavrsene <input type="checkbox" value="Zavrsene" />
Na cekanju <input type="checkbox" value="NaCekanju" />
Otkazane <input type="checkbox" value="Otkazane" />
Neuspjesne <input type="checkbox" value="Neuspjesne" />
<input type="text" id="sifratxt" placeholder="Sifra narudzbe..." style="width:20%;"/>
<input type="button" id="filterbtn" value="Primjeni filter" style="width:20%;" />
</div>
<div class="narudzbe">
<hr style="border:1px solid black;" />
<p style="font-size:18px;">Vaše narudžbe:</p>
<table class="tabela">
<tr id="tabelatr">
<td>Sifra Narudzbe</td>
<td>Datum Narudzbe</td>
<td>Primaoc</td>
<td>Status Naruzdbe</td>
<td>Cijena Narudzbe</td>
<td>Detalji Narudzbe</td>
<td>Otkazi</td>
</tr>
#foreach (Narudzbe n in Model.narudzbe)
{
<tr>
<td>#n.SifraNarudzbe</td>
<td>#n.DatumNarudzbe</td>
<td>#n.Primaoc.Ime #n.Primaoc.Prezime </td>
<td>#n.StatusNarudzbe.Naziv</td>
<td>#n.CijenaNarudzbe</td>
<td><input type="button" value="Detalji" onclick="location.href='/Home/DetaljiNarudzbe?id=#n.Id'"></td>
<td><input type="button" value="Otkazi" onclick="location.href='/Home/OtkaziNarudzbu?id=#n.Id'"></td>
</tr>
}
</table>
</div>
</body>
</html>
EDIT 2:
View_Start code
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - Delivery</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
</body>
</html>
I want to develop Login Form Header(header.cshtml) that is avialble in Layout.cshtml(shared),
My Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="~/Content/style.css" rel="stylesheet" />
<script src="~/Scripts/boxOver.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="main_container">
#Html.Partial("_Header")
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#Html.Partial("_Footer")
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
and the _Header.cshtml like this
#{
Layout = null;
}
<div id="header">
<input name="login_username" class="textbox" placeholder="Username" type="text">
<input name="login_password" class="textbox" placeholder="Pasword" type="text">
<input name="login" class="button" value="login" type="submit">
<input name="login" class="button" value="Register" type="submit">
<div id="logo"> <img src="images/logo.png" alt="" border="0" width="182" height="85" /> </div>
</div>
Here _Header.cshtml is a shared partial view. I want to develop this view with model and controller with database connection in master(Layout.cshtml) as partial view Using MVC 4 in .net.
The Header is like the below image,Header Html Layout Image