Dot.Net Solution: jQuery with ASP.NET

JQuery is a light weight JavaScript library which that simplifies the way of HTML DOM traversing and manipulation, event handling, client side animations, etc. One of the greatest features of jQuery is, it supports an efficient way to implement AJAX applications because of its light weight nature. A few of its characteristics are light-weight, cross-browser compatibility and simplicity. The jQuery code we write is compatible with all the browsers and hence it prevents the need to write separate client side code for different browsers.

It provides “Write less but do more” concept.

Ex.

To select a HTML element in javascript,

document.getElementById('txtName');

The above equivalent in jQuery will be,

$('#txtName');

Sample Program: Hello World!

Display “Hello World” using jQuery.

1. Create a Website File>New>WebSite>Choose ‘ASP.NET 3.5 website’ from the templates>Choose Location and Give name to your website.

2. Now drag and drop the jquery-1.1.1.js file from the Solution Explorer’s >Script Folder on to your page to create a reference as shown below.

3. Now, add a Button control to your page.

4. Now, in .aspx file add this block of code to tell your browser to perform some task when page is loaded.

$(document).ready(function() {

// add code here

});

</script>

5. Now, Add your Code in this block to Display “Hello World !” using alert. Following are the codes:

$(document).ready(function () {

$("#Button1").click(function () {

alert("Hello world!");

});

</script>

6. Run the Website and Click on Button, you will see the following window:

Creating another Sample in ASP.NET using jQuery:

Here I have another example of jQuery with ASP.NET which will show some advance concept of jQuery.

Here, in this example I have used a GridView and inserted a CheckBox at the initial of every row and also I have added a CheckBox in Header of the GridView to make the GridView enable to Select or Deselect the all the CheckBoxes of the GridView at a time.

Start with Creating a GUI: Create a GUI as Follows.

Bind the Columns of the table using TemplateField. Here I named the page “Default.aspx”

Following is the Complete JavaScript code to make it functional to Select/Deselect all the CheckBoxes

//this function will tell browser to do something as soon as page is loaded

$(document).ready(function () {

//$("#<%=GridViewShowRecords.ClientID%> will get ther reference og GridView

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").click(CheckUncheckAllCheckBoxAsNeeded);

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").click(

function () {

//.is() method is used to find the state of the current checkbox, by querying its checked property.

if ($(this).is(':checked'))

//setting the Checked Status of CheckBox to True

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', true);

else

//setting the Checked Status of CheckBox to False

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', false);

});

function CheckUncheckAllCheckBoxAsNeeded()

{

//this will count and store the no. of CheckBoes with id='chkEmployee'

var totalCheckboxes = $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").size();

var checkedCheckboxes = $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox:checked").size();

if (totalCheckboxes == checkedCheckboxes)

{

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").attr('checked', true);

}

else

{

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").attr('checked', false);

}

</script>

Don’t forget to add the reference.( drag and drop the jquery-1.1.1.js file from the Solution Explorer’s >Script Folder on to your page to create a reference ).

Code for Default.aspx file

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowRecords.aspx.cs" Inherits="ShowRecords"

Debug="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>List of All Records</title>

<%--This will add a reference for using jQuery--%>

//this function will tell browser to do something as soon as page is loaded

$(document).ready(function () {

//$("#<%=GridViewShowRecords.ClientID%> will get ther reference og GridView

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").click(CheckUncheckAllCheckBoxAsNeeded);

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").click(

function () {

//.is() method is used to find the state of the current checkbox, by querying its checked property.

if ($(this).is(':checked'))

//setting the Checked Status of CheckBox to True

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', true);

else

//setting the Checked Status of CheckBox to False

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', false);

});

function CheckUncheckAllCheckBoxAsNeeded()

{

//this will count and store the no. of CheckBoes with id='chkEmployee'

var totalCheckboxes = $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox").size();

var checkedCheckboxes = $("#<%=GridViewShowRecords.ClientID%> input[id*='chkEmployee']:checkbox:checked").size();

if (totalCheckboxes == checkedCheckboxes)

{

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").attr('checked', true);

}

else

{

$("#<%=GridViewShowRecords.ClientID%> input[id*='chkAll']:checkbox").attr('checked', false);

}

</script>

</head>

<body>

<tr>

<td>

<asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Georgia" Text="Check all CheckBoxes in GridView using jQuery"></asp:Label>

</td>

</tr>

<tr>

<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Georgia" ForeColor="White"

Text="List of All Records"></asp:Label>

</td>

</tr>

<tr>

<asp:GridView ID="GridViewShowRecords" runat="server" BackColor="White" BorderColor="#DEDFDE"

BorderStyle="None" BorderWidth="1px" CellPadding="4" EnableModelValidation="True"

ForeColor="Black" GridLines="Vertical" AutoGenerateColumns="false">

<asp:TemplateField>

<asp:CheckBox runat="server" ID="chkAll" />

</HeaderTemplate>

<asp:CheckBox runat="server" ID="chkEmployee" />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

ID</HeaderTemplate>

<asp:Label ID="lblUserID" runat="server" Text='<%#Bind("UserId") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtUserID" Text='<%#Bind("UserId") %>' runat="server" Width="20px"

Enabled="False"></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

FirstName</HeaderTemplate>

<asp:Label ID="lblFirstName" runat="server" Text='<%#Bind("FName") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtFirstName" Text='<%#Bind("FName") %>' runat="server" Width="80px"></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

LastName</HeaderTemplate>

<asp:Label ID="lblLastName" runat="server" Text='<%#Bind("LName") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtLastName" Text='<%#Bind("LName") %>' runat="server" Width="80px"></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

FatherName</HeaderTemplate>

<asp:Label ID="lblFatherName" runat="server" Text='<%#Bind("FatherName") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtFatherName" Text='<%#Bind("FatherName") %>' runat="server" Width="100px"></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

Age</HeaderTemplate>

<asp:Label ID="lblAge" runat="server" Text='<%#Bind("Age") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtAge" Text='<%#Bind("Age") %>' runat="server" Width="30px"></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

Address</HeaderTemplate>

<asp:Label ID="lblAddress" runat="server" Text='<%#Bind("Address") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtAddress" Text='<%#Bind("Address") %>' runat="server" Width="150px"></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

Phone</HeaderTemplate>

<asp:Label ID="lblPhone" runat="server" Text='<%#Bind("Phone") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtPhone" Text='<%#Bind("Phone") %>' runat="server" Width="80px"></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

Email</HeaderTemplate>

<asp:Label ID="lblEmail" runat="server" Text='<%#Bind("Email") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtEmail" Text='<%#Bind("Email") %>' runat="server" Width="120px"></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</td>

</tr>

<tr>

<td>

 </td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Don’t have much more to code on Default.aspx.cs file. Simple you to do is Create your Connection to SQL SERVER and Bind the DataSource to GridView.

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.IO;

public partial class ShowRecords : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

//Binding the GridView

BindGridViewShowRecords();

}

private void BindGridViewShowRecords()

{

//Creating Connection and Binding the GridView

connection.con = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString);

connection.con.Open();

string query = "select * from tblUserInfo";

connection.da = new System.Data.SqlClient.SqlDataAdapter(query, connection.con);

connection.bui = new SqlCommandBuilder(connection.da);

connection.dt = new System.Data.DataTable();

connection.da.Fill(connection.dt);

GridViewShowRecords.DataSource = connection.dt;

GridViewShowRecords.DataBind();

}

If you will click on Header CheckBox, it will select/deselect all checkboxes of the GridView.

Dot.Net Solution

Pages

04 April 2014

jQuery with ASP.NET

Sample Program: Hello World!

Creating another Sample in ASP.NET using jQuery:

Code for Default.aspx file

No comments:

Post a Comment