ASP.Net MVC _Layout.cshtml changes not applying - asp.net-mvc

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>

Related

Show index page with input and output page with results on same page in Thymealeaf

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

Razor Code not registering on only one cshtml file

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.

thymeaf layout usage not functional

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?

Master Shared Layout Header with Login Form in MVC 4 using asp.net

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

onsenui app is not showing correctly

I am facing a pretty strange problem .I have compiled the cordova app and it runs on android smoothly now on mac when i try to compile the app for the iOS it don't show me the component of onsenui and page comes without button ,toolbars etc . I tried to open it on web browser and it gives me same result .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css"/>
<!--parse code only
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script>
<!-- parse code only -->
<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- Enable all requests, inline styles, and eval() -->
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Toolbars</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em">
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-header>Toolbar Variations</ons-list-header>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )">
HTML Content
</ons-list-item>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page4.html', { animation : 'slide' } )">
Search Box
</ons-list-item>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page5.html', { animation : 'slide' } )">
Images
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left" style="line-height: 44px">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Title</div>
<div class="right" style="line-height: 44px">
Right
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page4.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Search</div>
<div class="right" style="padding-right: 6px">
<input type="search" class="search-input" placeholder="Search" style="margin-top: 6px;">
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page5.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="right">
<ons-search-input></ons-search-input>
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js"></script>
</body>
</html>
The code overall looks ok.
The only thing missing is ons.bootstrap(). I'm guessing you accidentally removed it at some point. Add that and you should be ready to go.
Here's a working demo of your code with ons.bootstrap() added.
On a sidenote - since you don't seem to be using angular right now you might be interested in checking out Onsen 2. It has both an angular and a pure js version.

Resources