Category >
ASP.NET
|| Published on :
Tuesday, January 8, 2019 || Views:
7568
||
ASP.NET Source Code Get GridView CheckBox Selected Rows jQuery
Introduction
Here Pawan Kumar will explain how to ASP.NET : Source Code to Get GridView CheckBox Selected Rows jQuery
Description
In previous post I have explained
Allow only AlphaNumeric ( Alphabets and Numbers) characters and space only in TextBox using Javascript and jQuery(Example & Demo),
Export HTML Table to PDF in ASP.Net with C# using iTextSharp DLL Library,
GridView in ASP.Net using c# tutorial,
Disabled submit button after clicked using jQuery with example,
Simple HTML5 Example (Canvas) with Example Source Code,
Create or Generate QR Code in ASP.Net using C#, and many more articles.
Now I will explain How to ASP.NET : Source Code to ASP.NET : Source Code to Get GridView CheckBox Selected Rows jQuery
So follow the steps to learn ASP.NET : Source Code to ASP.NET : Source Code to Get GridView CheckBox Selected Rows jQuery
ASPX Source Code:- File name CS.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="_Default" %>
<!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>ASP.NET : Source Code to Get GridView CheckBox Selected Rows jQuery</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
border-collapse: collapse;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow"
BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkRow" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CarId" HeaderText="Car Id" ItemStyle-Width="80">
<ItemStyle Width="80px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="ModelName" HeaderText="Model Name" ItemStyle-Width="120">
<ItemStyle Width="120px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="MakeYear" HeaderText="Make Year" ItemStyle-Width="120">
<ItemStyle Width="120px"></ItemStyle>
</asp:BoundField>
</Columns>
<FooterStyle BackColor="Tan" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<SortedAscendingCellStyle BackColor="#FAFAE7" />
<SortedAscendingHeaderStyle BackColor="#DAC09E" />
<SortedDescendingCellStyle BackColor="#E1DB9C" />
<SortedDescendingHeaderStyle BackColor="#C2A47B" />
</asp:GridView>
<br />
<asp:Button ID="btnGetRec" Text="Get Selected Record" runat="server" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//Assign Click event to Button.
$("[id*=btnGetRec]").click(function () {
var message = "CarId ModelName MakeYear\n";
//Loop through all checked CheckBoxes in GridView.
$("[id*=GridView] input[type=checkbox]:checked").each(function () {
var row = $(this).closest("tr")[0];
message += row.cells[1].innerHTML;
message += " " + row.cells[2].innerHTML;
message += " " + row.cells[3].innerHTML;
message += "\n";
});
//Display selected Row data in Alert Box.
alert(message);
return false;
});
});
</script>
</form>
</body>
</html>
Code Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("CarId"), new DataColumn("ModelName"), new DataColumn("MakeYear") });
dt.Rows.Add(101, "Mercedes-Benz A-Class", "2018");
dt.Rows.Add(102, "Mercedes-Benz GLS", "2019");
dt.Rows.Add(103, "Mercedes-Benz S-Class", "2017");
dt.Rows.Add(104, "Mercedes-Benz G-Class r", "2016");
dt.Rows.Add(105, "Mercedes-Benz S-Coupe", "2018");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
Conclusion:
So, In this tutorial we have learned, ASP.NET : Source Code to ASP.NET : Source Code to Get GridView CheckBox Selected Rows jQuery