How can I hide my navbar until the user is authenticated? - c#

I am upgrading and old website using bootstrap 3 and I had an option for hiding the menu(navbar) when user was not logged in and would like to do this with bootstrap. And have a value for enabling it when the user logins.
Below is my code in the .cs file for the default page where it asks for login. Can I add an ID to navbar? as per example
<nav class="navbar navbar-default" ID="Menu">
? Thanks
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Security;
using DA; //erc
using System.Data;//erc
using System.Configuration;
using System.Net;
using System.Net.Sockets;//erc
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["oUser"] == null)
{
//Set the focus to the username textbox
// this.txtUsername.Focus();
}
else
{ //find user and redirect to oRole.startPage
OBJ_User oUser = new OBJ_User();
DA_Roles daRole = new DA_Roles();
OBJ_Role oRole = new OBJ_Role();
oUser = (OBJ_User)Session["oUser"];
oRole = daRole.getRoleById(oUser.role_FK);
//Redirect!
Response.Redirect(oRole.startPage);
}
//Desabilita el menu hasta que se entre el login funcionaba antes de hacer el cambio a bootstrap 3
//Control Menu1 = bootstrap_navbar_enabled;
//if (Menu1 != null)
// {
//Menu1.Visible = false;
// }
}
View code:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="SACPAN.master.cs" Inherits="SACPAN" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title>SDEC</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Scripts/jquery-1.11.1.js"></script>
<script type="text/javascript" src='Scripts/bootstrap.min.js'></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<form id="form1" runat="server">
<%--<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods="true"/>--%>
<%--<ajax:ToolkitScriptManager runat="Server" EnablePageMethods="true"/>--%>
<%-- Sistema para Autorización de Comercios del Programa de Asistencia
Nutricional--%>
<img class="img-responsive" src="images/OCIN.png" alt="OCINBANNER"
width="250" height="300">
<nav class="navbar navbar-default">
<div class="container-fluid">
<%-- 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="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
<a class="navbar-brand" href="/default.aspx">
<img alt="home" src="images/home.png" width="30" height="30">
</a>
</div>
<%-- Collect the nav links, forms, and other content for toggling --%>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Entidades</li>
<%-- Arreglar el dropdown de Establecimientos--%>
<li class="dropdown">
Establecimientos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Establecimientos</li>
<li class="divider"></li>
<li>Establecimientos Cancelados</li>
<li class="divider"></li>
</ul>
</li>
<li>Querellas</li>
<li>Legales</li>
<li>Mapa</li>
<%-- Arreglar el dropdown de Informes--%>
<li class="dropdown">
Informes <span class="caret"></span>
<ul class="dropdown-menu">
<li>Archivo Transmisión</li>
<li class="divider"></li>
<li>Informes</li>
<li class="divider"></li>
</ul>
<li class="dropdown">
Alarmas <span class="caret"></span>
<ul class="dropdown-menu">
<li>Accesos al Sistema</li>
<li class="divider"></li>
<li>Archivos de Transmisión</li>
<li class="divider"></li>
</ul>
<%-- Arreglar el dropdown (parent) de Administracion--%>
<li class="dropdown">
Administración <span class="caret"></span>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<%--Submenu --%>
<li> Mantenimiento de Accesso<li>
<ul class="dropdown-submenu">
<li>Usuarios</li>
<li>Roles</li>
<li>Funciones</li>
<li class="divider"></li>
</ul>
</li>
<%--Submenu --%>
<li> Mantenimiento de Establecimientos<li>
<ul class="dropdown-submenu">
<li>Actividades</li>
<li>Razones de Actividades</li>
<li>Categorías</li>
<li>Entidades Bancarias</li>
<li>Estatus de Comerciante</li>
<li>Estructuras Legales</li>
<li>Regiones y Municipios</li>
<li>Servicios</li>
<li>Tipos de Documentos</li>
<li>Tipos de Negocio</li>
<li>Tipos de Telefono</li>
<li>Tipos de Propietarios</li>
<li>Tipos de Seguro Social</li>
<li class="divider"></li>
</ul>
</li>
<%--Submenu --%>
<li>Mantenimientos Adicionales</li>
<ul class="dropdown-submenu">
<li>Datos Variables</li>
<li>Excepciones del Sistema</li>
<li class="divider"></li>
</ul>
</li>
</ul>
<%-- El dropdown de Ayuda --%>
<li class="dropdown">
Ayuda <span class="caret"></span>
<ul class="dropdown-menu">
<li>Manual de Usuario - Establecimiento</li>
<li class="divider"></li>
<li>Manual de Usuario - Administración</li>
<li class="divider"></li>
</ul>
</li>
<li>Salir</li>
</ul>
</div><!-- /.navbar-collapse -->


I found a way to hide the navbar on the login webpage.
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Scripts/jquery-1.11.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript">
//Hide Navbar
var scrollp=0;
(function ($) {
$(document).ready(function () {
// hide .navbar first
$(".navbar").hide();
});
}(jQuery));
</script>

Related

C# MVC 5 ASP.NET

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>
}

My code gives no error, but still not working (insertion operation)

I have developed an data insertion code in SQL database from C#, but its not working, its displaying "Added Successfully" but in actual its not inserting.
Please help me on this. Whats my mistake in it or anything wrong in my code ?? I check my code again and again but still can't find the mistake.
Here is my code :
C# code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;
public partial class Provide_Notes : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
if(Session["StaffUsername"]!=null)
{
lblProfilePic.Text = Session["StaffUsername"].ToString();
string CS = ConfigurationManager.ConnectionStrings["SCDB"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
con.Open();
SqlCommand cmd = new SqlCommand("SELECT Photo_Binary FROM Staff_Table WHERE Username=#SUsername",con);
cmd.Parameters.AddWithValue("#SUsername",lblProfilePic.Text);
SqlDataReader sdr = cmd.ExecuteReader();
if(sdr.HasRows)
{
while(sdr.Read())
{
byte[] imagedata = (byte[])sdr["Photo_Binary"];
string image = Convert.ToBase64String(imagedata, 0, imagedata.Length);
Image3.ImageUrl = "data:Img/png;base64," + image;
}
}
}
}
else
{
Response.Redirect("index.aspx");
}
}
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
string CS = ConfigurationManager.ConnectionStrings["SCDB"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
con.Open();
string filePath = FileUpload1.PostedFile.FileName;
string fileName = Path.GetFileName(filePath);
string ext = Path.GetExtension(fileName);
string contentType = String.Empty;
switch(ext)
{
case ".docx":
contentType = "application/vnd.ms-word";
break;
case ".doc":
contentType = "application/vnd.ms-word";
break;
case ".xls":
contentType = "application/vnd.ms-excel";
break;
case ".xlsx":
contentType = "appliacation/vnd.ms-excel";
break;
case ".pdf":
contentType = "application/pdf";
break;
}
if(contentType!=String.Empty)
{
Stream fs = FileUpload1.PostedFile.InputStream;
BinaryReader br = new BinaryReader(fs);
Byte[] bytes = br.ReadBytes((Int32)fs.Length);
SqlCommand cmd = new SqlCommand("INSERT INTO Notes VALUES (#Note_Name,#Description,#Name,#Content_Type,#Data)",con);
cmd.Parameters.AddWithValue("#Note_Name",TextBox1.Text.Trim());
cmd.Parameters.AddWithValue("#Description", TextBox2.Text.Trim());
cmd.Parameters.Add("#Name", SqlDbType.NVarChar).Value = fileName;
cmd.Parameters.Add("#Content_Description", SqlDbType.NVarChar).Value = contentType;
cmd.Parameters.Add("#Data", SqlDbType.VarBinary).Value = bytes;
Response.Write("<script>alert('Note added !')</script>");
}
}
}
protected void btnLogout_Click(object sender, EventArgs e)
{
Session.Abandon();
Session.RemoveAll();
Response.Redirect("Logout.aspx");
}
}
ASP Web HTML code :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Provide_Notes_FY.aspx.cs" Inherits="Provide_Notes" EnableEventValidation="false" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Staff Access | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="StyleSheet.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Date Picker -->
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<form runat="server">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="adminTS.aspx" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>S.</b>A</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Staff</b> Access</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<asp:LinkButton ID="btnLogout" runat="server" OnClick="btnLogout_Click" CausesValidation="false">
Logout <i class="fa fa-sign-out"></i>
</asp:LinkButton>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<i class="fa fa-gears"></i>
</li>
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<!--<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">-->
<asp:Image ID="Image3" runat="server" CssClass="img-circle" />
</div>
<div class="pull-left info">
<asp:Label ID="lblProfilePic" runat="server" Text=""></asp:Label>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="active treeview">
<a href="adminTS.aspx" id="Staff_Control">
<i class="fa fa-dashboard"></i><span>Staff Control
</span>
</a>
<!--<ul class="treeview-menu">
<li class="active"><i class="fa fa-circle-o"></i> Dashboard v1</li>
<li><i class="fa fa-circle-o"></i> Dashboard v2</li>
</ul>-->
</li>
<li id="li" class="treeview">
<a href="#">
<i class="fa fa-user"></i>
<span>View HOD</span>
</a>
</li>
<li>
<a href="pages/widgets.html">
<i class="fa fa-users"></i> <span>Staff</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>First Year</li>
<li><i class="fa fa-circle-o"></i>Second Year</li>
<li><i class="fa fa-circle-o"></i>Third Year</li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-info-circle"></i>
<span>Student Details</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> First Year</li>
<li><i class="fa fa-circle-o"></i> Second Year</li>
<li><i class="fa fa-circle-o"></i>Third Year</li>
</ul>
</li>
<li class="treeview">
<a href="">
<i class="fa fa-edit"></i>
<span>Publish CT Result</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>First Year</li>
<li><i class="fa fa-circle-o"></i>Second Year</li>
<li><i class="fa fa-circle-o"></i>Third Year</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i>
<span>Attendance</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>First Year</li>
<li><i class="fa fa-circle-o"></i>Second Year</li>
<li><i class="fa fa-circle-o"></i>Third Year</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-book"></i>
<span>Provide Notes</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>First Year</li>
<li><i class="fa fa-circle-o"></i>Second Year</li>
<li><i class="fa fa-circle-o"></i>Third Year</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-bell"></i>
<span>Provide Notice</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-phone"></i>
<span>Contact Parents</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>First Year</li>
<li><i class="fa fa-circle-o"></i>Second Year</li>
<li><i class="fa fa-circle-o"></i>Third Year</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-question"></i>
<span>Forum Discussion</span>
</a>
</li>
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<!--<h1>
Dashboard
<small>Control panel</small>
</h1>-->
</section>
<!-- Main content -->
<section class="content">
<div class="container">
<div>
<h2>
<asp:Label ID="lbl1" runat="server" Text="First Year"></asp:Label>
</h2>
</div>
<div>
<div class="input-group">
<span class="input-group-addon">Note</span>
<asp:TextBox ID="TextBox1" runat="server" CssClass="form-control" placeholder="Note Name" Text=""></asp:TextBox>
</div>
<br />
<div class="input-group">
<span class="input-group-addon">Description</span>
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control" placeholder="Note Description" TextMode="MultiLine" Text=""></asp:TextBox>
</div>
<br />
<div style="color:cornflowerblue"></div>
<asp:FileUpload ID="FileUpload1" runat="server" CssClass="btn btn-primary" />
<br />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn btn-primary" OnClick="LinkButton1_Click">Upload <span class="fa fa-upload"></span></asp:LinkButton>
</div>
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 2.3.8
</div>
<strong>Copyright © 2014-2016 Almsaeed Studio.</strong> All rights
reserved.
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-gears"></i></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-user bg-yellow"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
<p>New phone +1(800)555-1234</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
<p>nora#example.com</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-file-code-o bg-green"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
<p>Execution time 5 seconds</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-warning pull-right">50%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
</p>
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right">
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
<i class="fa fa-trash-o"></i>
</label>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function () {
$("#HOD_Panel").click(function () {
$("#Add_HOD").load("AddHOD/ahod.aspx");
});
});
$(document).ready(function () {
$("#HOD_Panel").click(function () {
$("#Remove_HOD").load("AddHOD/RemoveHOD.aspx");
});
});
</script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
</form>
</body>
</html>
Table Design :
ID int primary key identity,
Note_Name nvarchar(max) not null,
Description nvarchar(max) not null,
Name nvarchar(max),
Content_Type nvarchar(max),
Data varbinary(max)

Because you did not call ExecuteNonQuery() menthod:
SqlCommand cmd = new SqlCommand("INSERT INTO Notes VALUES (#Note_Name,#Description,#Name,#Content_Type,#Data)",con);
cmd.Parameters.AddWithValue("#Note_Name",TextBox1.Text.Trim());
cmd.Parameters.AddWithValue("#Description", TextBox2.Text.Trim());
cmd.Parameters.Add("#Name", SqlDbType.NVarChar).Value = fileName;
cmd.Parameters.Add("#Content_Description", SqlDbType.NVarChar).Value = contentType;
cmd.Parameters.Add("#Data", SqlDbType.VarBinary).Value = bytes;
int recordsAffected = cmd.ExecuteNonQuery();

My icons aren't properly loading

I currently work on a C#/asp.net project, and my icons are not displayed correctly any more. I say "any more" because at a moment, it worked. That lead me to think that it's not a problem of importation, but more of code (but I may be wrong). The used icons come from the libraries "font awesome" and "ionicons". As I am a newbie in HTML, I really don't know where the problem could come from : I put here the code of the html page which could be incriminated, but I am not really sure it's relevant.
#model Serene5.Common.DashboardPageModel
#{
ViewData["Title"] = "Dashboard";
ViewData["PageId"] = "Dashboard";
}
#section Head {
<link rel="stylesheet" href="~/Content/iCheck/flat/blue.css">
<link rel="stylesheet" href="~/Scripts/morris/morris.css">
<link rel="stylesheet" href="~/Scripts/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="~/Scripts/datepicker/datepicker3.css">
<link rel="stylesheet" href="~/Scripts/daterangepicker/daterangepicker-bs3.css">
<link rel="stylesheet" href="~/Scripts/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<script src="~/Scripts/raphael/raphael-min.js"></script>
<script src="~/Scripts/morris/morris.min.js"></script>
<script src="~/Scripts/sparkline/jquery.sparkline.min.js"></script>
<script src="~/Scripts/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="~/Scripts/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="~/Scripts/knob/jquery.knob.js"></script>
<script src="~/Scripts/daterangepicker/moment.min.js"></script>
<script src="~/Scripts/daterangepicker/daterangepicker.js"></script>
<script src="~/Scripts/datepicker/bootstrap-datepicker.js"></script>
<script src="~/Scripts/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="~/Scripts/adminlte/pages/dashboard.js"></script>
<script src="~/Scripts/adminlte/demo.js"></script>
}
#section ContentHeader {
<h1>#LocalText.Get("Navigation.Dashboard")<small>#Html.Raw(Texts.Site.Dashboard.ContentDescription)</small></h1>
}
<div class="row">
<!-- Small boxes (Stat box) -->
#{for (int i = 0; i < Model.ListStations.Length; i++)
{
string urlTemp = Model.ListStations[i];
string colorTemp = "small-box bg-" + Model.ListColors[i % Model.ListColors.Length];
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<!-- achtung hier soll man vielleicht die Adresse ändern -->
<div class="#colorTemp">
<div class="inner">
<h3>Station</h3>
<p> #Model.ListStations[i]</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars" aria-hidden="true"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>;
</div>
<!-- /.row -->
}
}
</div>
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-7 connectedSortable">
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active">Area</li>
<li>Donut</li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
</div>
</div><!-- /.nav-tabs-custom -->
</section><!-- right col -->
</div><!-- /.row (main row) -->
Here is also a screen showing how the website is currently displayed
Don't hesitate to ask for any further details, I will edit the post
Here is the html generated by the page :
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en-US" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en-US" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en-US" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="home" id="ApplicationPath" href="/" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link href="/Content/font-open-sans.css?v=_lyM_7sDAZstbPZ6aTr8rQ2" rel="stylesheet" type="text/css"/>
<link href="/Content/font-awesome.css?v=xJVlSGl4W8PfYCFmFoFK0Q2" rel="stylesheet" type="text/css"/>
<link href="/Content/simple-line-icons.css?v=CTymYjlO1pj9tYNeQl0o3Q2" rel="stylesheet" type="text/css"/>
<link href="/Content/ionicons.css?v=8nNUsorzz0jSgmDAMwXQzg2" rel="stylesheet" type="text/css"/>
<link href="/Content/aristo/aristo.css?v=MvOjKTOOh8qSpUV6_HAAHw2" rel="stylesheet" type="text/css"/>
<link href="/Content/bootstrap.css?v=KjHcoRLyaSO1FnbLdkxY1Q2" rel="stylesheet" type="text/css"/>
<link href="/Content/colorbox/jquery.colorbox.css?v=XnRFE7k2jxZ7HVn-r2Jaww2" rel="stylesheet" type="text/css"/>
<link href="/Content/jquery.fileupload.css?v=T6JqyTNuIq_tJ7F3R_5z3g2" rel="stylesheet" type="text/css"/>
<link href="/Content/pace.css?v=L_wBl1JNKiTT55UKpioDig2" rel="stylesheet" type="text/css"/>
<link href="/Content/slick.grid.css?v=Qhl0MYjRyBVihAtJg0CyYg2" rel="stylesheet" type="text/css"/>
<link href="/Content/css/select2.css?v=qz1jk8aVr8t_14LSWpFqJA2" rel="stylesheet" type="text/css"/>
<link href="/Content/toastr.css?v=lykj60CDw5t8wg1dl5y0OA2" rel="stylesheet" type="text/css"/>
<link href="/Content/serenity/serenity.css?v=gXaUzPFBrbwXSSXwdXa1Dw2" rel="stylesheet" type="text/css"/>
<link href="/Content/site/site.css?v=9m22h6rQgsGBXJmC3nRqDw2" rel="stylesheet" type="text/css"/>
<script type="application/json" id="ScriptCulture">{"DateOrder":"mdy","DateFormat":"MM/dd/yyyy","DateSeparator":"/","DateTimeFormat":"MM/dd/yyyy HH:mm:ss","DecimalSeparator":".","GroupSepearator":","}</script>
<script type="text/javascript">window.paceOptions = { minTime: 250, ghostTime: 250, restartOnRequestAfter: 250, ajax: { trackMethods: ['GET', 'POST'], trackWebSockets: true, ignoreURLs: [] } };</script>
<script src="/Scripts/pace.js?v=evfXQgyADGar15z3wQSTJA2" type="text/javascript"></script>
<script src="/Scripts/rsvp.js?v=ueGo_q7N2s93Y-AzfUrs8A2" type="text/javascript"></script>
<script src="/Scripts/jquery-3.1.1.js?v=RoNrvGA8lWW1zAYRAMy6yA2" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.12.1.js?v=q1KE3l49Ih5TZH_TSOVkSw2" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-i18n.js?v=fAmmyIS6gdv3hjEK_SFl9Q2" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js?v=Q3Q3qwsR7Ja623fum9IuDw2" type="text/javascript"></script>
<script src="/Scripts/jquery.blockUI.js?v=pK0cWqNrGE32YMv5pAHwjQ2" type="text/javascript"></script>
<script src="/Scripts/jquery.cookie.js?v=1VKN3gAGx4vgSBcyfC-bbw2" type="text/javascript"></script>
<script src="/Scripts/jquery.json.js?v=ojEuMerciKpf9J0ukgaNyg2" type="text/javascript"></script>
<script src="/Scripts/jquery.autoNumeric.js?v=Cx_a1fBvtVV4DjFAtii2Yw2" type="text/javascript"></script>
<script src="/Scripts/jquery.colorbox.js?v=lWVLMExZxFAtnKWbSFmEUQ2" type="text/javascript"></script>
<script src="/Scripts/jquery.dialogextendQ.js?v=q4CdCMYs_hImIJk7B7KATg2" type="text/javascript"></script>
<script src="/Scripts/jquery.event.drag.js?v=Q42_cWjms19Czv7rSFThUg2" type="text/javascript"></script>
<script src="/Scripts/jquery.scrollintoview.js?v=j4tgWM1381VKsGUok8so9w2" type="text/javascript"></script>
<script src="/Scripts/select2.js?v=mb-susqgC8W2T0C4V7rb5g2" type="text/javascript"></script>
<script src="/Scripts/sortable.js?v=BBvydRU72CWAGeMpFpM-_Q2" type="text/javascript"></script>
<script src="/Scripts/toastr.js?v=gOnkqpQBPIBBWDh-h2vjsg2" type="text/javascript"></script>
<script src="/Scripts/SlickGrid/slick.core.js?v=BLCRBDx7U3jsEuDNgnEQkw2" type="text/javascript"></script>
<script src="/Scripts/SlickGrid/slick.grid.js?v=f5lvq3M8mdFxwZoSgj7E8w2" type="text/javascript"></script>
<script src="/Scripts/SlickGrid/slick.groupitemmetadataprovider.js?v=RUFU1x9TDSkyvChFWteLsA2" type="text/javascript"></script>
<script src="/Scripts/SlickGrid/Plugins/slick.autotooltips.js?v=-AIKLINWiZmkA-CnhA5ZRQ2" type="text/javascript"></script>
<script src="/Scripts/SlickGrid/Plugins/slick.headerbuttons.js?v=9YOWFAIrd9_PYSbDwFxdqg2" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js?v=-4FUnuKJZROh7VcUsbGg8A2" type="text/javascript"></script>
<script src="/Scripts/saltarelle/mscorlib.js?v=AO_L_1E_BHK8K8k5pu8Fmg2" type="text/javascript"></script>
<script src="/Scripts/serenity/Serenity.CoreLib.js?v=1L8198NTwiEN0tbBJm4szw2" type="text/javascript"></script>
<script src="/Scripts/serenity/Serenity.Script.UI.js?v=FGT2MLhQAFXM0w_Ybxe0AQ2" type="text/javascript"></script>
<script src="/Scripts/jquery.cropzoom.js?v=ju9wbWcKr48aWqD5qkXCcQ2" type="text/javascript"></script>
<script src="/Scripts/jquery.fileupload.js?v=e-hGpVezhrzCNo0tj4bR2A2" type="text/javascript"></script>
<script src="/Scripts/jquery.iframe-transport.js?v=mCjCNWoMY71LgLOhwmmOGQ2" type="text/javascript"></script>
<script src="/Scripts/jquery.maskedinput.js?v=HN6v6EEgtiHc2VNZKpTJmA2" type="text/javascript"></script>
<script src="/Scripts/jquery.slimscroll.js?v=buWrXYmFe-bq8Itj6zJGsA2" type="text/javascript"></script>
<script src="/Scripts/SlickGrid/Plugins/slick.rowselectionmodel.js?v=XribFqTCdkXWmUfvTfmwMw2" type="text/javascript"></script>
<script src="/Scripts/mousetrap.js?v=LZ3oO7G3uh_XrsUxuoHUpA2" type="text/javascript"></script>
<script src="/Scripts/fastclick/fastclick.js?v=bp07DadPKkpwQrSUzap8Lg2" type="text/javascript"></script>
<script src="/Scripts/adminlte/app.js?v=sEFfHWOWYAV53y-2WWKVgw2" type="text/javascript"></script>
<script src="/Scripts/Site/Serene5.Web.js?v=MWzcm5FC-dWRLpEqVuzDwg2" type="text/javascript"></script>
<script src="/DynJS.axd/LocalText.Site.en-US.Public.js?v=TAg9qLhz34DPI6z4guBgog2"></script>
<script src="/DynJS.axd/ColumnsBundle.js?v=t0XeZZg0HS5LnLTkazC9fw2"></script>
<script src="/DynJS.axd/FormBundle.js?v=F99UAnyx4Xtee88SQxRi1A2"></script>
<script src="/DynJS.axd/TemplateBundle.js?v=q6ePJcfaBGdWeEuYVsIJHA2"></script>
<script src="/DynJS.axd/RegisteredScripts.js?v=c25aIR1HyiCXuBpDAHMSdQ2"></script>
<link rel="stylesheet" href="/Content/iCheck/flat/blue.css">
<link rel="stylesheet" href="/Scripts/morris/morris.css">
<link rel="stylesheet" href="/Scripts/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="/Scripts/datepicker/datepicker3.css">
<link rel="stylesheet" href="/Scripts/daterangepicker/daterangepicker-bs3.css">
<link rel="stylesheet" href="/Scripts/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<script src="/Scripts/raphael/raphael-min.js"></script>
<script src="/Scripts/morris/morris.min.js"></script>
<script src="/Scripts/sparkline/jquery.sparkline.min.js"></script>
<script src="/Scripts/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/Scripts/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="/Scripts/knob/jquery.knob.js"></script>
<script src="/Scripts/daterangepicker/moment.min.js"></script>
<script src="/Scripts/daterangepicker/daterangepicker.js"></script>
<script src="/Scripts/datepicker/bootstrap-datepicker.js"></script>
<script src="/Scripts/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="/Scripts/adminlte/pages/dashboard.js"></script>
<script src="/Scripts/adminlte/demo.js"></script>
<title>Dashboard - Serene5</title>
</head>
<body id="s-DashboardPage" class="fixed sidebar-mini hold-transition skin-blue has-layout-event">
<div class="wrapper">
<header class="main-header">
<a href="/" class="logo">
<span class="logo-mini"><i></i></span>
<span class="logo-lg"><i></i><b>Serene5</b></span>
</a>
<nav class="navbar navbar-static-top" role="navigation">
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="/Content/adminlte/img/avatar04.png" class="user-image" alt="User Image">
<span class="hidden-xs">admin</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="/Content/adminlte/img/avatar04.png" class="img-circle" alt="User Image">
<p>
admin
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<i class="fa fa-lock fa-fw"></i> Change Password
</div>
<div class="pull-right">
<i class="fa fa-sign-out fa-fw"></i> Logout
</div>
</li>
</ul>
</li>
<li>
<i class="fa fa-gears"></i>
</li>
</ul>
</div>
</nav>
</header>
<aside class="main-sidebar">
<section class="sidebar">
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" id="SidebarSearch" name="q" class="form-control" autocomplete="off">
<span class="input-group-btn">
<button type="button" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<ul class="sidebar-menu" id="SidebarMenu">
<li class="active">
<a href="/">
<i class="nav-icon fa icon-speedometer"></i>
<span>Dashboard</span>
</a>
</li>
<li class=" treeview">
<a href="javascript:;">
<i class="nav-icon fa icon-screen-desktop"></i>
<span>Administration</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="">
<a href="/errorlog.axd"_blank target=_blank>
<i class="nav-icon fa icon-ban"></i>
<span>Exceptions Log</span>
</a>
</li>
<li class="">
<a href="/Administration/Language">
<i class="nav-icon fa icon-bubbles"></i>
<span>Languages</span>
</a>
</li>
<li class="">
<a href="/Administration/Translation">
<i class="nav-icon fa icon-speech"></i>
<span>Translations</span>
</a>
</li>
<li class="">
<a href="/Administration/Role">
<i class="nav-icon fa icon-lock"></i>
<span>Roles</span>
</a>
</li>
<li class="">
<a href="/Administration/User">
<i class="nav-icon fa icon-people"></i>
<span>User Management</span>
</a>
</li>
</ul>
</li>
<li class=" treeview">
<a href="javascript:;">
<i class="nav-icon fa icon-layers"></i>
<span>Default</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="">
<a href="/Default/TcpDump">
<i class="nav-icon fa fa-circle-o"></i>
<span>TcpDump</span>
</a>
</li>
<li class="">
<a href="/Default/Errors">
<i class="nav-icon fa fa-circle-o"></i>
<span>Errors</span>
</a>
</li>
<li class="">
<a href="/Default/Regeln">
<i class="nav-icon fa fa-circle-o"></i>
<span>Regeln</span>
</a>
</li>
</ul>
</li>
<script type="text/javascript">
function openWindow(url, width, height) {
height = height || (screen.availHeight - 60);
width = width || (screen.availWidth - 10);
var x = (screen.availWidth - width) / 2 - 5; if (x < 0) x = 0;
var y = (screen.availHeight - height) / 2 - 25; if (y < 0) y = 0;
var winPopup = window.open(url, "", "status=0, toolbar=0, width=" + width + ", height=" + height +
", scrollbars=1, resizable=yes, left=" + x + ", top=" + y);
}
</script>
</ul>
</section>
</aside>
<div class="content-wrapper">
<section class="content-header">
<h1>Dashboard<small>a sample with random data (from free <em>AdminLTE theme</em>)</small></h1>
</section>
<section class="content">
<div class="row">
<!-- Small boxes (Stat box) -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<!-- achtung hier soll man vielleicht die Adresse ändern -->
<div class="small-box bg-blue">
<div class="inner">
<h3>Station</h3>
<p> Station1</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars" aria-hidden="true"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>;
</div>
<!-- /.row -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<!-- achtung hier soll man vielleicht die Adresse ändern -->
<div class="small-box bg-black">
<div class="inner">
<h3>Station</h3>
<p> Station2</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars" aria-hidden="true"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>;
</div>
<!-- /.row -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<!-- achtung hier soll man vielleicht die Adresse ändern -->
<div class="small-box bg-green">
<div class="inner">
<h3>Station</h3>
<p> Station3</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars" aria-hidden="true"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>;
</div>
<!-- /.row -->
</div>
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-7 connectedSortable">
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active">Area</li>
<li>Donut</li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
</div>
</div><!-- /.nav-tabs-custom -->
</section><!-- right col -->
</div><!-- /.row (main row) -->
</section>
</div>
<footer class="main-footer">
<div class="pull-right hidden-xs">
Serenity Platform
</div>
<strong>Copyright (c) 2015.</strong> All rights reserved.
</footer>
<aside class="control-sidebar control-sidebar-dark">
<div class="tab-content">
<div class="tab-pane active" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">Language</label>
<select id="LanguageSelect" class="form-control"></select>
</div>
<div class="form-group" style="margin-top: 15px;">
<label class="control-sidebar-subheading">Theme</label>
<select id="ThemeSelect" class="form-control"></select>
</div>
</form>
</div>
</div>
</aside>
<div class="control-sidebar-bg"></div>
</div>
<script type="text/javascript">
$().ready(function () {
new Serene5.Common.SidebarSearch($('#SidebarSearch'), $('#SidebarMenu')).init();
new Serene5.Common.LanguageSelection($('#LanguageSelect'), 'en-US');
new Serene5.Common.ThemeSelection($('#ThemeSelect'));
;
var doLayout = function () {
height = (this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height;
height -= $('header.main-header').outerHeight() || 0;
height -= $('section.content-header').outerHeight() || 0;
height -= $('footer.main-footer').outerHeight() || 0;
if (height < 200) height = 200;
$("section.content").css("min-height", (height) + "px");
$('body').triggerHandler('layout');
};
$(window).bind("load resize layout", doLayout);
doLayout();
});
</script>
</body>
</html>
note : Here is an excerpt of the debug console
"iisexpress.exe" (CLR v4.0.30319: DefaultDomain): "C:\Windows\Microsoft.Net\assembly\GAC_32\mscorlib\v4.0_4.0.0.0__b77a5c561934e089\mscorlib.dll" geladen. Das Laden von Symbolen wurde übersprungen. Das Modul ist optimiert, und die Debugoption "Nur eigenen Code" ist aktiviert.
"iisexpress.exe" (CLR v4.0.30319: DefaultDomain): "C:\Windows\Microsoft.Net\assembly\GAC_32\System.Web\v4.0_4.0.0.0__b03f5f7f11d50a3a\System.Web.dll" geladen. Das Laden von Symbolen wurde übersprungen. Das Modul ist optimiert, und die Debugoption "Nur eigenen Code" ist aktiviert.
"iisexpress.exe" (CLR v4.0.30319: DefaultDomain): "C:\Windows\Microsoft.Net\assembly\GAC_MSIL\System\v4.0_4.0.0.0__b77a5c561934e089\System.dll" geladen. Das Laden von Symbolen wurde übersprungen. Das Modul ist optimiert, und die Debugoption "Nur eigenen Code" ist aktiviert.
(Sorry for german). "Das Laden von Symbolen wurde übersprungen" means "the load of symbols has been skipped"

As mentioned in the very first response, what is the path of your font-awesome font files?
They need to be in the same place as the font-awesome CSS file expects them to be.
To determine what path is being used, using Google Chrome, press Ctrl + Shift + J or use the options menu > More Tools > Developer Tools. Navigate to the Network tab and you will be able to see a row relating to loading the fonts resource as well as a Status code (404 not found, 200 good).

datepicker not working if it is inside a master page

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' });

Google Material design is not working in asp.net

Google Material design is not working in asp.net.
I added whole thing all files and scripts. but still not working.
what should I add any extra thing, help me please.
css:
<link href="css/bootstrap-material-design.min.css" rel="stylesheet" />
<link href="css/roboto.min.css" rel="stylesheet" />
<link href="css/roboto.css" rel="stylesheet" />
<link href="css/ripples.min.css" rel="stylesheet" />
<link href="css/ripples.css" rel="stylesheet" />
<link href="css/material.min.css" rel="stylesheet" />
<link href="css/material.css" rel="stylesheet" />
<link href="css/material-fullpalette.min.css" rel="stylesheet" />
<link href="css/material-fullpalette.css" rel="stylesheet" />
<link href="css/jquery-ui.min.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-warning">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-warning-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</li>
<li>Link</li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-md-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
script:
<script src="js/ripples.min.js"></script>
<script src="js/ripples.js"></script>
<script src="js/npm.js"></script>
<script src="js/material.min.js"></script>
<script src="js/material.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Please follow this order:
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/material.min.js"></script>
<script src="js/ripples.min.js"></script>
<script src="js/npm.js"></script>

Categories