I am trying to build a language switcher inside the navbar.
My code is the following (in _LoginPartial.cshtml)
using ( Html.BeginForm( "SetCulture", "Home", FormMethod.Post ) ) {
#Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="#selectedImgSrc" alt="#culture" />
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><img src="~/assets/images/i18n/it-IT.png" alt="Italiano" /></li>
<li role="presentation"><img src="~/assets/images/i18n/en-US.png" alt="English" /></li>
</ul>
</li>
</ul>
}
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink( "Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" } )</li>
<li>#Html.ActionLink( "Sign in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" } )</li>
</ul>
#selectedImgSrc value is ~/assets/images/i18n/en-US.png
#culture value is en-us
However this code produce the following result
Which has a couple of problems:
On the nav the image is not showed but only the text (en-US)
The dropdown is too large and I dont like it. Is there any way to make it smaller?
On the nav the image is not showed but only the text (en-US)
I really can't see why the image isn't be shown on the nav, but I would suggest to you first check if it's included in the solution, then, inspect with your preffered developer tool what's the Html generated, and if it's properly generated, check the request about that image. If it's successfully requested, then your problem is in CSS.
Update:
Ok, I don't know exactly why I didn't see it before, but your images are using the tilde at the start of its path. While it's exactly what you need to specify for Asp.net that the path is absolute, in plain Html paths, it's just a common character, so it's looking for "http://example.com/~/assets/images/ ..." and not in the root of your domain. (There are some browsers/WebServers that can recognize it, but it's not a standard in URLs. Take a look in the most upvoted answer here: what is the use of "~" tilde in url? and also here: use of tilde (~) in asp.net path).
Also, It's a best practice to replace the hardcoded url with a Razor Helper like #Url.Content("~/assets/images/i18n/en-US.png"). Note that now I used the tilde, because the ASP.Net will translate to the correct absolute path.
*(I assumed that You are using razor because of #Html.ActionLink)
The dropdown is too large and I dont like it. Is there any way to make it smaller?
There is a rule for class "dropdown-menu" (.dropdown-menu), which has the property min-width set to 160px (min-width: 160px;).
So, it's just override this property with a new rule like:
Html:
<ul class="dropdown-menu UlLanguageMenu" role="menu">
In your CSS layout file:
ul.dropdown-menu.UlLanguageMenu{
min-width: auto;
}
Related
I have a problem with a dropdown-menu I've added to a Blazor server application, in that the background shading of each dropdown-item doesn't align correctly when placed in the default top-row div.
When I drop the same code in the default counter page, I don't have the problem.
I'm guessing the top-row div is causing inheritance of one or more CSS classes, but as a long-time (20 yrs) C# WinForms developer that's only just starting to look at Blazor and web development, I don't really know where to start correcting this. Can anybody offer me some pointers on where I might be going wrong?
Here's the code taken from MainLayout.razor. The exact same dropdown div block in the counter.razor page works fine, as shown above.
<main>
<div class="top-row px-4">
Home
Plans
<AuthorizeView>
<Authorized>
</Authorized>
<NotAuthorized>
<div class="dropdown">
<a #onclick=this.Toggle class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
#if (isActive)
{
<div class="dropdown-menu show" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Sign In</a>
<a class="dropdown-item" href="#">Register</a>
</div>
}
</div>
</NotAuthorized>
</AuthorizeView>
About Us
</div>
By default, MainLayout.razor also includes the MainLayout.razor.css file (with .top-row style). You probably should look for a solution to your problem there.
I'm working on a project and I need to disable a navbar link after I push a button that redirects me to another page if the post request was successful.
How can I have access to the navbar link, do I need to use css selectors, I'm planning to on using jquery to disable it, but I don't know how can I select it from another file, because my script is in my Index.html, and I have to have access to the _Navbar.html
//This is my _Navbar.html page. I want to disable the Contact page after a button has been pressed.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<span class="sr-only">Toggle navigation</span>
<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">
<li><a asp-page="/Index">Home</a></li>
<li><a asp-page="/About">About</a></li>
<li><a asp-page="/Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
//I tried to css selectors from the Index.html, but it doesnt work.
The _Navbar.html content is part of the DOM so you should be able to access it from a script, regardless of which file it is called from.
The link items don't have unique IDs - in theory you could look for the nth-child of 'navbar-nav' if 'Contact' is always going to be in a consistent position, but that is an anti-pattern that will give you a headache in the future if it ever moves.
The easy solution, give each link item an ID, and you can select and hide as needed.
I have a Main View and Two Partial Views.Main Views Consist of Navigation Links.
PartialViews1 Consist a Button and I need when button click it need to shows the PartialView2
PartialView1 has a Button and when i click the button i need to PartialView2(Shoe PartialView2)
Main View
<div class="container my-3">
<div class="card">
<div class="card-header bg-white border-bottom flex-center p-0">
<ul class="nav nav-pills card-header-pills main-nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#">CART</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)"><i data-feather="arrow-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DELIVERY</a>
</li>
</ul>
</div>
<div class="card-body px-1 px-md-5 pt-5">
#Html.Partial("_PartialView1")
#*#Html.Partial("_PartialView2)*#
</div>
</div>
</div>
PartialView1
//Some code here
Delivery<i data-feather="arrow-right"></i>
Jquery
$("#iddelivery").click(function(){
});
Write an action and return PartialView2, write a function to ajax call to that action
As mentioned there are many ways to do it.
If you don't want to reload/refresh the page with new content the easiest way is to create an ActionResult in your controller and return a partial view.
in your jQuery function the first thing you need to do is to call the preventDefault function to prevent any default action on your button. the next thing is to make a ajax call and receive the view-content from your controller. then you can replace the content of your div with the result you got from controller.
I just started working with, NET and I'm not very familiar with razor code.
I want to remove redundancy in my razor (.Net) code, without a big mess. I have about a dozen, PDF generating .cshtml files with razor code in it and the number is growing. Each file is nearly the same. The whole structure is always the same, only the content is always different. Because the files are pretty big, I will make an abstract example (ignore the real meaning of the elements, the list could be a different div for example):
File 1:
<div>
<p>
#content
</p>
</div>
<ul>
<li>
<a>
#comment
</a>
</li>
</ul>
File 2:
<div>
<p>
#picture
</p>
</div>
<ul>
<li>
<a>
<div>
#link
#metadata
</div>
</a>
</li>
</ul>
I thought it's not very clean to use #helper or #function for the different sections that are the same. The code would be not very clear to read with 10+ functions in it, that is only for the structure there.
I cant either just make a function to insert the value because sometimes there is, for example, a link or an additional div element inside the main structure.
At the end I want to have one place where I can change the basic structure, to change all structures, without going through 10+ files and change them one by one.
Is it possible to make such a "template"?
You can use Layout pages that define the overall structure. "Content", "Comment", etc are defined as sections in the layout, these sections get their content from the cshtml file that uses the layout. Creating a Consistent Layout in ASP.NET Web Pages (Razor) Sites.
_Layout.cshtml
<div>
<p>
#if (IsSectionDefined("content")) {
#RenderSection("content", false)
}
</p>
</div>
<ul>
<li>
<a>
#if (IsSectionDefined("comment")) {
#RenderSection("comment", false)
}
</a>
</li>
</ul>
.cshtml that uses this layout
#{ Layout = "~/Views/Shared/_Layout.cshtml"; }
#section content {
<div>My content</div>
}
#section comment {
bla bla bla ...
}
I have the following which show the navigation path of the user inside my _layout share view:-
<ul class="breadcrumb">
<li>
<a href="#">#ViewContext.Controller.ValueProvider.GetValue("controller").RawValue
</a> <span class="divider">/</span>
</li>
<li>
#ViewContext.Controller.ValueProvider.GetValue("action").RawValue
</li>
</ul>
but i have the following two questions:-
Is using ViewContext.Controller.ValueProvider.GetValue("controller").RawValue the right way to get the controller name
how i can build the href of the a links to point to the required path ?
Regards
You can get the controller name using the RouteData:
var controller = ViewContext.RouteData.Values["Controller"].ToString();
You can then build an ActionLink like so:
#Html.ActionLink("Click me", "View", controller)