How to add onClick function on unordered list element? - c#

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>

Related

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

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>

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();

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>

Change <li> class to active when page is loaded

I'm having a hard time to make <li> class to active when page is loaded. Here's my scenario I copied a sample Dropdown in a certain website to integrate it in my website. I'm using C# Asp.Net
_Layout.cshtml
<body>
<div id="header">
#Html.Partial("_HeaderPartial")
</div>
<!--SIDEBAR Navigation-->
<aside id="menu">
// The Dropdown
#Html.Partial("_SidebarPartial")
</aside>
<div id="wrapper">
#RenderBody()
<footer class="footer">
#Html.Partial("_FooterPartial")
</footer>
</div>
<div id="right-sidebar" class="animated fadeInRight">
#Html.Partial("_RightSidebarPartial")
</div>
</body>
_SidebarPartial
<ul class="nav" id="side-menu">
<li>
<span class="nav-label">Dashboard</span>
</li>
<li>
<span class="nav-label">Analytics</span>
</li>
<li>
<span class="nav-label">Interface</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Panels design</li>
<li>Typography</li>
<li>Colors & Buttons</li>
<li>Components</li>
<li>Alerts</li>
<li>Modals</li>
</ul>
</li>
<li>
<span class="nav-label">App views</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Contacts</li>
<li>Projects</li>
<li>Project detail</li>
<li>App plans</li>
<li>Social board</li>
</ul>
</li>
<li>
<span class="nav-label">Charts</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>ChartJs</li>
<li>Flot charts</li>
<li>Inline graphs</li>
</ul>
</li>
<li>
<span class="nav-label">Box transitions</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li><span class="label label-success pull-right">Start</span> Overview </li>
<li>Columns from up</li>
</ul>
</li>
</ul>

As I commented, here is a small example with an id attribute on the list:
<ul class="nav" id="side-menu">
<li id="interfaces">
<span class="nav-label">Interface</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Panels design</li>
<li>Typography</li>
<li>Colors & Buttons</li>
<li>Components</li>
<li>Alerts</li>
<li>Modals</li>
</ul>
</li>
</ul>
And then you could add the following line to the document.ready function:
$("#interfaces").attr("class", "active");

Check this out. This will also help you
just write the following code inside document.ready function
$('#interfaces').addClass('active');
Cheers

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

Categories