I would like to use razor template I use vs19 on windows
no option for creating a new
RazorTemplatePreprocessor
so, in the shared project I created an empty text file and change extension to .cshtml and change file custom tool from property to
RazorTemplatePreprocessor
which generated the corresponding cs file
in cshtml file
#using DataBase.Models;
#model List<Brand>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<div class="columns">
#foreach (var m in Model)
{
<div class="one-fifth column">
<span class="d-inline-block p-3 bg-red text-white">
#m.ModelName
</span>
</div>
<div class="four-fifths column">
<span class="d-inline-block p-3 bg-green">
#m.ModelDescription
</span>
</div>
}
</div>
</div>
</body>
</html>
but in loop there are an error for Model (var m in Model)
The name 'Model' does not exist in the current context
Try to change (It's better to pass your Model class)
#foreach (var m in Model)
to
#foreach (var m in #Model)
The #model directive should be followed by a Type,this could be any custom class.
When #Model is referenced throughout the template, it provides a reference to the object passed to the template when it is generated.
Update:
for example,your model class like:
public class YourModel{
...
public List<Brand> Brands{ get; set; }
public class Brand{
public strin ModelName{ get; set; }
public strin ModelDescription{ get; set; }
}
}
then
#using DataBase.Models;
#model YourModel
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<div class="columns">
#foreach (var m in #Model.Brands)
{
<div class="one-fifth column">
<span class="d-inline-block p-3 bg-red text-white">
#m.ModelName
</span>
</div>
<div class="four-fifths column">
<span class="d-inline-block p-3 bg-green">
#m.ModelDescription
</span>
</div>
}
</div>
</div>
</body>
</html>
Related
The problem is when i run application and go to localhost:8080 i dont see the header which i made in but when application is not running and i want to see how the web is lookign i see it so the problem might be in link for my main.css.
this is for newest bootstrap 4.3.1 java 12 spring boot 2.1.5
home.html
<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Home page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="../static/css/main.css" th:href="#{/css/main.css}" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron home-jumbo">
<div class="container text-center text-white jumbo-container">
<h1 class="display-3">Foodie</h1>
<p>Welcome in our restaurant. You can order what You want and how much You want and we will do it for
You.</p>
</div>
</div>
<div th:remove="all-but-first">
<div class="media col-6 offset-3" th:each="item: ${items}">
<i class="fas fa-utensils fa-4x"></i>
<div class="media-body">
<h5 th:text="|${item.name}(${item.price}zł)|">Pizza Margherita (25zł)</h5>
<p th:text="${item.shortDescription}">Short description pizza margherita, delicious classic on thin
crust and melt cheese.</p>
</div>
</div>
<div class="media col-6 offset-3">
<i class="fas fa-utensils fa-4x"></i>
<div class="media-body">
<h5>Pizza Capriciosa (26zł)</h5>
<p>Short description pizza margherita, delicious classic on thin crust and melt cheese.</p>
</div>
</div>
<div class="media col-6 offset-3">
<i class="fas fa-utensils fa-4x"></i>
<div class="media-body">
<h5>Pizza Mafioso (27zł)</h5>
<p>Short description pizza margherita, delicious classic on thin crust and melt cheese.</p>
</div>
</div>
</div>
</div>
</body>
</html>
main.css
.home-jumbo {
background: url("../img/fork.png") center;
}
.media-body {
margin-left: 10px;
}
HomeCotroller
package pl.karol.foodieapp;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import pl.karol.foodieapp.item.Item;
import pl.karol.foodieapp.item.ItemRepository;
import java.util.List;
#Controller
public class HomeController {
private ItemRepository itemRepository;
#Autowired
public HomeController(ItemRepository itemRepository) {
this.itemRepository = itemRepository;
}
#GetMapping("/")
public String home(Model model) {
List<Item> items = itemRepository.findAll();
model.addAttribute("items", items);
return "home";
}
}
I expect the same website but including the header i put in jumbotron.
Solved. In main.css instead of typing image url address in "address" use 'address'
.home-jumbo {
background: url('../img/fork.png') center;
}
.media-body {
margin-left: 10px;
}
I have a little problem. I have some products in shop ( I don't know how many products there will be ). In the main site I would like to print only 3 products in one row. And I don't know how to do loop to work this. Now in my code I have only one row and I doesn't look nice. I designed my row t contain only 3 products.
<div class="row-fluid">
<ul class="thumbnails">
#if (count($subcategoryProducts)==0)
There's no products
#else
#foreach($subcategoryProducts as $product)
<li class="span4">
<div class="thumbnail">
<a class="zoomTool" href="/product/{{$product->id}}" title="add to cart"><span
class="icon-search"></span> Details</a>
<a href="/product/{{$product->id}}"><img src="{{$product->getImageURL()}}"
alt=""></a>
<div class="caption cntr">
<p>{{$product->name}}</p>
<p><strong> {{$product->price}}</strong></p>
<h4><a class="shopBtn" href="#/{{$product->id}}" title="add to cart"> Add to cart </a>
</h4>
<br class="clr">
</div>
</div>
</li>
#endforeach
#endif
</ul>
</div>
Where's my mistake? Shoul I put this loop in another maybe?
Approach 2 here by JERRIE PELSER was the answer to my prayers today.
Use a simple extension method
public static class ArrayExtensions
{
/// <summary>
/// Splits an array into several smaller arrays.
/// </summary>
/// <typeparam name="T">The type of the array.</typeparam>
/// <param name="array">The array to split.</param>
/// <param name="size">The size of the smaller arrays.</param>
/// <returns>An array containing smaller arrays.</returns>
public static IEnumerable<IEnumerable<T>> Split<T>(this T[] array, int size)
{
for (var i = 0; i < (float)array.Length / size; i++)
{
yield return array.Skip(i * size).Take(size);
}
}
}
Use the extension method in foreach to split the rows by the number of columns required
#model IEnumerable<BootstrapGridLayout.Models.Article>
#using BootstrapGridLayout;
#{
ViewBag.Title = "Home Page";
}
#foreach (var row in Model.ToArray().Split(3))
{
<div class="row">
#foreach (var article in row)
{
<div class="col-md-4">
<div class="thumbnail">
<img src="#article.Thumbnail" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="caption">
<h3 id="thumbnail-label">#article.Name</h3>
<p>#article.Description</p>
</div>
</div>
</div>
}
</div>
}
I have this html file am working on with semantic UI,the final product is supposed to look like the one in the pic.However it doesn't render well and the image keeps being pushed to the far left side of the screen.More so the elements are also improperly aligned.Where am i growing wrong ? Here is the current code.
html code
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<meta http-equiv= "X-UA-Compatible" content ="IE=edge,chrome=1"/>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0,maximum-scale =1.0"/>
<title>SEMANTIC UI</title>
<!--Site properties-->
<!--CSS-->
<link rel = "stylesheet" type ="text/css" href ="dist/semantic.min.css">
<link rel = "stylesheet" type ="text/css" href ="dist/mycss.css">
<script type ="text/javascript" src = "dist/jquery.js"></script>
<!--Javascript-->
<script type ="text/javascript" src = "dist/semantic.min.js"></script>
<script type ="text/javascript" src = "dist/myjs.js"></script>
</head>
<body>
<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
<a class ="item" href ="#"><i class="global icon">Cities</i></a>
<a class ="item" href ="#"><i class="car icon">find a ride</i></a>
<div class = "ui buttons">
<button class = "ui button black">
<i class = "sign in icon"></i>Login
</button>
<div class = "or"></div>
<button class = "ui button green">
<i class = "users icon">Sign Up</a>
</button>
</div>
</div>
<!--Main content-->
<div class = "pusher">
<div class = "ui vertical aligned center segment landing inverted">
<div class = "transbg">
<div class = "ui container">
<div class = "ui secondary inverted top large pointing menu">
<div class = "left item">
<a class "toc item">
<i class ="sidebar icon"></i>
</a>
</div>
<div class = "right-item">
<a class = "active item" href = "/">Home</a>
<a class ="item" href ="#">Cities</a>
<a class = "item" href="#"><i class = "car icon">Find a Ride</i></a>
<div class = "item">
<div class = "ui buttons">
<button class = "ui button black">
<i class = "sign in icon"></i>Login
</button>
<div class = "or"><div>
<button class = "ui button green"><i class ="users icon"><i class = "users icon">Sign Up
</button>
</div>
</div>
</div>
</div>
</div>
<div class = "ui text container">
<h1 class = "ui header centered inverted">Look up for a ride near you</h1>
<div class = "container fluid findbg">
<form class ="ui form">
<div class = "field">
<div class = "fields">
<div class = "eleven wide field">
<div class = "ui search location">
<div class = "ui left icon input">
<i class = "inverted circular blue map icon"></i>
<input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code file
.landing{
background:url("bg.jpg") #103d50 70% 30% no-repeat !important;
}
.landing.segment{
min-height: 500px;
padding:0em 0em;
}
.transbg{
min-height: 500px;
background:rgba(32,154,189,0.655);
}
.menu{
border:0px!important;
}
.landing h1.ui.header{
margin-top: 4.2em;
margin-bottom: 0.11em;
font-weight: 100;
}
.findbg{
padding: 1em 1.5em;
width:100%;
background:rgba(255,255,155,0.7);
}
I'd have to say that you have a few errors in your markup:
unmatched closing tags (<i> is paired to </a>)
Misuse of Semantic UI icon tags. You shouldn't put any text inside <i class="<icon name> icon"></i> as this is
translated by Semantic UI to icons specified in the class attribute.
(As pointed out by #Anirudh) Improperly closed tag (i.e. <div class="or"> <div>)
Kindy check the code below for reference. Not sure if I achieved your desired look but it fixed the broken display in your existing markup.
.landing{
background:url("bg.jpg") #103d50 70% 30% no-repeat !important;
}
.landing.segment{
min-height: 500px;
padding:0em 0em;
}
.transbg{
min-height: 500px;
background:rgba(32,154,189,0.655);
}
.menu{
border:0px!important;
}
.landing h1.ui.header{
margin-top: 4.2em;
margin-bottom: 0.11em;
font-weight: 100;
}
.findbg{
padding: 1em 1.5em;
width:100%;
background:rgba(255,255,155,0.7);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
<a class ="item" href ="#"><i class="global icon"></i>Cities</a>
<a class ="item" href ="#"><i class="car icon"></i>find a ride</a>
<div class="item">
<div class = "ui buttons">
<a class = "ui button black">
<i class = "sign in icon"></i>Login
</a>
<div class="or"></div>
<a class = "ui button green">
<i class = "users icon">Sign Up</i>
</a>
</div>
</div>
</div>
<!--Main content-->
<div class = "pusher">
<div class = "ui vertical aligned center segment landing inverted">
<div class = "transbg">
<div class = "ui container">
<div class = "ui fluid secondary inverted top large pointing menu">
<a class = "toc item">
<i class ="sidebar icon"></i>
</a>
<div class = "right menu">
<a class = "active item" href = "/">Home</a>
<a class ="item" href ="#">Cities</a>
<a class = "item" href="#"><i class = "car icon"></i>Find a Ride</a>
<div class = "item">
<div class = "ui buttons">
<a class = "ui button black">
<i class = "sign in icon"></i>Login
</a>
<div class = "or"></div>
<a class = "ui button green"><i class = "users icon"></i>Sign Up</a>
</div>
</div> <!-- item -->
</div><!-- right menu-->
</div><!-- pointing menu -->
</div>
<div class = "ui text container">
<h1 class = "ui header centered inverted">Look up for a ride near you</h1>
<div class = "container findbg">
<form class ="ui form">
<div class = "fields">
<div class = "sixteen wide field">
<div class = "ui search location">
<div class = "ui left icon fluid input">
<i class = "inverted circular blue map icon"></i>
<input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I haven't often used partial views but I do understand the basics but I have a problem.
I have a master page with a Modal form on. In this modal form I would like to use a partial view to render both an image and a footer. However, I need to manually write in a header and the body content. So basically it would look like this:
Partial View:
-Image-
-Content I want to write-
-Footer-
However, whenever I try to do this and include things such as render Body or render section, it does not work. Does anybody have any ideas on how I can do this?
Modal:
<div id="helpModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
#Html.Partial("ModalLayoutPartial")
<h1 style="text-align:center"> HELP </h1>
<div class="modal-body">
<p>Help help helperton</p>
</div>
</div>
</div>
</div>
Partial View:
<div class="modal-header">
<img src="~/Content/Images/Logo/ap_tick_green.png" />
</div>
<body>
</body>
<div class="modal-footer">
Need more help? Contact us here.
</div>
You can pass a model into the partial so in your case make the model a string:
#Html.Partial("ModalLayoutPartial", "text to show")
Then in your partial declare the model (and use it):
#model string
<div class="modal-header">
<img src="~/Content/Images/Logo/ap_tick_green.png" />
</div>
<body>
#Html.Raw(Model)
</body>
<div class="modal-footer">
Need more help? Contact us here.
</div>
Please note you shouldn't use body tag in the above - a html document should only have one body tag
Or you could pass in a class:
public class ModalInfo
{
public string Title { get; set; }
public string Body { get; set; }
}
Then call your partial:
#Html.Partial("ModalLayoutPartial", new ModalInfo() { Title = "HELP", Body = "Help help helperton" })
Show your partial
#model ModalInfo
<div class="modal-header">
<img src="~/Content/Images/Logo/ap_tick_green.png" />
</div>
<div class="body">
<h1 style="text-align:center">#Model.Title</h1>
<div class="modal-body">
<p>#Model.Body</p>
</div>
</div>
<div class="modal-footer">
Need more help? Contact us here.
</div>
I'm trying to view notifications on razor view. I used foreach loop to get the data from the model.I want to display both "invitations" and "Requests" divs on the view like in the two table columns.One invitation down after another invitation.one request down after another request..(in one column all the invitations and requests on the other).. i used css float to do this.. but in the divs get mix in the result..why is that? there are some othaer elements in the view like, nav bar,side bar etc...my code is as follows;
foreach (var item in Model)
{
if (#item.CreatedBy == item.UserId)
{
<div style="float: right; width: 580px;">
<div class="panel panel-info" style="width:500px;margin-right:50px">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter1</h3>
</div>
<div class="panel-body">
<p>Event is created by yourself .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
#if (!item.IsAccepted)
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter1++;}
</div>
</div>
<br />
</div>
}
else
{
<div style="width: 580px; float: left">
<div class="panel panel-info" style="width:500px;margin-left:250px;">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter2</h3>
</div>
<div class="panel-body">
<p>Event is created by #item.Email .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
#if (!item.IsAccepted)
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter2++;}
</div>
</div>
<br />
</div>
}
}
What you need is css attributes "clear: right" and "clear: left" for your div's.
However, once you use them you will find next problem - there will be vertical gaps between your div's on the right and left side. That is because you are placing new div's right into body element of html page in your foreach loop. To make it right, you should first create two containers (divs) to which you should respectively add your divs containing data.
Unfortunately, with your current implementation you would have to iterate over your Model twice - once to fill up the right container with divs, and then once again to fill up the left container.
A better approach would be to create a ViewModel containing two collectios of objects which you are currently using, e.g.:
public class MyViewModel
{
public IList<MyModel> Invitations { get; set; }
public IList<MyModel> Requests { get; set; }
}
and use it as your View's model
#model MyApplication.Models.MyViewModel.
With this approach, you also remove some logic from the view, which is a good thing.
Here is an updated code for your view using the ViewModel as View's model:
#model MvcApplication1.Controllers.MyViewModel
#{
int counter1 = 0, counter2 = 0;
}
<div style="float: right; width: 580px; clear:right">
<span>Invitations</span>
#foreach (var item in #Model.Invitations)
{
if (#item.CreatedBy == item.UserId)
{
<div>
<div class="panel panel-info">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter1</h3>
</div>
<div class="panel-body">
<p>Event is created by yourself .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
else
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter1++;}
</div>
</div>
<br />
</div>
}
}
</div>
<div style="float: left; width: 580px; clear:left">
<span>Requests</span>
#foreach (var item in #Model.Requests)
{
<div>
<div class="panel panel-info">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter2</h3>
</div>
<div class="panel-body">
<p>Event is created by #item.Email .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
else
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter2++;}
</div>
</div>
<br />
</div>
}
</div>
Good luck :)
Edit: a quick lookup to how the page looks after using provided solution:
https://jsfiddle.net/nh8Ls531/