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>
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 know there are a lot of questions surrounding this topic online however I cannot get any of the solutions to work for me.I have tried numerous way suggested online. I have a master page with my navigation bar code and I want the active link to be highlighted in green when I am on a particular page of the website. I can't figure out what I am doing wrong or missing to get this to work. I am new to ASP.Net and C# so any help would be appreciated.
Here is my current code in body tags of my master page:
<script>
$(document).ready(function () {
var url = window.location;
$('.sidebar .nav').find('.active').removeClass('active');
$('.sidebar .nav li a').each(function () {
if (this.href == url) {
$(this).parent().addClass('active');
}
});
});
</script>
<form id ="form1" runat="server">
<div class="wrapper">
<div class="sidebar" data-color="green" data-image="../assets/img/side-navship.jpg">
<div class="logo">
<a href="Default.aspx" class="simple-text">
Speed-E
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="">
<a href="<%= Page.ResolveUrl("~/Default.aspx") %>">
<i class="material-icons">dashboard</i>
<p>Home</p>
</a>
</li>
<li class="">
<a href="<%= Page.ResolveUrl("~/NewCert.aspx") %>">
<i class="material-icons">content_paste</i>
<p>New Certificate</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-transparent navbar-absolute">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<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="#"> </a>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<asp:ContentPlaceHolder ID="BodyContent"runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</form>
can someone please help me with how to add onclick event in below code.
I want to fire onclick event on each li element.
<ul id="tree1">
<li OnClick="Button3_Click" runat="server">
<i class='fa fa-institution' style='color: #fff;'></i>
Add Institute
<ul></ul>
</li>
<li OnClick="Button4_Click" runat="server">
<i class='fa fa-puzzle-piece' style='color: #fff;'></i>
Test
<ul></ul>
</li>
<li OnClick="Button5_Click" runat="server">
<i class='fa fa-area-chart' style='color: #fff;'></i>
Analysis
<ul></ul>
</li>
<li OnClick="Button6_Click" runat="server">
<i class='fa fa-book' style='color: #fff;'></i>
Library
<ul></ul>
</li>
<li OnClick="Button7_Click" runat="server">
<i class='fa fa-bookmark' style='color: #fff;'></i>
Bookmark
<ul></ul>
</li>
</ul>
This can be easily achieved by implementing a client side click event using jQuery everytime a user clicks on an <li> element.
Inside the click event for the <li> you can check which item was clicked and make a server side call by using $.ajax and a [WebMethod].
Code behind:
[System.Web.Services.WebMethod]
public static string LiClick(string item)
{
System.Diagnostics.Debugger.Break();
return String.Format("You clicked on - {0}", item);
}
.ASPX:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".li").click(function () {
var text = $(this).text().trim();
$.ajax({
type: "POST",
url: "UnorderedListExample.aspx/LiClick",
contentType: "application/json;charset=utf-8",
data: '{item:"' + text + '"}',
success: function (data) {
var data = data.d;
alert(data)
},
error: function (errordata) {
console.log(errordata);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<ul id="tree1">
<li class="li">
<i class='fa fa-institution' style='color: #fff;'></i>
Add Institute
<ul></ul>
</li>
<li class="li">
<i class='fa fa-puzzle-piece' style='color: #fff;'></i>
Test
<ul></ul>
</li>
<li class="li">
<i class='fa fa-area-chart' style='color: #fff;'></i>
Analysis
<ul></ul>
</li>
<li class="li">
<i class='fa fa-book' style='color: #fff;'></i>
Library
<ul></ul>
</li>
<li class="li">
<i class='fa fa-bookmark' style='color: #fff;'></i>
Bookmark
<ul></ul>
</li>
</ul>
</form>
</body>
Can someone help me out. Really desperate to make it work. Here is my full master page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>IslandGas</title>
<link href="/css/bootstrap.css" rel="stylesheet" />
<link href="/css/font-awesome.min.css" rel="stylesheet" />
<script src ="/js/bootstrap.js" type = "text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" class="form-horizontal">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="AdminUpdatePanel" runat="server">
<ContentTemplate>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a id="home" href="~/Admin/dash.aspx" runat="server" class="navbar-brand">Island Gas Admin</a>
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="products" href="#"><i class="fa fa-fw fa-wrench"></i>Products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A1" href="ViewProducts.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Products</a></li>
<li><a id="A2" href="AddNewProduct.aspx" runat="server"><i class="fa fa-fw fa-edit"></i>Add a Product</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="suppliers" href="#"><i class="fa fa-fw fa-wrench"></i>Category <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A29" href="ViewCategory.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Product Categories</a></li>
<li><a id="A6" href="AddCategory.aspx" runat="server"><i class="fa fa-fw fa-edit"></i>Add Product Category</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="orders" href="#"><i class="fa fa-fw fa-table"></i>Customer Orders <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A10" href="CustomerOrder.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Orders</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="reports" href="#"><i class="fa fa-fw fa-table"></i>Income Reports <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A17" href="IncomeReports.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Report</a></li>
<li><a id="A3" href="ReportCustomerTrack.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Customer Track Report</a></li>
<li><a id="A7" href="ReportProducts.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Products Report</a></li>
<li><a id="A9" href="ReportRegisteredCustomers.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Registered Customer</a></li>
<li><a id="A4" href="ReportsGR.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Return Goods Requests</a></li>
</ul>
</li><li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="A5" href="#"><i class="fa fa-fw fa-table"></i>Audit Trail <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A8" href="AuditTrail.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Audit Trail</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li id="user" runat="server" class="dropdown" visible="true">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<asp:Literal ID="ltUser" runat="server" Text="Administrator" /> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="divider"></li>
<asp:linkbutton ID="linkLogout" runat="server" onclick="link_Logout_Click" CausesValidation="False" >[Log Out]</asp:linkbutton>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="clearfix">
<div class="page-header">
<div class="row">
<div class="col-lg-12">
<h1><asp:ContentPlaceHolder ID="title" runat="server" /></h1>
</div>
</div>
</div>
<div class="row">
<asp:ContentPlaceHolder ID="content" runat="server" />
</div>
</div>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Made by Duhaylungsod, Paolo</p>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/jquery-1.11.3.min.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/bootstrap.min.js") %>'></script>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
i am trying to make datepicker work. i have found a good code and it works perfectly fine in pages w/o a master page, update panel, script manager etc.
head code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
content:
$(document).ready(function () {
$('[id$=txtExpiry]').datepicker({ showAnim: 'slideDown' });
});
textbox:
<div class ="form-group">
<label class ="control-label col-lg-4"> Expiry Date</label>
<div class = "col-lg-8">
<asp:TextBox ID="txtExpiry" runat="server" class="form-control"></asp:TextBox>
</div>
really really desperate to make this work. help me out please
<asp:TextBox ID="datepicker" runat="server" class="form-control">
When server control with ID datepicker will be rendered in html the result html element will automatically generated id which contains prefixes based on parent server controls from master page, i.e
id="ctl100_main_datepicker"
$( "#datepicker" ).datepicker();
The jquery selector searches html element with ID equals to "datepicker".
You can use element css class as a selector:
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
<asp:TextBox ID="datepicker" runat="server" class="datepicker form-control"></asp:TextBox>
Try changing this line
<asp:TextBox ID="datepicker" runat="server" class="form-control"></asp:TextBox>
to this
<asp:TextBox ID="datepicker" runat="server" class="datepicker, form-control"></asp:TextBox>
Note the extra class called "Datepicker" in addition to 'form-control'. This should allow jquery to find the form element and apply a datepicker to it
Try this :
If you don't want to use a css selector and keep selecting by id, try this :
$('#<%= datepicker.ClientID %>').datepicker();
This way you will have the id generated by ASP.NET.
MasterPage gives another id for controls. See this reference http://www.asp.net/web-forms/overview/older-versions-getting-started/master-pages/control-id-naming-in-content-pages-cs
When you are using a master page, to avoid same id in a page, asp.net itself change the textbox id, actually it adds the name of placeholder to the id of your control.
For Example:
TextBox with "txtExpiry" id, in a placeholder with "content" id, become: "content_txtExpiry" when it rendered.
so may javascripts and jquery codes can not find the input!
and the solution is defining the datepicker not using the class or old id, using the final rendered names as "content_txtExpiry" so change your code as:
$('[id$=content_txtExpiry]').datepicker({ showAnim: 'slideDown' });
My main menu will wrap to a new row instead of collapsing (it will collapse if I make the window even smaller, but i want to get rid of this graphic bug.)
This is my code in _Layout.cshtml
<div class="navbar-wrapper">
<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="#nav-collapse">
<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" style="padding-right: 30px; padding-top: 5px;" href="/">
<img src="#Url.Content("~/content/images/static/logo_web_white.png")" class="hidden-xs" style="height: 70px;" />
<img src="#Url.Content("~/content/images/static/logo_mini.png")" class="visible-xs" style="height: 70px;" />
</a>
</div>
<div class="navbar-collapse collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("New Paste", "Create", "Paste")</li>
<li>#Html.ActionLink("Archive", "archive", new { controller = "paste", page = 1 })</li>
<li>#Html.ActionLink("Trending", "trending", "paste")</li>
#if (Request.IsAuthenticated)
{
<li>#Html.ActionLink("My pastes", "archive", new { controller = "user", username = User.Identity.Name, page = 1 })</li>
}
<li>
<a href=" #" class="dropdown-toggle" data-toggle="dropdown">
About <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("FAQ", "faq", "home")</li>
<li>#Html.ActionLink("API", "api", "home")</li>
<li>#Html.ActionLink("PRIVACY POLICY", "privacy", "home")</li>
<li>#Html.ActionLink("DMCA", "dmca", "home")</li>
<li>#Html.ActionLink("CONTACT US", "contact", "home")</li>
<li>#Html.ActionLink("ABOUT", "about", "home")</li>
</ul>
</li>
</ul>
#Html.Partial("_LoginPartial")
</div><!--/.navbar-collapse -->
</div>
</div>
</div>
And my _LoginPartial
#using Microsoft.AspNet.Identity
#if (Request.IsAuthenticated)
{
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", #class = "navbar-right", style = "display: inline-block;" }))
{
#Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right">
<li>
<a href=" #" class="dropdown-toggle" data-toggle="dropdown">
Hello #User.Identity.GetUserName() <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Upload Image", "uploadimage", "user")</li>
</ul>
</li>
<li>
</li>
<li>Log off</li>
</ul>
}
}
else
{
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
<li>#Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
</ul>
}
I have tried to move the #Html.Partial("_LoginPartial") but nothing helps. This is almost ouy of the box from the MVC5 template in Visual Studio.
#AndyM, your comment lead me in the right direction.
I recreated the Bootstrap.css file through http://getbootstrap.com/customize and increased the #screen-sm attribute to 1000px instead of 768px. This resolved the collapse problem.