Archive
How to implement CAPTCHA image validation in ASP.Net/C# OR CAPTCHA image validator Sample in ASP.Net/C#
DOWNLOAD SOURCE CODE FOR CAPTCHA IMAGE VALIDATION IN ASP.NET
What is CAPTCHA and why we are using CAPTCHA
A CAPTCHA is a type of challenge-response test used in computing as an attempt to ensure that the response is generated by a human being. The process usually involves a computer asking a user to complete a simple test which the computer is able to grade. These tests are designed to be easy for a computer to generate but difficult for a computer to solve, but again easy for a human. If a correct solution is received, it can be presumed to have been entered by a human. A common type of CAPTCHA requires the user to type letters and/or digits from a distorted image that appears on the screen. Such tests are commonly used to prevent unwanted internet bots from accessing websites, since a normal human can easily read a CAPTCHA, while the bot cannot process the image letters and therefore, cannot answer properly, or at all.
How to implement CAPTCHA validation/CAPTCHA verification in ASP.Net/C#
CAPTCHA image can be generated using ASP.Net codes and we can validate the code that user enter with the code in the CAPTCHA image. Here we are going to do a sample application that demonstrates how to create a CAPTCHA image using C# codes and how we can validate the user inputs with the CPATCH code. We are having two aspx pages and one class .cs file in the sample application.
A very simple application sample for CPTCHA validation
In the page load, first of all we are creating a 6 digit random number and stored in the session. By using this random number we creates a image suing System.Drawing package by giving some width,height,font family and alignment of the numbers, So the user can able to view the codes in the CAPTCHA image but it is difficult to read using system.
DOWNLOAD SOURCE CODE FOR CAPTCHA IMAGE VALIDATION IN ASP.NET
Below is the Class that we used for creating a CAPTCHA image with random number
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Drawing.Text;
namespace CaptchaImage
{
/// <summary>
/// Summary description for CaptchaImage.
/// </summary>
public class CaptchaImage
{
// Public properties (all read-only).
public string Text
{
get { return this.text; }
}
public Bitmap Image
{
get { return this.image; }
}
public int Width
{
get { return this.width; }
}
public int Height
{
get { return this.height; }
}
// Internal properties.
private string text;
private int width;
private int height;
private string familyName;
private Bitmap image;
// For generating random numbers.
private Random random = new Random();
// ====================================================================
// Initializes a new instance of the CaptchaImage class using the
// specified text, width and height.
// ====================================================================
public CaptchaImage(string s, int width, int height)
{
this.text = s;
this.SetDimensions(width, height);
this.GenerateImage();
}
// ====================================================================
// Initializes a new instance of the CaptchaImage class using the
// specified text, width, height and font family.
// ====================================================================
public CaptchaImage(string s, int width, int height, string familyName)
{
this.text = s;
this.SetDimensions(width, height);
this.SetFamilyName(familyName);
this.GenerateImage();
}
// ====================================================================
// This member overrides Object.Finalize.
// ====================================================================
~CaptchaImage()
{
Dispose(false);
}
// ====================================================================
// Releases all resources used by this object.
// ====================================================================
public void Dispose()
{
GC.SuppressFinalize(this);
this.Dispose(true);
}
// ====================================================================
// Custom Dispose method to clean up unmanaged resources.
// ====================================================================
protected virtual void Dispose(bool disposing)
{
if (disposing)
// Dispose of the bitmap.
this.image.Dispose();
}
// ====================================================================
// Sets the image width and height.
// ====================================================================
private void SetDimensions(int width, int height)
{
// Check the width and height.
if (width <= 0)
throw new ArgumentOutOfRangeException("width", width, "Argument out of range, must be greater than zero.");
if (height <= 0)
throw new ArgumentOutOfRangeException("height", height, "Argument out of range, must be greater than zero.");
this.width = width;
this.height = height;
}
// ====================================================================
// Sets the font used for the image text.
// ====================================================================
private void SetFamilyName(string familyName)
{
// If the named font is not installed, default to a system font.
try
{
Font font = new Font(this.familyName, 12F);
this.familyName = familyName;
font.Dispose();
}
catch (Exception ex)
{
this.familyName = System.Drawing.FontFamily.GenericSerif.Name;
}
}
// ====================================================================
// Creates the bitmap image.
// ====================================================================
private void GenerateImage()
{
// Create a new 32-bit bitmap image.
Bitmap bitmap = new Bitmap(this.width, this.height, PixelFormat.Format32bppArgb);
// Create a graphics object for drawing.
Graphics g = Graphics.FromImage(bitmap);
g.SmoothingMode = SmoothingMode.AntiAlias;
Rectangle rect = new Rectangle(0, 0, this.width, this.height);
// Fill in the background.
HatchBrush hatchBrush = new HatchBrush(HatchStyle.SmallConfetti, Color.LightGray, Color.White);
g.FillRectangle(hatchBrush, rect);
// Set up the text font.
SizeF size;
float fontSize = rect.Height + 1;
Font font;
// Adjust the font size until the text fits within the image.
do
{
fontSize--;
font = new Font(this.familyName, fontSize, FontStyle.Bold);
size = g.MeasureString(this.text, font);
} while (size.Width > rect.Width);
// Set up the text format.
StringFormat format = new StringFormat();
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Center;
// Create a path using the text and warp it randomly.
GraphicsPath path = new GraphicsPath();
path.AddString(this.text, font.FontFamily, (int) font.Style, font.Size, rect, format);
float v = 4F;
PointF[] points =
{
new PointF(this.random.Next(rect.Width) / v, this.random.Next(rect.Height) / v),
new PointF(rect.Width - this.random.Next(rect.Width) / v, this.random.Next(rect.Height) / v),
new PointF(this.random.Next(rect.Width) / v, rect.Height - this.random.Next(rect.Height) / v),
new PointF(rect.Width - this.random.Next(rect.Width) / v, rect.Height - this.random.Next(rect.Height) / v)
};
Matrix matrix = new Matrix();
matrix.Translate(0F, 0F);
path.Warp(points, rect, matrix, WarpMode.Perspective, 0F);
// Draw the text.
hatchBrush = new HatchBrush(HatchStyle.LargeConfetti, Color.LightGray, Color.DarkGray);
g.FillPath(hatchBrush, path);
// Add some random noise.
int m = Math.Max(rect.Width, rect.Height);
for (int i = 0; i < (int) (rect.Width * rect.Height / 30F); i++)
{
int x = this.random.Next(rect.Width);
int y = this.random.Next(rect.Height);
int w = this.random.Next(m / 50);
int h = this.random.Next(m / 50);
g.FillEllipse(hatchBrush, x, y, w, h);
}
// Clean up.
font.Dispose();
hatchBrush.Dispose();
g.Dispose();
// Set the image.
this.image = bitmap;
}
}
}
DOWNLOAD SOURCE CODE FOR CAPTCHA IMAGE VALIDATION IN ASP.NET
How to merge two data tables in ASP.Net/C# OR Merge 2 DataTables and store in a new one in ASP.Net/C#
Merge multiple data-tables data into a another data-table using C#/ASP.Net
Here we are going to demonstrate a sample application which shows merge two data tables in ASP.Net. In this sample we are having two data tables with some data and merge data of each tables data. We binds first data table to a data grid second one to another grid and third data grid binds with merged data table.

Merge data tables in C#/ASP.Net
ASPX Page for Example of merge two datatables in C#/ASP.Net
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MergeDataTable.aspx.cs" Inherits="ExperimentLab.MergeDataTable" %> <!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 runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> First DataTable <asp:GridView ID="gdDataTableOne" runat="server" /><br /> Second DataTable <asp:GridView ID="gdDataTableTwo" runat="server" /><br /> Merged DattaTable <asp:GridView ID="gdDataTableMergedData" runat="server" /><br /> </div> </form> </body> </html> -*******
CODE BEHIND Page for Merge datatable in C#/ASP.Net
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace ExperimentLab
{
public partial class MergeDataTable : System.Web.UI.Page
{
DataTable dtOne = new DataTable();
DataTable dtTwo = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
fillDataTableOne();
fillDataTableTwo();
mergeDataTables();
}
private void mergeDataTables()
{
dtOne.Merge(dtTwo, false);
gdDataTableMergedData.DataSource = dtOne;
gdDataTableMergedData.DataBind();
}
private void fillDataTableOne()
{
dtOne.Columns.Add("EmpID", typeof(Int32));
dtOne.Columns.Add("EmployeeName", typeof(string));
dtOne.Columns.Add("Department", typeof(string));
dtOne.Columns.Add("City", typeof(string));
DataRow dtOnerow = dtOne.NewRow(); // Create New Row
dtOnerow["EmpID"] = 1; //Bind Data to Columns
dtOnerow["EmployeeName"] = "Ram";
dtOnerow["Department"] = "Admin";
dtOnerow["City"] = "Kochi";
dtOne.Rows.Add(dtOnerow);
dtOnerow = dtOne.NewRow(); // Create New Row
dtOnerow["EmpID"] = 2; //Bind Data to Columns
dtOnerow["EmployeeName"] = "Mahesh";
dtOnerow["Department"] = "Finance";
dtOnerow["City"] = "Delhi";
dtOne.Rows.Add(dtOnerow);
dtOnerow = dtOne.NewRow(); // Create New Row
dtOnerow["EmpID"] = 3; //Bind Data to Columns
dtOnerow["EmployeeName"] = "Raj";
dtOnerow["Department"] = "Admin";
dtOnerow["City"] = "Kolkata";
dtOne.Rows.Add(dtOnerow);
dtOnerow = dtOne.NewRow(); // Create New Row
dtOnerow["EmpID"] = 4; //Bind Data to Columns
dtOnerow["EmployeeName"] = "Virbal";
dtOnerow["Department"] = "HR";
dtOnerow["City"] = "Mumbai";
dtOne.Rows.Add(dtOnerow);
gdDataTableOne.DataSource = dtOne;
gdDataTableOne.DataBind();
}
private void fillDataTableTwo()
{
dtTwo.Columns.Add("EmpID", typeof(Int32));
dtTwo.Columns.Add("EmployeeName", typeof(string));
dtTwo.Columns.Add("Department", typeof(string));
dtTwo.Columns.Add("City", typeof(string));
DataRow dtTworow = dtTwo.NewRow(); // Create New Row
dtTworow["EmpID"] = 5; //Bind Data to Columns
dtTworow["EmployeeName"] = "John";
dtTworow["Department"] = "Delivery";
dtTworow["City"] = "Goa";
dtTwo.Rows.Add(dtTworow);
dtTworow = dtTwo.NewRow(); // Create New Row
dtTworow["EmpID"] = 6; //Bind Data to Columns
dtTworow["EmployeeName"] = "Jacob";
dtTworow["Department"] = "Finance";
dtTworow["City"] = "Kolkata";
dtTwo.Rows.Add(dtTworow);
dtTworow = dtTwo.NewRow(); // Create New Row
dtTworow["EmpID"] = 7; //Bind Data to Columns
dtTworow["EmployeeName"] = "Srini";
dtTworow["Department"] = "HR";
dtTworow["City"] = "Jaipur";
dtTwo.Rows.Add(dtTworow);
dtTworow = dtTwo.NewRow(); // Create New Row
dtTworow["EmpID"] = 8; //Bind Data to Columns
dtTworow["EmployeeName"] = "Gopal";
dtTworow["Department"] = "InfraStructure";
dtTworow["City"] = "Chennai";
dtTwo.Rows.Add(dtTworow);
gdDataTableTwo.DataSource = dtTwo;
gdDataTableTwo.DataBind();
}
}
}
How to implement Password validation in ASP.Net/C# OR Implement Password strength using Jquery in ASP.Net
DOWNLOAD SOURCE CODE FOR PASSWORD STRENGTH CHECKER
How to show Password Strength image to user in ASP.Net
Register/change password pages on most of the application showing password strength information to user while entering password in the textbox. It allows to user to enter a strong password for register the pages. We can implement Password Strength Checker in different methods in ASP.Net application. Its better to do it in the client side itself so that user doesn’t feels post back in the page.
Implement Password Strength Checker using Jquery
Here we are going to demonstrate a sample application to implement Password Strength Checker using Jquery. The application shows the status of entered password by each alphabet changes in the textbox such as Week, Good, Strong etc..

ASPX/HTML Page for Password Strength Checker
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Validation Plugin Password Extension demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jquery.validate.password.css" />
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/jquery.validate.js"></script>
<script type="text/javascript" src="../jquery.validate.password.js"></script>
<script id="demo" type="text/javascript">
$(document).ready(function () {
$("#register").validate();
$("#password").valid();
});
</script>
<style>
label, input
{
float: left;
}
input
{
margin-left: 1em;
}
label.error
{
display: none !important;
}
.password-meter
{
float: left;
}
</style>
</head>
<body>
<form id="register">
<div>
Password Strength Checker Demo Using JQuery..
powered by <a href="http://tuvian.con">
tuvian</a>
</div>
<br />
<br />
<label for="password">
Password:</label>
<input class="password" name="password" id="password" />
<div class="password-meter">
<div class="password-meter-message">
</div>
<div class="password-meter-bg">
<div class="password-meter-bar">
</div>
</div>
</div>
</form>
</body>
</html>
DOWNLOAD SOURCE CODE FOR PASSWORD STRENGTH CHECKER
How to create a drag able and resizable div in ASP.Net/C# OR How to make a div Dragable and Resizable using Jquery in ASP.Net/C#
DOWNLOAD SOURCE CODE FOR DAG ABLE AND RE-SIZABLE DIV
Resize and drag a div in ASPX page/HTML Page
Here we are going to demonstrate making a div that can be drag and resize by users. We are achieving this drag and resize of div functionality using Jquery files. We already posted some article related with Jquery and Javascript. Here we are again demonstrating a detailed post regarding Draggable and Resizable div using Jquery files.

Drag able and Resizable Div using Jquery in HTML/ASPX Page
For implementing drag and resize Div, we need to download following jquery and css files and included in the ASPX/HTML page.
1. jquery.min.js - Download from here
2. jquery-ui.min.js - Download from here
3. jquery-ui.css - Download from here
After downloading above files we need to create a HTML/ASPX Page and include above files as mentioned below.
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery-ui.min.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery-ui.css" type="text/css" media="all" />
HTML/ASPX Page for creating drag able and re sizable div
<!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>
<title>Untitled Page</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery-ui.css"
type="text/css" media="all" />
<style type="text/css">
#resizediv
{
width: 150px;
height: 150px;
padding: 0.5em;
background: #EB5E00;
color: #fff;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#resizediv").resizable();
$("#resizediv").draggable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="resizediv">
Drag me ... or Resize me....<br />
This is a Div that can be Drag and Resize by you.. .
</div>
</form>
</body>
</html>
------
DOWNLOAD SOURCE CODE FOR DAG ABLE AND RE-SIZABLE DIV
How to implement BalloonPopupExtender in ASP.Net/C# OR Ballon Popup Extender Sample in ASP.Net/C#
DOWNLOAD SOURCE CODE FOR BALLOON POPUP EXTENDER EXAMPLE
How to display good POPUP Window in ASP.Net using Ajax?
Most of the ASP.Net application requires showing some POPUP window to user for showing some messages or information. Also in order to create a ToolTips in ASP.Net/C# web application it’s very difficult to achieve for good looking ToolTip. In the newest Ajax Control Toolkit includes an awesome good looking and more functional popup extender called Balloon POPUP Extender. It’s a very light weight and having good look and feel popup, also we can apply custom styles for POPUP. Balloon POPUP Extender can use as ToolTips in ASP.Net application.
Download and Register New AjaxControl Toolkit
For implementing Balloon POPUP Extender in ASP.Net/C# application, we need to download newest Ajax Control Toolkit and register to the Project references. You can download new Ajax Control Toolkit from this link. Right click the ‘References’ under the ASP.Net project from Visual Studio and browse the dll and press OK.
In the ASPX page we need to register this ajax toolkit dll like below mentioned code.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
How to implement Balloon POPUP Extender in ASP.Net/C# Application?
After adding and register the Ajax Control Toolkit as mentioned above, we can start to implement the Balloon POPUP Extender. We can implement Balloon POPUP Extender while clicking/on mouse over/on focus of any server controls in ASP.Net. Below mentioned is the codes for implementing the same.
<ajax:BalloonPopupExtender ID="PopupControlExtender2" runat="server" TargetControlID="txtUserName" BalloonPopupControlID="pnlBalloon" Position="BottomRight" BalloonStyle="Cloud" BalloonSize="Medium" UseShadow="true" ScrollBars="Auto" DisplayOnMouseOver="true" DisplayOnFocus="false" DisplayOnClick="true" />



There are some properties are available for Balloon POPUP Extender control and we can adjust the size,color,style and controls of POPUP using these properties. Below are the main properties of Balloon POPUP Extender
TargetControlID – The ID of the control to attach to.
BalloonPopupControlID – The ID of the control to display.
Position – Optional setting specifying where the popup should be positioned relative to the target control. (TopRight, TopLeft, BottomRight, BottomLeft, Auto) Default value is Auto.
OffsetX/OffsetY – The number of pixels to offset the Popup from its default position, as specified by Position. Default value is 0.
BalloonStyle – Optional setting specifying the theme of balloon popup. (Cloud, Rectangle, Custom). Default value is Rectangle.
BalloonSize – Optional setting specifying the size of balloon popup. (Small, Medium and Large). Default value is Small.
CustomCssUrl – This is required if user choose BalloonStyle to Custom. This specifies the url of custom css which will display custom theme.
CustomClassName – This is required if user choose BalloonStyle to Custom. This specifies the name of the css class for the custom theme.
UseShadow – Optional setting specifying whether to display shadow of balloon popup or not.
ScrollBars – Optional setting specifying whether to display scrollbar if contents are overflowing. This property contains 5 options – None, Horizontal, Vertical, Both and Auto. Default value is Auto.
DisplayOnMouseOver – Optional setting specifying whether to display balloon popup on the client onMouseOver event. Default value is false.
DisplayOnFocus – Optional setting specifying whether to display balloon popup on the client onFocus event. Default value is false.
DisplayOnClick – Optional setting specifying whether to display balloon popup on the client onClick event. Default value is true.
Animations – Generic animations for the PopupControlExtender.
OnShow – The OnShow animation will be played each time the popup is displayed. The popup will be positioned correctly but hidden. The animation can use <HideAction Visible=”true” /> to display the popup along with any other visual effects.
OnHide – The OnHide animation will be played each time the popup is hidden.
A very simple example for Balloon POPUP Extender in ASP.Net/C# using Ajax
Here we are demonstrating a very simple for implementing Ajax Balloon POPUP Extender with full downloadable source code.
ASPX Page
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="BaloonPopup._Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajax" %>
<asp:Content ID="HeaderContent" runat="server"
ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server"
ContentPlaceHolderID="MainContent">
<h2>
Welcome to Baloon Popup Extender Sample
</h2>
<p>
For Website/WebApplication creation <a href="http://www.tuvian.com"
title="aps.net">www.tuvian.com</a>.
</p>
<div>
<ajax:ToolkitScriptManager ID="Scriptmanager1" runat="server">
</ajax:ToolkitScriptManager>
<div style="border: 1px solid gray; padding: 10px; margin: 10px;">
<h3>
Cloud Style Baloon Popup Example</h3>
<br />
<br />
<ajax:BalloonPopupExtender ID="PopupControlExtender2" runat="server"
TargetControlID="txtUserName"
BalloonPopupControlID="pnlBalloon" Position="BottomRight" BalloonStyle="Cloud"
BalloonSize="Medium" UseShadow="true" ScrollBars="Auto" DisplayOnMouseOver="true"
DisplayOnFocus="false" DisplayOnClick="true" />
UserName :
<asp:TextBox runat="server" ID="txtUserName" />
<asp:Panel runat="server" ID="pnlBalloon">
This is the Cloud Style Ballon Popup</asp:Panel>
</div>
<div style="border: 1px solid gray; padding: 10px; margin: 10px;">
<h3>
Rectangular Baloon Popup Example</h3>
<br />
<br />
<ajax:BalloonPopupExtender ID="Balloonpopupextender1" runat="server"
TargetControlID="lblShow"
BalloonPopupControlID="pnlRectangularBallon" Position="TopRight"
BalloonStyle="Rectangle"
BalloonSize="Medium" UseShadow="true" ScrollBars="Auto"
DisplayOnMouseOver="false"
DisplayOnFocus="false" DisplayOnClick="true" />
<asp:Label runat="server" ID="lblShow"
Text="Click Here to Show the Rectangular Balloon Popup" />
<asp:Panel runat="server" ID="pnlRectangularBallon">
This is the rectangular ballon popup</asp:Panel>
</div>
<div style="border: 1px solid gray; padding: 10px; margin: 10px;">
<h3>
Custom Style Baloon Popup Example</h3>
<br />
<br />
<ajax:BalloonPopupExtender ID="Balloonpopupextender2" runat="server"
TargetControlID="txtCustomBallonPopup"
BalloonPopupControlID="pnlCustomBallon" Position="BottomRight"
BalloonStyle="Custom"
BalloonSize="Medium" UseShadow="true" ScrollBars="Auto"
DisplayOnMouseOver="true"
CustomCssUrl="Styles/BalloonPopupOvalStyle.css"
CustomClassName="oval" DisplayOnFocus="false"
DisplayOnClick="true" />
<asp:TextBox runat="server" ID="txtCustomBallonPopup" />
<asp:Panel runat="server" ID="pnlCustomBallon">
This is the Custom Style ballon popup</asp:Panel>
</div>
</div>
</asp:Content>
--------------
DOWNLOAD SOURCE CODE FOR BALLOON POPUP EXTENDER EXAMPLE
How to Create a Data Table Dynamically with sample data and Bind to Grid/Create datatable with sample data.
How to create a datatable with sample data
We are going to demonstrate how to create a sample datatable dynamically in ASP.Net. Here we are creating a ASPx page with a grid view. In the page load of the ASPx page will call a bind method which creating a datatable dynamically and bind the datatable with datagrid. In BindGridviewData function create data for an employee and binding employee data to the employee grid.
ASPxPage
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicCreateDataTable.aspx.cs" Inherits="ExperimentLab.DynamicCreateDataTable" %> <!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 runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="gdEmployee" runat="server"> </asp:GridView> </div> </form> </body> </html>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
BindGridviewData();
}
//Creating datatable dynamically and bind data to a grid
protected void BindGridviewData()
{
DataTable dt = new DataTable();
//Create datatable Columns dynamically
dt.Columns.Add("EmployeeID", typeof(Int32));
dt.Columns.Add("EmployeeName", typeof(string));
dt.Columns.Add("Department", typeof(string));
dt.Columns.Add("City", typeof(string));
//Create data table row dynamically add
DataRow dtrow = dt.NewRow(); // Create New Row
//Assign data to datarow dynamically
dtrow["EmployeeID"] = 1; //Bind Data to Columns
dtrow["EmployeeName"] = "Ramraj";
dtrow["Department"] = "Admin";
dtrow["City"] = "Calicut";
dt.Rows.Add(dtrow);
dtrow = dt.NewRow(); // Create New Row
//Assign data to datarow dynamically
dtrow["EmployeeID"] = 2; //Bind Data to Columns
dtrow["EmployeeName"] = "Malhothra";
dtrow["Department"] = "HR";
dtrow["City"] = "Mumbai";
dt.Rows.Add(dtrow);
dtrow = dt.NewRow(); // Create New Row
//Assign data to datarow dynamically
dtrow["EmployeeID"] = 3; //Bind Data to Columns
dtrow["EmployeeName"] = "Sinan Hafis";
dtrow["Department"] = "Admin";
dtrow["City"] = "Delhi";
dt.Rows.Add(dtrow);
dtrow = dt.NewRow(); // Create New Row
//Assign data to datarow dynamically
dtrow["EmployeeID"] = 4; //Bind Data to Columns
dtrow["EmployeeName"] = "Wazim Jafar";
dtrow["Department"] = "Finance";
dtrow["City"] = "Goa";
dt.Rows.Add(dtrow);
gdEmployee.DataSource = dt;
gdEmployee.DataBind();
}
RESULT

Dynamic datatable in ASP.Net
How to Create and use Table-Valued Parameter in C# and T-SQL/ How to pass table to stored procedures in SQL
What is Table – Valued Parameter in SQL Server 2008?
Table-valued parameters provide an easy way to marshal multiple rows of data from a client application to SQL Server without requiring multiple round trips or special server-side logic for processing the data. You can use table-valued parameters to encapsulate rows of data in a client application and send the data to the server in a single parameterized command. The incoming data rows are stored in a table variable that can then be operated on by using Transact-SQL.
What we are going to do with Table – Valued Parameter?
We are going to demonstrate a very simple example for using Table – Valued parameter. In this sample project we will insert bulk amount of data into the table by passing a bulk data using datatable in C# to SQL stored procedure.
Create a Table for insert data using Table – Valued Parameter
Here we are having a table named Officer and having three fields ID,Name and Salary. We are going to fill the table with bulk data.
CREATE TABLE Officer( ID INT PRIMARY KEY IDENTITY(1,1), NAME VARCHAR(50), SALARY DECIMAL(18, 0))
Stored Procedure for insert data by accepting Table Valued Parameter
Now we are going to create a Stored Procedure that accepting a table type as parameter and insert values in this type into the table.
CREATE PROCEDURE InsertOfficerDetails ( @OfficerData OfficerDetails readonly ) AS INSERT INTO Officer (Name, Salary) SELECT Name, Salary FROM @OfficerData;
C# code to call Stored Procedure to insert data in to the table using Table – Valued Parameter
We are creating a simple ASPX page with a single button. When we click this button we are calling above stored procedure by creating and passing some amount of sample data to the stored procedure as Table – Valued Parameter.
ASPX Page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CallSP.aspx.cs" Inherits="ExperimentLab.CallSP" %> <!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></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="btnCallSP" runat="server" Text="Call SP" OnClick="btnCallSP_Click" /> </div> </form> </body> </html>
Code Behind
protected void btnCallSP_Click(object sender, EventArgs e)
{
try
{
DataTable dt = new DataTable();
DataColumn dtCol = new DataColumn();
dtCol.ColumnName = "ID";
dt.Columns.Add(dtCol);
dtCol = new DataColumn();
dtCol.ColumnName = "Name";
dt.Columns.Add(dtCol);
dtCol = new DataColumn();
dtCol.ColumnName = "Salary";
dt.Columns.Add(dtCol);
for (int i = 0; i < 10; i++)
{
DataRow dr = dt.NewRow();
dr["Name"] = "Name " + i;
dr["Salary"] = 1000 + i;
dr["ID"] = i;
dt.Rows.Add(dr);
}
string connStr = ConfigurationManager.
AppSettings["LocalSqlServer"].ToString();
SqlConnection con = new SqlConnection(connStr);
using (var conn = new SqlConnection(connStr))
using (var cmd = conn.CreateCommand())
{
cmd.Connection = con;
con.Open();
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandText = "dbo.InsertOfficerDetails";
SqlParameter param = cmd.Parameters.AddWithValue("@OfficerData", dt);
cmd.ExecuteNonQuery();
}
}
catch (Exception a)
{
Response.Write(a.Message);
}
}
Web.Config
<appSettings> <add key="LocalSqlServer" value="Database=testDB;Server=Servername\SQLEXPRESS;User Id=userid;Password=password"/> </appSettings>
Hence we discussed about how to create and use Table valued parameters, how to create a store procedure with table type as parameter, how to pass table to stored procedure in C#/Asp.Net, how to insert multiple rows of data to a table with table valued parameter in SQL, how to insert bulk data to SQL table using Table Valued Parameter in SQL Server 2008 etc..
How to create asynchronous file up loader using ajax in ASP.Net
Ajax files uploader in ASP.Net/C# to upload files to Server as asynchronous
In most of the web applications, there might be have an option to upload files to server. If we are using ASP.Net file uplaoder option to upload files, will have postback after every server request. It may be very disturbance to the user. In order to avoid postback while uploading files into server in ASP.Net/C#, we can implement AJAX mechanism.
Include AjaxControlToolkit reference to the Project
First of all we need to refer ajax tool kit to our project. In order to do this, right click the project and add reference and select the folder that included the ajaxtoolkit file. Once we added, in the aspx page below line will be displayed
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
After that we can incuded ajax uploader into the ASPX page like this.
<ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadComplete"OnClientUploadError="uploadError" CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern"UploadingBackColor="#CCFFFF" ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" />
There are some special kind if events are available in the control like onUploadComplete, OnClineUploadError ..
OnClientUploadError – This property is used to execute the client side JavaScript function if file uploading failed.
OnClientUploadStarted – This property is used to execute the client side JavaScript function whenver file uploading start.
OnClientUploadComplete – This property is used to execute the client side JavaScript function after file successfully uploaded.
CompleteBackColor – This property is used to set fileupload control background after file upload complete its default value ‘Lime’.
ErrorBackColor – This property is used to set fileupload control background if file upload failed its default value ‘Red’.
UploadingBackColor – This property is the id of the control which is seen during upload file.
UploaderStyle – This property is used to set fileupload control appearance style either Modern orTraditional. By default its value “Traditional”.
ThrobberID – ID of control that is shown while the file is uploading.
ASPX PAGE
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
// This function will execute after file uploaded successfully
function uploadComplete() {
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File Uploaded Successfully";
}
// This function will execute if file upload fails
function uploadError() {
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File upload Failed.";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="scriptManager1" runat="server"/>
<div>
<ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadComplete"OnClientUploadError="uploadError"
CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern"UploadingBackColor="#CCFFFF"
ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" /><br />
<asp:Image ID="imgLoad" runat="server" ImageUrl="loading.gif" />
<br />
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
CODE BEHIND
using System;
using System.Web.UI;
using AjaxControlToolkit;
protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs e)
{
string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
fileUpload1.SaveAs(Server.MapPath("Files/") + filename);
}


Recent Comments