Implement-Bootstrap-Carousel-slide-from-database-using-Repeater-control-in-ASPNet - c#

I am using Bootstrap carousel slider script inside Repeater but its not working proper.The data display at once and stack horizontal ,When I click NEXT or PREVIOUS in the carousel control, the carousel displays correctly but with only one item in every carousel i want to display 3 items in each carousel .
<!-- Begin Carousel -->
<div class="row">
<div id="realto-carousel-afee" class="carousel slide">
<div class="carousel-navigation pull-right"> <a class="serif italic pull-left view-all-carousel" href="properties-grid-layout-2">عرض الكل</a> <a class="left carousel-control pull-left" href="#realto-carousel-afee" data-slide="prev"><i class="fa fa-angle-left"></i></a> <a class="right carousel-control pull-right" href="#realto-carousel-afee" data-slide="next"><i class="fa fa-angle-right"></i></a> </div>
<div class="carousel-inner">
<asp:Repeater runat="server" ID="ProjectsRepater">
<ItemTemplate>
<div <%# Container.ItemIndex == 0 ? "active" : "" %>>
<div class="col-lg-4 col-md-4 col-sm-4 col-sx-12">
<div class="box-container">
<div class="holder"> <a class="overlay" href="" title=""> <span class="more"> <i class="fa fa-zoom-in"></i> </span>
<div class="prop_img"> <img width="370" height="210" src="150w" sizes="(max-width: 370px) 100vw, 370px" /> </div>
</a> <span class="prop-tag">للبيع</span>
<div class="prop-info">
<h3 class="prop-title">
<asp:Label ID="ProjId" runat="server" Visible="false" Text='<%# Eval("ID")%>'></asp:Label>
<asp:Label Text='<%# Eval("ProjectName")%>' ID="lblProjName" runat="server">مشروع 94 حي اللوتس الشمالية 2</asp:Label>
</h3>
<ul class="more-info clearfix">
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important">المساحات</span>
<label id="lblArea" runat="server" class="qty pull-right">2</label>
</li>
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important">نظام السداد</span> <span id="lblPaymentsSystem" runat="server" class="qty pull-right">2</span> </li>
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important">تاريخ الاستلام</span> <span id="lblReceivedDate" runat="server" class="qty pull-right">2</span> </li>
</ul>
</div>
<!-- prop-info -->
</div>
<!-- holder -->
</div>
<!-- box-container -->
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<!-- .carousel-inner -->
</div>
</div>
<!--End Carousel-->
</div>
in this code i select all projects and display them in repeater control by carousel slider
protected void Page_Load(object sender, EventArgs e)
{
// RepeterData();
ProjectsRepater.DataSource = GetAllProjecct();
ProjectsRepater.DataBind();
}
public class Proj
{
public int ID { get; set; }
public string ProjectName { get; set; }
}
public List<Proj> GetAllProjecct()
{
List<Proj> listproj = new List<Proj>();
SqlConnection con = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["AlamarConnectionString"].ConnectionString);
SqlCommand com = new SqlCommand("Select ID,ProjectName from Projects", con);
con.Open();
SqlDataReader reader = com.ExecuteReader();
while (reader.Read())
{
Proj cnt = new Proj();
cnt.ID = Convert.ToInt32(reader["ID"]);
cnt.ProjectName = Convert.ToString(reader["ProjectName"]);
listproj.Add(cnt);
}
return listproj;
}

Related

Avoid duplicates using foreach asp.net mvc 5

I have created a tab where one adds their products and automatically it will add it on the tab. But now my issue is that it repeats the same thing on the tab view "header" whenever I have uploaded the same database. I want it to categorize it and not repeat it. Below is the code I have created.
The picture below shows the database.
Controller
public ActionResult Index()
{
return View(db.Products.ToList());
}
View
#model IEnumerable<tkkkk.Models.Product>
#{
ViewBag.Title = "Home Page";
int counterHeader = 0;
int counterBody = 0;
}
<br />
<ul class="nav nav-tabs">
#foreach (var product in Model)
{
if (counterHeader == 0)
{
<li class="active"><a data-toggle="tab" href="##product.ProductId">#product.ProductName</a></li>
}
else
{
<li><a data-toggle="tab" href="##product.ProductId">#product.ProductName</a></li>
}
counterHeader++;
}
</ul>
<br />
<div class="tab-content">
#foreach (var item in Model)
{
if (counterBody == 0)
{
<div id="#item.ProductId" class="tab-pane fade in active">
<div class="col-lg-4 col-md-6 mb-4" style="width:200px;">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="" width="200">
<div class="card-body">
<h4 class="card-title">
#item.ProductItem - #item.ProductName
</h4>
<h5>R #item.ProductPrice</h5>
</div>
</div>
</div>
</div>
}
else
{
<div id="#item.ProductId" class="tab-pane fade">
<div class="col-lg-4 col-md-6 mb-4" style="width:200px;">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="" width="200">
<div class="card-body">
<h4 class="card-title">
#item.ProductItem - #item.ProductName
</h4>
<h5>R #item.ProductPrice</h5>
</div>
</div>
</div>
</div>
}
counterBody++;
}
</div>

MVC C# Carousel Image

i have been trying to create a carousel image on my MVC application. The below snippet from W3 was just used as an example. The result was the images displayed ont he webpage one below eachother. Do i need to do anything else on the MVC application to resolve this?
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/newyork.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I had the same requirement sometime ago and I used below code, look if it works for you.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
#{
var first = true;
}
#foreach (var item in ViewBag.Images)
{
<div class="carousel-item #(first?Html.Raw("active"):Html.Raw(""))">
<img class="d-block w-100" src="#item.Image" alt="#item.Name">
</div>
first = false;
}
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Please Try this.I hope your problem is solved
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner" role="listbox">
#{int i = 0;}
#foreach (var item in Model)
{
i++;
var active = i == 1 ? "active" : "";
<div class="carousel-item #active">
<img src="#Url.Content(#item.FilePath)" alt="">
</div>
}
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

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

Page load hide div and show another

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

Multiple bootstrap sliders using asp:repeater control

I have to use multiple bootstrap carousel in single page, using the asp repeater control but it doesn't work, it just show one slider on the page
Here is the html and asp code
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<div class="row">
<asp:Repeater runat="server" ID="Slider1">
<ItemTemplate>
<div class="col-md-2">
<div class="row">
<a target="_blank" href="<%# Eval("URL") %>">
<img class="caption" src="../Includes/gaceta/<%# Eval("Titulo") %>/files/res/pages/page_0000.jpg" alt="<%# Eval("Titulo") %>" width="188" height="222" /></a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<!--.row-->
</div>
</div>
<!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div>
<!--.Carousel-->
</div>
<hr />
<div class="col-md-12">
<div id="Carousel2" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<div class="row">
<asp:Repeater runat="server" ID="Slider2">
<ItemTemplate>
<div class="col-md-2">
<div class="row">
<a target="_blank" href="<%# Eval("URL") %>">
<img class="caption" src="../Includes/gaceta/<%# Eval("Titulo") %>/files/res/pages/page_0000.jpg" alt="<%# Eval("Titulo") %>" width="188" height="222" /></a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<!--.row-->
</div>
</div>
<!--.carousel-inner-->
<a data-slide="prev" href="#Folletos" class="left carousel-control">‹</a>
<a data-slide="next" href="#Folletos" class="right carousel-control">›</a>
</div>
<!--.Carousel-->
the javascript
$(document).ready(function () {
$('#Carousel').carousel('pause');
$('#Carousel2').carousel('pause');
$("div.item:first").addClass("active");
});
and the methods to bind the repeater
protected void Page_Load(object sender, EventArgs e)
{
BindSlider1(5);
BindSlider2(1);
}
protected void BindSlider1(int Ubicacion)
{
using (SqlConnection con = Conexion.Conecta())
{
using (SqlCommand cmd = new SqlCommand("SelGacetaUbicacion", con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("#UBICACION", SqlDbType.Int).Value = Ubicacion;
con.Open();
Slider1.DataSource = cmd.ExecuteReader();
Slider1.DataBind();
}
}
}
protected void BindSlider2(int Ubicacion)
{
using (SqlConnection con = Conexion.Conecta())
{
using (SqlCommand cmd = new SqlCommand("SelGacetaUbicacion", con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("#UBICACION", SqlDbType.Int).Value = Ubicacion;
con.Open();
Slider2.DataSource = cmd.ExecuteReader();
Slider2.DataBind();
}
}
}
I tried your code, and found this issues:
1- Review how to build the carousel markup depending on which version of bootstrap you are using. I tried with Bootstrap v3.1.0 and had to change parts of your markup. Refer to documentation or this sample.
For instance, <div class="item"> should be placed inside your repeater, and should have a <div class="container"> immediatly inside of it.
2- You are not initializing correctly both carousels from jquery, do something like this to correct it:
$("#Carousel div.item:first").addClass("active");
$("#Carousel2 div.item:first").addClass("active");

Categories