We Keep Coding

integrating bootstrap classes to have a dropdown list using the Html.ActionLink

trying to make a drop once click on the html action, works with anchor tag
As per below it works with
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<p>Testing<span class="dropdown-toggle"></span> </p>
</a>
<div class="collapse" id="auth">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/login.html"> Home 1 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/login-2.html"> Home 2 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/register.html"> Home 3 </a></li>
</ul>
</div>
</li>
working with tag
as per below does not work.\
<li class="nav-item dropdown" id="User">
<i class="fas fa-user-edit " style="margin-left: 30px;margin-top: 6px;"> </i>
#Html.ActionLink("User Management", "Index", "Users", null, new { #class = "nav-link dropdown-toggle", data_toggle = "dropdown", aria_expanded = "false" })
<div class="collapse">
<ul class="nav flex-column sub-menu">
<li>
<a class="nav-link">Home 1</a>
</li>
<li>
<a class="nav-link">Home 2</a>
</li>
<li>
<a class="nav-link">Home 3</a>
</li>
</ul>
</div>
</li>

C# MVC replace one Partial View with another

I'm building a website using MVC where i want it to have a small box on the head Nav-bar where the user can log in to his account. The head Nav-bar is a layout page shared with all the views i have and the Partial view of the login is rendered in the layout.
this is the layout with the partial view placement:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
#Html.ActionLink("חנות השיגועים של האחים וויזלי", "Master", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<ul class="nav navbar-nav">
<li>#Html.ActionLink("בית", "Master", "Home")</li>
<li>#Html.ActionLink("אודות", "About", "Home")</li>
<li>#Html.ActionLink("צור קשר", "Contact", "Home")</li>
<li>#Html.ActionLink("סל קניות", "Cart", "Home")</li>
<li>#Html.ActionLink("פרופיל", "UserProfile", "Home")</li>
<li>#Html.ActionLink("הרשמה", "Register", "Account")</li>
</ul>
#*<ul class="nav navbar-nav navbar-right">
<li>*#
<div id="PartialPlace">
#Html.Partial("_LoginPartial")
</div>
#*</li>
</ul>*#
</div>
</nav>
<div class="container body-content">
#RenderBody()
<img src="~/Assets/Site_Background.jpg" alt="Weasly Shop" id="BkgImage" class="bg"/>
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
this is the Login partial code:
<form method="post" id="LoginFloat" action="/account/login">
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="UserName" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="Password" required>
<button type="submit" class="btn btn-primary">Login</button>
#*#Ajax.ActionLink("Login", "Login", "Account", new AjaxOptions() { UpdateTargetId = "divToUpdate" }, new { #class = "btn btn-primary" })*#
<input type="checkbox" checked="checked"> Remember me
</div>
and this is the action:
[HttpPost]
public ActionResult Login(string UserName, string Password)
{
using (AspStoreDBEntities1 db = new AspStoreDBEntities1())
{
if (ModelState.IsValid)
{
foreach (var user in db.Users)
{
if (user.UserName == UserName && user.Password == Password)
{
FormsAuthentication.SetAuthCookie(UserName, true);
return PartialView("_LogedInPartial");
}
}
}
return View();
}
}
What i want to do is when the user press the Login Button in the Login partial in the layout only the partialView will refresh and will show the user this partial view where he could post an ad:
<div class="container">
<div class="jumbotron" id="LoginFloat">
<h5>Hello #Model.UserName</h5>
<button class="btn btn-warning" onclick="">Advertise!</button>
<br />
<input type="submit" name="LogOff" value="LogOff" />LogOff
</div>
I tried using Ajax.Actionlink with the replacement action, but i couldn't figure out how to use it. Should i use it in the layout page or in the Login partialView or where?

Create ActionLink and active link in asp.net mvc

I have code sample like this
<div class="col-md-2 col-sm-3 col-xs-12 fill">
<div class="nav-highlight fill">
<ul class="list-group">
<li class="list-group-item borderless active">
<a class="" href="#login"><i class="fa fa-share-square-o" aria-hidden="true"></i>Login</a>
</li>
<li class="list-group-item borderless">
<a class="" href="#register"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Sign Up</a>
</li>
</ul>
</div>
I need to use ActionLink in MVC from a link and you can see i have class="active" i need when click on that will have that class,what i the best way to do?
Thanks all

$(document).ready(function(){
$('ul li a').click(function(){
$('li a').removeClass("active");
$(this).addClass("active");
});
});
body{
font-sze:14px;
}
.container{
max-width:960px;
margin:0 auto;
}
nav ul li{
list-style:none;
float:left;
padding-right:20px;
}
nav ul li a{
text-decoration:none;
color:#000;
background-color:#ccc;
padding:4px 5px;
}
.active{
background-color:#333;
color:#fff;
}
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="container">
<nav>
<ul>
<li><a class="menu active" href="#">Menu1 </a></li>
<li><a class="menu" href="#">Menu2</a></li>
<li><a class="menu" href="#">Menu3</a></li>
<li><a class="menu" href="#">Menu4</a></li>
<li><a class="menu" href="#">Menu5</a></li>
</ul>
</nav>
</div>
</body>

You can use onclick attribute like this:
Replace a tags:
#Html.ActionLink("Login", "Your Action", null, new { onclick = "setActive(this);", #class = "" })
#Html.ActionLink("Sign Up", "Your Action", null, new { onclick = "setActive(this);", #class = "" })
Add setActive javascript function:
<script>
function setActive(element) {
element.parentElement.className = "list-group-item borderless active";
}
</script>

Page load hide div and show another

how can i control the two div on page load. one div will display at a time.. I need it for login and logout session in asp.net..
this is my code, after loggin, it shows two div.. after logout, only one div is shown
Master page.master.cs
protected void Page_Load(object sender, EventArgs e)
{
isset.Visible = notsesstion.Visible = false;
if (!String.IsNullOrEmpty(Session["name"] as String))
{
lbllogin.Text = "Welcome Back " + Session["name"].ToString();
isset.Visible = true;
notsesstion.Visible = false;
}
else
isset.Visible = false;
notsesstion.Visible = true;
}
Masterpage.aspx
<nav class="navbar navbar-default navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="HomePageClient.aspx">
<img alt="Brand" src="images/logo2.png" height="50" />
</a>
</div>
<div id="notsesstion" runat="server">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>LogIn |</li>
<li>Employee |</li>
<li>Client</li>
</ul>
</div>
</div>
<div id="isset" runat="server">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><p><asp:Label ID="lbllogin" runat="server" Text=""></asp:Label></p></li>
<li><a href="LogOut.aspx" class="glyphicon glyphicon-user" >LogOut</a></li>
</ul>
</div>
</div>
</nav>

Something like this:
<% if (!String.IsNullOrEmpty(Session["name"] ){ %>
// html code here
<% } %>

Update _Layout for different type of users

I'm using the MVC template on Asp.net MVC 4, and I have a UserProfile(t class with the UserType(this field receive only 2 values, "Ouvinte" and "Musico") field, that works like roles in application, right?
My idea is, make a verification on _Layout.cshtml to know what is the UserType that are logged on application and modify the navbar on top.
THIS IS MY NAVBAR ON _Layout
<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", "Index", "Home")</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Usuario", "Usuario", "Home")</li>
<li>#Html.ActionLink("Musico", "Musico", "Home")</li>
</ul>
<ul class="nav navbar-nav navbar-right">
#if (!Request.IsAuthenticated){ //IF USER IS NOT LOGGED.
<li>#Html.ActionLink("Register", "Register", "Account")</li>
<li>#Html.ActionLink("Log In", "Login", "Account")</li>
}
else //DO A ELSEIF HERE IF THE USER HAS THE USERTYPE Musico
{
<li>#Html.ActionLink("Manage Account", "Manage", "Account")</li>
<li>#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {
#Html.AntiForgeryToken()
Log off}</li>
} //ANOTHER ELSE HERE TO VERIFY IF THE USER HAS USERTYPE Ouvinte
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
My doubt is, how can i call the userProfile here to do these validation?