In an ASP.NET MVC project I would like to display a brief message to the user, eg. 'Hello, username!'
i the navigational bar, if the user is signed in. I'm using the standard bootstrap layout, and trying this, but it appears weirdly. I'm not sure what CSS ot HTML to change. Here's what I'm trying.
#if (Session["Username"] != null)
{
<ul class="nav navbar-nav navbar-right">
<li>Hello, #Session["Username"]</li>
<li>#Html.ActionLink("Logout", "Logout", "Home")</li>
</ul>
}
else
{
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Register", "Register", "Home")</li>
</ul>
}
That's in my _Layout page. The right text appears, but it's kind of off-centre and dark, not easily visible. How can I make it appear just like the actionlinks?
You can use htmlAttributes to change the style
<li>#Html.ActionLink("Logout", "Logout", "Home", htmlAttributes: new { #style="font-size:small;color:blue" })</li>
Related
I am new to MVC world. I have a nav in my Layout file used by logged in users :
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Member")</li>
<li>#Html.ActionLink("My Profile", "MyProfile", "Member")</li>
<!-- User type Admin, then Admin Menu -->
<li>#Html.ActionLink("Admin Index", "AdminIndex", "Member")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<!-- Throws error /User/Logout not found -->
<li>#Html.ActionLink("Logout", "Logout", "User")</li>
<!-- Works Perfectly fine, but the link is on new line & different font/color/underlined -->
#if (Request.IsAuthenticated)
{
using (Html.BeginForm("Logout", "User", FormMethod.Post, new { id = "logoutForm" }))
{
<li>Logout</li>
}
}
</ul>
</div>
The #Html.ActionLink("Logout" doesn't work. It throws "/User/Logout" not found Error How to make that work like the below logout with <a href ??? Is the error b'coz in href, their is form and calling Form.Post method ??
Controller code :
public class UserController : Controller
{
// Registeration Action
[HttpGet]
public ActionResult Registeration() {..... }
// Login
[HttpGet]
public ActionResult Login() {.... }
// Login Post
[HttpPost]
public ActionResult Login(UserLogin userLogin, string returnUrl) { ...}
// Logout
[Authorize]
[HttpPost]
public ActionResult Logout()
{
FormsAuthentication.SignOut();
return RedirectToAction("Login", "User");
}
}
Can anyone please help me get this work !! Any help is highly appreciated.
Thanks
I suspect, although it is difficult to tell, that the controller is not UserController but maybe AccountController (the default) or MemberController.
In which case the call should be
#Html.ActionLink("Logout", "Logout", "Account")
or
#Html.ActionLink("Logout", "Logout", "Member")
Following your additional edit I think the issue will be that logout is a Post and a link is only ever a Get request so Mvc is looking for a get action /User/logout. There is an answer here about how to convert a link to a Post here.
I would probably get your link to call an ajax command in some js code. To make the most of the Razor goodness you can use #Url.Action. Alter your code as follows.
Your nav will look like this;
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Member")</li>
<li>#Html.ActionLink("My Profile", "MyProfile", "Member")</li>
<!-- User type Admin, then Admin Menu -->
<li>#Html.ActionLink("Admin Index", "AdminIndex", "Member")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>Log Out</li>
}
}
</ul>
</div>
Then your javascript function needs to be somewhere accessible to your nav page (the bottom of your _Layout page is probably easiest).
<script type="text/javascript">
function LogOut() {
$.ajax({
type: "POST",
url: "#Url.Action("Logout", "User")"
});
}
</script>
Hope that makes sense, I haven't tested it but your link should now look like all the others and your controller will now be getting a POST request so will access your logout method. Any problems shout.
I am trying to pass to bootstrap navbar an array in jade.
I already did this achievement:
block linkSelected
-var selected = 'index';
-var menu = { 'Sobre': '/sobre', 'blog': '/blog', 'Contato': '/contato' };
and in header:
#navbarCollapse.collapse.navbar-collapse
ul.nav.navbar-nav.navbar-right
each val, key in menu
if selected === key
li.nav-item.active
a.nav-link(href=val, title=key)= key
else
li.nav-item
a.nav-link(href=val+'.html', title=key)= key
So i ended up to this in menu:
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">Sobre</li>
<li class="nav-item">blog</li>
<li class="nav-item">Contato</li>
</ul>
Does anyone know in pug/jade how to achieve the dropdown menu? I only achieved the first level menu... :/
Thank you so much and Happy New Year!
It's 3:40AM and I'm going to give up trying for tonight.
The tabs will not update the page outside of the navigation area.
The PanelController looks like this:-
app.controller('PanelController', function($scope) {
$scope.tab = 1;
$scope.selectTab = function(setTab) {
$scope.tab = setTab;
};
$scope.isSelected = function(checkTab) {
return $scope.tab === checkTab;
};
});
and the nav pane looks like this:-
<div class="navbar-collapse collapse" ng-controller="PanelController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active:isSelected(1) }">
<a href ng-click="selectTab(1)">Blog</a>
</li>
<li ng-class="{ active:isSelected(2) }">
<a href ng-click="selectTab(2)">About{{tab}}</a>
</li>
<li ng-class="{ active:isSelected(3) }">
<a href ng-click="selectTab(3)">Contact</a>
</li>
</ul>
</div>
and the placeholder HTML for my two tabs is as follows:-
<div ng-controller="PanelController">
<div ng-show="isSelected(1)">
<p>Hello</p>
</div>
<div ng-show="isSelected(2)">
<p>Please work</p>
</div>
</div>
As you can see, the {{tab}} next to 'About' in my navbar is updating in my view as I click the tabs, as is the active class. When I place a {{tab}} expression outside of the navbar it isn't updating whenever it's clicked. Obviously this is something related to the scope of the variable, but I am using the PanelController on the parent of both the nav and my main area.
I can't see what I'm doing wrong.
I'd appreciate a fresh pair of eyes -- I've already some help with this already and any more will be graciously accepted.
The problem diagnosis is fairly simple, 2 controllers means 2 instances that each have their own scope
You would need to use a service or events to have them communicate together
I am new to MVC and have encountered a problem. I have an HTML page that scrolls down to a section when that section's name is clicked from the navigation bar but now I have to change this HTML line of code to MVC:
<li><a class="page-scroll" href="#services">Services</a></li>
I have tried to use Html.ActionLink but have not had any success yet!
What I have so far:
#Html.ActionLink("Services", "Index", "Home", new { area = "#services" }, new { #class = "page-scroll" })
Create your own helper or use raw html
<li>Link Text</li>
OR
<%= Html.ActionLink("Link Text", "Action", "Controller", null, null, "services", new { parameter = "example"}, null) %>
On your Index page:
<div id="services">
<p>Here is the content you want to make show when you click the link</p>
</div>
When you click on 'Link Text' it will direct you to the services section of your Index page.
Try
#Html.ActionLink("Services", "Index", "Home#services", new { #class = "page-scroll" })
I am trying to display an image on my home page. MY Index.cshtml code looks as follows:
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<h4>View results by:</h4>
<ul id="friend">
<li>#Html.ActionLink("Countries", "Countries", "Home")</li>
<li>#Html.ActionLink("Events", "Events", "Home")</li>
</ul>
<div>
<img id="banner" src="oly1.jpg"/>
</div>
For some reason, though, the image does not show on my page. I have the image saved to my desktop, and when I did the same thing for another project (using an image saved to the desktop), it worked with the same syntax. I was using pure html, though.
Any ideas?
Try this:
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<h4>View results by:</h4>
<ul id="friend">
<li>#Html.ActionLink("Countries", "Countries", "Home")</li>
<li>#Html.ActionLink("Events", "Events", "Home")</li>
</ul>
<div>
<img id="banner" src="#Url.Content("~/oly1.jpg")"/>
</div>
~ refers to the root of your web site. If you have your image file at the root, then use the above path. If your image is inside Content/images, use ~/Content/images/oly1.jpg.
Example: