I implemented a multi-language website by using resources files in Asp.net MVC.
All works fine, but my problem is in the layout. How I can use dynamic resources in my layout using view-bag?
I need to write something like this somewhere in my layout but I dont know what is the correct way to do this:
#{ var langu = ViewBag.lang;}
#Resources.langu.App_Name;
it has Error of course.
here is my layout page if needed:
<!DOCTYPE html>
<html>
<head>
.....
</head>
<body>
<div class="preloader">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<!-- Header
============================================ -->
<div class="header">
<div class="container relativesaz">
<div class="row">
<div class="col-sm-12">
<!-- Navbar Header -->
<div class="navbar-header">
<!-- Menu Toggle -->
<button class="menu-toggle"><i class="fa fa-navicon"></i></button>
<!-- Logo -->
<a class="iconvrf logo navbar-brand relativesaz" href="" target="_blank">
<img src="" alt="" />
<span class="fontsmall">
</span>
</a>
</div>
<!-- Menu -->
<div class="menu">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Feature</li>
<li>Description</li>
<li>Screenshot</li>
<li>AW </li>
<li>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
#ViewBag.ActiveMenu
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<ul>
<li><a class="colorblack" href="#Url.Action("ru", "Home")">Russian</a></li>
<li><a class="colorblack" href="#Url.Action("cn", "Home")">Chinese</a></li>
<li><a class="colorblack" href="#Url.Action("jp", "Home")">Japanese</a></li>
<li><a class="colorblack" href="#Url.Action("nl", "Home")">Dutch</a></li>
<li><a class="colorblack" href="#Url.Action("dk", "Home")">Danish</a></li>
<li><a class="colorblack" href="#Url.Action("de", "Home")">German</a></li>
<li><a class="colorblack" href="#Url.Action("fr", "Home")">French</a></li>
<li><a class="colorblack" href="#Url.Action("en", "Home")">English </a></li>
</ul>
</li>
<li>
<ul>
<li><a class="colorblack" href="#Url.Action("tr", "Home")">Turkish</a></li>
<li><a class="colorblack" href="#Url.Action("th", "Home")">Tahi</a></li>
<li><a class="colorblack" href="#Url.Action("sv", "Home")">Swedish</a></li>
<li><a class="colorblack" href="#Url.Action("pt", "Home")">Portuguese</a></li>
<li><a class="colorblack" href="#Url.Action("no", "Home")">Norwegian</a></li>
<li><a class="colorblack" href="#Url.Action("kr", "Home")">Korean</a></li>
<li><a class="colorblack" href="#Url.Action("es", "Home")">Spanish</a></li>
<li><a class="colorblack" href="#Url.Action("it", "Home")">Italian </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
#RenderBody()
<script src="~/Scripts/plugins.js"></script>
<script src="~/Scripts/main.js"></script>
</body>
</html>
You can directly use resx without viewbag like this:
Solution
A layout and two resx.
_Layout.cshtml
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
#if (System.Globalization.CultureInfo.CurrentCulture.ToString() == "fa-IR")
{
#Resource_fa_IR.App_Name
}
else
{
#Resource.App_Name
}
</p>
</div>
</div>
</header>
Resource.Designer.cs and Resource.fa.IR.Designer.cs
public static string App_Name {
get {
return ResourceManager.GetString("App_Name", resourceCulture);
}
}
You should change internal to public in there classes.
Related
I have started a new project in MVC 5 and i have downloaded a bootstrap template. the template works okay as a normal website.. But when I try to integrate it on the .net project it doesn't works. I have attached picture for better understatement.
Normal HTML image.
MVC Project Image
Here is my MVC code in _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="../../Content/img/favicon.png" type="image/png">
<title>Fashiop</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="#Url.Content("../../Content/bootstrap.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/linericon/style.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/css/font-awesome.min.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/owl-carousel/owl.carousel.min.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/lightbox/simpleLightbox.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/nice-select/css/nice-select.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/animate-css/animate.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/jquery-ui/jquery-ui.css")">
<!-- main css -->
<link rel="stylesheet" href="#Url.Content("../../Content/css/style.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/css/responsive.css")">
</head>
<body>
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="top_menu row m0">
<div class="container-fluid">
<div class="float-left">
<p>Call Us: 012 44 5698 7456 896</p>
</div>
<div class="float-right">
<ul class="right_side">
<li>
<a href="login.html">
Login/Register
</a>
</li>
<li>
<a href="#">
My Account
</a>
</li>
<li>
<a href="contact.html">
Contact Us
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html">
<img src="img/logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<div class="row w-100">
<div class="col-lg-7 pr-0">
<ul class="nav navbar-nav center_nav pull-right">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item submenu dropdown">
Shop
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="category.html">Shop Category</a>
<li class="nav-item">
<a class="nav-link" href="single-product.html">Product Details</a>
<li class="nav-item">
<a class="nav-link" href="checkout.html">Product Checkout</a>
<li class="nav-item">
<a class="nav-link" href="cart.html">Shopping Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="confirmation.html">Confirmation</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
Blog
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="single-blog.html">Blog Details</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
Pages
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
<li class="nav-item">
<a class="nav-link" href="tracking.html">Tracking</a>
<li class="nav-item">
<a class="nav-link" href="elements.html">Elements</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
<div class="col-lg-5">
<ul class="nav navbar-nav navbar-right right_nav pull-right">
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-user" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="lnr lnr lnr-cart"></i>
</a>
</li>
<hr>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
#*<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("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>*#
#*<div class="container body-content">*#
#RenderBody()
#*<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>*#
<script src="#Url.Content("../../Scripts/jquery-3.2.1.min.js")"></script>
<script src="#Url.Content("../../Scripts/popper.js")"></script>
<script src="#Url.Content("../../Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("../../Scripts/stellar.js")"></script>
<script src="#Url.Content("../../Content/vendors/lightbox/simpleLightbox.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/nice-select/js/jquery.nice-select.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/isotope/imagesloaded.pkgd.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/isotope/isotope-min.js")"></script>
<script src="#Url.Content("../../Content/vendors/owl-carousel/owl.carousel.min.js")"></script>
<script src="#Url.Content("../../Scripts/jquery.ajaxchimp.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/counter-up/jquery.waypoints.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/flipclock/timer.js")"></script>
<script src="#Url.Content("../../Content/vendors/counter-up/jquery.counterup.js")"></script>
<script src="#Url.Content("../../Scripts/mail-script.js")"></script>
<script src="#Url.Content("../../Scripts/theme.js")"></script>
</body>
</html>
I have a main category and main category has its subcategory list in database. So its a relational database. For better understanding .edmx map picture is attached. Now my goal is a partial view called _GuestNav.cshtml will contain category and subcategory list display then this _GuestNav.cshtml will be called from _Layout.cshtml. So i am calling a partial view from _Layout.cshtml and that partial view contains dynamic data with foreach loop. So i want to know how can i loop properly to display Main Category and sub Category on _GuestNav.cshtml? I have tried my best to give you better understanding however ask me any question you may have.
Controller:
[ChildActionOnly]
public PartialViewResult _GuestNav()
{
using (var db = new MyAppWebEntities())
{
return PartialView("_GuestNav", db.Categories.ToList());
}
}
_Layout.cshtml:
<!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")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<script src="~/Content/sweetalert.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
#RenderSection("scripts", required: false)
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#Url.Action("Index", "Home")">My App <i class="fa fa-refresh" aria-hidden="true"></i></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
#Html.Partial("_GuestNav"); #* here i am calling partial view *#
</div>
</div>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<hr />
#Html.Partial("_Footer")
</div>
</body>
</html>
_GuestNav.cshtml:
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Plans", "Plans", "Home")</li>
#* Example of loop bellow *#
#*#foreach (var allcat in allcats)
{
<li class="dropdown">
#allcat.MainCatName<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
#foreach (var subcat in allcat.subcat)
{
<li>subcat.SubcatName</li>
}
</ul>
</li>
}*#
#* Wanted output like bellow from database---> *#
<li class="dropdown">
Main Cat 1<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
</ul>
</li>
<li class="dropdown">
Main Cat 2<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
</ul>
</li>
</ul>
1.Change #Html.Partial("_GuestNav") to #{Html.RenderAction("_GuestNav", "YourControlerName");}
2.Add #Model TypeofYourViewModel on top of your partial view.
3.Change the looping as follows:
#foreach (var item in Model)
{
<li class="dropdown">
#item.MainCatName<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
#foreach (var subcat in item.subcat)
{
<li>subcat.SubcatName</li>
}
</ul>
</li>
}
Note: Change TypeofYourViewModel to whatever ViewModel you are passing into the partial view
I have a login page, but whenever I typed wrong credentials it showing the mainheader for login person but with no name.. See the image I attached for further explanations
login
login with wrrong credentials
this is what it look like when the person login successfully, it have name and company
View form
<ul class="nav navbar-nav navbar-right">
#{
AccountContactVM customer = (AccountContactVM)ViewBag.AccountData;
}
#if (customer.User == customer.User && customer.User != null )
{
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i class="fa fa-user-circle fa-fw fa-lg" aria-hidden="true"</i>
#customer.User.FirstName #customer.User.LastName
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li class="disabled">
<div class="row">
<div class="col-md-3">
<i class="fa fa-user-circle" style="font-size:40px;padding:5px 20px;" aria-hidden="true"></i>
</div>
<div class="col-md-9">
<p style="padding-top:5px;">
#customer.User.FirstName #customer.User.LastName
<br />
#customer.Company.AccountName
</p>
</div>
</div>
</li>
<li class="divider"></li>
<li><a asp-controller="Account" asp-action="Index">Customer Portal</a></li>
<li class="divider"></li>
<li><a a asp-controller="Account" asp-action="LogOut">Logout</a></li>
</ul>
</li>
}
else
{
<li><a asp-controller="Account" asp-action="SignUp">Register</a></li>
<li><a asp-controller="Account" asp-action="SignIn"><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>Login</a></li>
}
<li ng-cloak><span class="glyphicon glyphicon-shopping-cart"></span></i>Cart(<strong>{{CartCount}}</strong>)</li>
</ul>
Below is my code snippet:
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">This is a LOGO </a>
</div>
<ul class="nav navbar-nav pull-right">
<li><a href="#" > Abous US </a></li>
<li><a href="#" > Contact US </a></li>
<li><a href="#" > Acount </a></li>
</ul>
</nav>
</div>
</div>
</div>
My question: How can I pull ABOUT US and CONTACT US items into the right and the ACOUNT is in the left?
As per the docs, you can use navbar-right to pull some elements to the right:
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
Why my tooltip not working :(? I'm checking it 2 hours and i don't have any mind.
<div class="changebk">
<ul>
<li class="box">
<img src="img/facebook.png">
</li >
<li class="box">
<img src="img/twiiter.png">
</li>
<li class="box">
<img src="img/logom.png">
</li>
</ul>
$('.changebk a').tooltip({
content: '<img src="img/logom.png" alt="Here it;s me">'
}); // koniectoltip
you should add title in your html code inside
<div class="changebk">
<ul>
<li class="box">
<img src="img/facebook.png">
</li >
<li class="box">
<img src="img/twiiter.png">
</li>
<li class="box">
<img src="img/logom.png">
</li>
</ul>
</div>
see the example here https://jsfiddle.net/ct6vrao8/