At the start of the develoment, i was able to navigate from a page to another in my website, without having the full page reloading. For unknown reason, after a day of development, i can no longer navigate between page without layout flickering / full page reloading.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Vertikal Elagage</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="~/Content/materialize/css/materialize.min.css" rel="stylesheet"
type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="~/Content/fontawesome.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/a9869f94dd.js"></script>
</head>
<body>
#*<div id="navbar_header" class="navbar_header"></div>*#
<div id="navbar_fixed" class="navbar-fixed navbar_padding">
<nav class="nav-extended">
<div class="nav-wrapper">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="#(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">#Html.ActionLink("Accueil", "Index", "Home", null, new { #class = "tab" })</li>
<li class="#(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">#Html.ActionLink("Qui sommes-nous ?", "About", "Home", null, new { #class = "tab" })</li>
<li class="#(ViewContext.RouteData.Values["Action"].ToString() == "Pruning" ? "active" : "")">#Html.ActionLink("Elagage", "Pruning", "Home", null, new { #class = "tab" })</li>
<li class="#(ViewContext.RouteData.Values["Action"].ToString() == "Felling" ? "active" : "")">#Html.ActionLink("Abbatage", "Felling", "Home", null, new { #class = "tab" })</li>
<li class="#(ViewContext.RouteData.Values["Action"].ToString() == "Landscaping" ? "active" : "")">#Html.ActionLink("Paysagisme", "Landscaping", "Home", null, new { #class = "tab" })</li>
<li>#Html.ActionLink("Galerie", "Contact", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</nav>
</div>
<div class="container body-content">
#RenderBody()
<hr />
</div>
<footer class="layout_footer">
<div class="row mb-0">
<div class="col-12 col-md-4 p-2 p-md-3 d-flex align-items-center flex-column">
<h4>Social</h4>
<p>Suivez nous sur les réseaux sociaux pour prendre connaissance de nos projets et chantiers sur l'île !</p>
<p>Vous pourrez y voir nos dernières réalisations, avec des photos comparatives !</p>
<div class="row mt-4 mt-md-0">
<div class="col-12 p-0 p-md-3 d-flex flex-row justify-content-around">
<div class="social_round">
<i class="fa fa-facebook-f social_icon"></i>
</div>
<div class="social_round">
<i class="fa fa-instagram social_icon"></i>
</div>
<div class="social_round">
<i class="fa fa-twitter social_icon"></i>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 p-2 p-md-3 d-flex align-items-center flex-column">
<h4>Horaires</h4>
<div class="d-flex justify-content-between align-items-center w-90 w-md-50 opening_time_container">
<p class="opening_time">Lundi-jeudi</p>
<p>07h00 - 17h00</p>
</div>
<div class="d-flex justify-content-between align-items-center w-90 w-md-50 opening_time_container">
<p class="opening_time">Vendredi</p>
<p>07h00 - 16h00</p>
</div>
<div class="d-flex justify-content-between align-items-center w-90 w-md-50 opening_time_container">
<p class="opening_time">Samedi</p>
<p>08h00 - 12h00</p>
</div>
</div>
<div class="col-12 col-md-4 p-2 p-md-3 d-flex align-items-center flex-column">
<h4>Contact</h4>
<div class="d-flex justify-content-between align-items-center w-90 opening_time_container">
<p class="opening_time">Adresse</p>
<p>Piton saint-leu</p>
</div>
<div class="d-flex justify-content-between align-items-center w-90 w-md-50 opening_time_container">
<p class="opening_time">Téléphone</p>
<p>+262 692 92 64 77</p>
</div>
<div class="d-flex justify-content-between align-items-center w-90 w-md-50 opening_time_container">
<p class="opening_time">Email</p>
<p>velluetl#gmail.com</p>
</div>
</div>
</div>
<span>© #DateTime.Now.Year - Lucas Velluet Vertikal Elagage 974 La Réunion</span>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
#* <script src="~/Scripts/customScript.js" language="javascript" type="text/javascript"></script>*#
</body>
</html>
I can't figure out what did i changed to break the normal behavior i had (only body re-rendering) from the template at the beggining.
Related
I created registration and login to my app. But when I login i don't see logged user. How can I do that? I create all redirection to home page when user is connected but I don't see connected user like on this site.
I was fallowing this tutorial. And all is working fine. But how can I get this?
On my site i have this:
My git. I didn't post any code, because is almost the same like in tutorial, except i added redirection to my home page.
https://github.com/ivanradunkovic/Vozila/tree/master/Vozila
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Vehicle</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script type="text/javascript">
var appInsights=window.appInsights||function(config){
function s(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},r=document,f=window,e="script",o=r.createElement(e),i,u;for(o.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",r.getElementsByTagName(e)[0].parentNode.appendChild(o),t.cookie=r.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace"];i.length;)s("track"+i.pop());return config.disableExceptionTracking||(i="onerror",s("_"+i),u=f[i],f[i]=function(config,r,f,e,o){var s=u&&u(config,r,f,e,o);return s!==!0&&t["_"+i](config,r,f,e,o),s}),t
}({
instrumentationKey:"615aadc5-8508-46e7-aa93-713181a155ae"
});
window.appInsights=appInsights;
appInsights.trackPageView();
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Vehicle", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<ul class="nav navbar-nav">
<li>#Html.ActionLink("About application", "About", "Home")</li>
<li>#Html.ActionLink("Vehicle Make", "Index", "Make")</li>
<li>#Html.ActionLink("Vehicle Model", "Index", "Model")</li>
<li>#Html.ActionLink("About author", "AboutAuthor", "Home")</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li style="color: white; line-height: 50px;">
<li>#Html.ActionLink("Login", "Login.aspx", "Login.aspx")</li>
<li>#Html.ActionLink("Register", "Register.aspx", "Register.aspx")</li>
</ul>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Vehicle by Ivan Radunković</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
My View/Shared/_Layout.cshtml
In shared/_Layout.cshtml you have to write code if user is loggedIn then display Name and Logg Off Text else show Login and Register Text(Button).
Like :
#if(Model.IsAuthenticated)
{
<div>
{Name(Fetch from model} Logg Off
</div>
}
else
{
<div> Register Login
</div>
}
Enjoy......
If you can confirm that the users are being saved to the database then you just have to change your _Layout.cshtml:
#if(Model.IsAuthenticated)
{
"Hello " + User.Identity.GetUserName()
}
else
{
<ul class="nav navbar-nav navbar-right">
<li style="color: white; line-height: 50px;">
<li>#Html.ActionLink("Login", "Login.aspx", "Login.aspx")</li>
<li>#Html.ActionLink("Register", "Register.aspx", "Register.aspx")</li>
</ul>
}
I'm trying to create a search method, that is called in my _Layout.cshtml and when I click on submit button, the user is redirected to "search view".
I' following this tutorial, but the author call your method at index view and I need to call the method at _Layout to be redirect to another view that will give me the return of method.
This is my _Layout, is basic a nav-bar from bootstrap with a textfield and a button, that the user can put what he need to find:
#model IEnumerable<TestTcc2.Models.Musica>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/Bootstrap")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">#Html.ActionLink("your logo here", "IndexOuvinte", "Home")</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "IndexOuvinte", "Home")</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Manage Account", "Manage", "Account")</li>
<li>#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
Log off}</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container">
#RenderSection("featured", required: false)
#RenderBody()
</div>
<!--Fim container -->
</body>
</html>
and this is the method that I want to call at _Layout.cshtml:
public ActionResult Search(string search)
{
var musicas = from m in db.Musicas select m;
if (!String.IsNullOrEmpty(search))
{
musicas = musicas.Where(s => s.Nome.Contains(search));
return RedirectToAction("Search"); //name of view that will return the data
}
return View(musicas);
}
Well, you might consider specifying an action to the form or just use the appropriate helper to generate it:
#using (Html.BeginForm("Search", "SomeController", null, FormMethod.Post, new { #class = "navbar-form navbar-left", role = "search" }))
{
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
}
Now I read the book "ASP.NET MVC5, Freeman" and I have create a web-site.
Here how it looks like:
Button Home must looks like another button, I can't understand, what's wrong.
I am new in the ASP.NET, so I don't know, whe to look for the error.
Here is structure of my project:
SportsStore.Domain - for logic
SportsStore.UnitTests - for tests
SportsStore.WebUI - for views and controllers
I think, that problem is somevhere in the SportsStore.WebUI.
Menu.schtml:
#model IEnumerable<string>
#Html.ActionLink("Home", "List", "Product", null,
new { #class = "btn btn-block btn-defautl btn-lg" })
#foreach (var link in Model)
{
#Html.RouteLink(link, new
{
controller = "Product",
action = "List",
category = link,
page = 1
}, new
{
#class = "btn btn-block btn-default btn-lg"
+ (link == ViewBag.SelectedCategory ? " btn-primary" : "")
})
}
List.cshtml
#model SportsStore.WebUI.Models.ProductsListViewModel
#{
ViewBag.Title = "Products";
}
#foreach (var p in Model.Products )
{
#Html.Partial("ProductSummary", p)
}
<div class="btn-group pull-right">
#Html.PageLinks(Model.PagingInfo, x => Url.Action("List",
new { page = x, category = Model.CurrentCategory }))
</div>
Edit1 - Generated HTML-code
<html><div id="coFrameDiv" style="height:0px;display:none;"><iframe id="coToolbarFrame" src="chrome-extension://cjabmdjcfcfdmffimndhafhblfmpjdpe/toolbar/placeholder.html" style="height: 0px; width: 100%; display: none;"></iframe></div><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/bootstrap-theme.css" rel="stylesheet">
<title>Products</title>
<link rel="stylesheet" id="coToolbarStyle" href="chrome-extension://cjabmdjcfcfdmffimndhafhblfmpjdpe/toolbar/styles/placeholder.css" type="text/css"><script type="text/javascript" id="cosymantecbfw_removeToolbar">(function () { var toolbarElement = {}, parent = {}, interval = 0, retryCount = 0, isRemoved = false; if (window.location.protocol === 'file:') { interval = window.setInterval(function () { toolbarElement = document.getElementById('coFrameDiv'); if (toolbarElement) { parent = toolbarElement.parentNode; if (parent) { parent.removeChild(toolbarElement); isRemoved = true; if (document.body && document.body.style) { document.body.style.setProperty('margin-top', '0px', 'important'); } } } retryCount += 1; if (retryCount > 10 || isRemoved) { window.clearInterval(interval); } }, 10); } })();</script></head>
<body>
<div class="navbar navbar-inverse" role="navigation">
<a class="navbar-brand" href="#">SPORTS STORE</a>
</div>
<div class="row panel">
<div id="categories" class="col-xs-3">
<a class="btn btn-block btn-defautl btn-lg" href="/">Home</a>
<a class="btn btn-block btn-default btn-lg" href="/Chess">Chess</a><a class="btn btn-block btn-default btn-lg" href="/Soccer">Soccer</a><a class="btn btn-block btn-default btn-lg" href="/Watersports">Watersports</a>;
</div>
<div class="col-xs-8">
<div class="well">
<h3>
<strong>Kayak</strong>
<span class="pull-right label label-primary">275,00 ₽</span>
</h3>
<span class="lead">A boat for one person</span>
</div><div class="well">
<h3>
<strong>Lifejacket</strong>
<span class="pull-right label label-primary">48,95 ₽</span>
</h3>
<span class="lead">Protective and fascionable</span>
</div><div class="well">
<h3>
<strong>Soccre ball</strong>
<span class="pull-right label label-primary">19,50 ₽</span>
</h3>
<span class="lead">FIFA-approver size and weight</span>
</div><div class="well">
<h3>
<strong>Corner Flags</strong>
<span class="pull-right label label-primary">34,95 ₽</span>
</h3>
<span class="lead">Give you playing field a professional touch</span>
</div>
<div class="btn-group pull-right">
<a class="btn btn-default btn-primary selected" href="/">1</a><a class="btn btn-default" href="/Page2">2</a><a class="btn btn-default" href="/Page3">3</a>
</div>
</div>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"71da9908a09f40e490a8f3c96abdeaaa"}
</script>
<script type="text/javascript" src="http://localhost:60023/6e11616ea0ef4c01be4ca7cc7741a6e8/browserLink" async="async"></script>
<!-- End Browser Link -->
</body></html>
Maybe it will help:
https://github.com/dmitrykozyr/SportsStoreMVC
Using categories - part of the file _Layout.cshtml
<body>
<div class="navbar navbar-inverse" role="navigation">
<a class="navbar-brand" href="#">SPORTS STORE</a>
</div>
<div class="row panel">
<div id="categories" class="col-xs-3">
#Html.Action("Menu", "Nav");
</div>
<div class="col-xs-8">
#RenderBody()
</div>
</div>
</body>
When creating your Home-link, you have misspelled default
#Html.ActionLink("Home", "List", "Product", null,
new { #class = "btn btn-block btn-defautl btn-lg" })
should be
#Html.ActionLink("Home", "List", "Product", null,
new { #class = "btn btn-block btn-default btn-lg" })
The Index.cshtml file in Microsoft Visual Studio. I want to be available to have my carousel move to the second image but it doesn't slide.
#{ ViewBag.Title = "Home Page"; }
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Content/img/slide-1.png" alt="First Image" class=""/>
<div class="carousel-caption">
<h2 class="awesome">This Template Is Awesome</h2>
<p class="awesome-line">resto restaurant home page website template</p>
</div>
</div>
<div class="item">
<img src="~/Content/img/slide-2.png" alt="Second Image" class="" />
<div class="carousel-caption">
<h2 class="awesome">This Template Is Awesome</h2>
<p class="awesome-line">resto restaurant home page website template</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#mySlider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#mySlider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
_Layout.cshtml Page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>#Html.ActionLink("Our Story", "Index", "Home")</li>
<li>#Html.ActionLink("Menu", "Menu", "Home")</li>
<li>#Html.ActionLink("Reservations", "Reservations", "Home")</li>
<li>#Html.ActionLink("News", "News", "Home")</li>
<li>#Html.ActionLink("Reviews", "Reviews", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Do I need to call the script in the index.cshtml file?
Yes do call the Jquery,boostrap scripts
Change your href's into your carousel ID
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
and this code will help you automatically slide your carousel
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({
interval: 1200
})
});
</script>
A little Javascript will do the trick :)
I( have an MVC 5 application that is also using angularjs and boot strap. When the page loads the modal doesnt launch and i get the following err in the console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.8/$injector/modulerr?p0=myApp&p1=Error%3A%2….c%20(http%3A%2F%2Flocalhost%3A60248%2FScripts%2Fangular.min.js%3A17%3A431)
Here is my html:
Layout:
<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temujin #ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/js/Login.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Temujin", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Temujin</p>
</footer>
</div>
</body>
</html>
Directive template:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-signin" name="authForm" ng-submit="auth()" ng-controller ="AuthController" novalidate>
<input type="text" class="form-control" placeholder="user name" ng-model ="AuthController.user.username" required autofocus>
<input type="password" class="form-control" placeholder="password" ng-model ="AuthController.user.password" required>
<input type="submit" class="btn btn-primary" value="Submit" />
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
cshtml:
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2></h2>
<div id="loginBox">
<auth-modal></auth-modal>
</div>
angularjs:
(function () {
var temujin = angular.module('temujin', []);
temujin.controller('AuthModalController', ['$scope',function ($scope) {
$scope.temujin.user = {};
console.log("AuthModalController ran");
$scope.$(".modal").modal({ message: 'HEll0 World' });
}]);
temujin.directive("authModal", function () {
return { restrict: 'E', templateUrl: '\\js\\templates\\auth-modal.html', controller: 'AuthModalController',controllerAs: 'authmodalCtrl'}
});
temujin.controller('AuthController',['$scope',function ($scope) {
$scope.user = {};
console.log("AuthController ran");
$scope.auth = function () {
console.log("user " + this.user);
};
}]);
})();
MVC 5 controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace temujin.Controllers
{
public class TemujinController : Controller
{
//
// GET: /Temujin/
public ActionResult Index()
{
return View();
}
}
}
You are attempting to use the module myApp in your page here:
<html ng-app ="myApp">
But your actual module is named temujin
You just need to change your ng-app directive to point to the right module name.
<html ng-app ="temujin">