ASP.NET : Source Code to ASP.NET : Source Code to Get GridView CheckBox Selected Rows jQuery

Category > ASP.NET || Published on : Tuesday, January 8, 2019 || Views: 7520 || 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