Stop page load (refresh) each time on GridView Button Click using jQuery in ASP.Net

lingers
 
on Aug 29, 2021 11:15 PM
Sample_140120.zip
1130 Views

i have adjusted my code according to the example you used,but still on button click the page loads.

[Solved] jQuery Error : Uncaught SyntaxError: Unexpected token ; in ASP.Net 

My code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src=" https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="ASPSnippets_Pager.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        GetCustomers(1);
    });
    $(document).on("click", '.Pager .page', function () {
        GetCustomers(parseInt($(this).attr('page')));
    });
    $(document).on('click', '.view', function () {
        var id = $(this).closest('tr').find('td').eq(0).html();
        // Setting hidden field.
        $('[id*=hfId]').val(id);
        $.ajax({
            type: "POST",
            url: "Material.aspx/GetCustomersDetails",
            data: '{empId: ' + id + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var xmlDoc = $.parseXML(response.d);
                var xml = $(xmlDoc);
                var job_material = xml.find("job_material");
                var id = $(job_material[0]).find("id").text();
                var boardname = $(job_material[0]).find("boardname").text();
                var materialgsm = $(job_material[0]).find("materialgsm").text();
                var materialcode = $(job_material[0]).find("materialcode").text();
                var materialwebwidth = $(job_material[0]).find("materialwebwidth").text();
                var costpersqmeter = $(job_material[0]).find("costpersqmeter").text();
                ShowPopup();
            }
        });
    });
    var i = 0;
    function GetCustomers(pageIndex) {
        $.ajax({
            type: "POST",
            url: "Material.aspx/GetCustomers",
            data: '{pageIndex: ' + pageIndex + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                $('[id$=gvDetails]').prepend($("<thead></thead>").append($('[id$=gvDetails]').find("tr:first"))).DataTable().destroy();
                var xmlDoc = $.parseXML(response.d);
                var xml = $(xmlDoc);
                var customers = xml.find("job_material");
                var row = $("[id$=gvDetails] tbody tr:last-child").eq(0).clone(true);
                $("[id$=gvDetails] tbody tr").not($("[id$=gvDetails] tbody tr:first-child")).remove();
                $.each(customers, function () {
                    $("td", row).eq(0).html($(this).find("id").text());
                    $("td", row).eq(1).html($(this).find("boardname").text());
                    $("td", row).eq(2).html($(this).find("materialgsm").text());
                    $("td", row).eq(3).html($(this).find("materialcode").text());
                    $("td", row).eq(4).html($(this).find("materialwebwidth").text());
                    $("td", row).eq(5).html($(this).find("costpersqmeter").text());

                    $("[id$=gvDetails]").append(row);
                    row = $("[id$=gvDetails] tbody tr:last-child").eq(0).clone(true);
                });
                $("[id$=gvDetails] tbody tr:first-child").remove();
                if (i != 0) {
                    $('[id$=gvDetails]').DataTable({
                        "paging": false,
                        "info": false
                    });
                } else {
                    $('[id$=gvDetails]')
                        .prepend($("<thead></thead>").append($('[id$=gvDetails]').find("tr:first")))
                        .DataTable({
                            "paging": false,
                            "info": false
                        });
                }
                i++;
                var pager = xml.find("Pager");
                $(".Pager").ASPSnippets_Pager({
                    ActiveCssClass: "current",
                    PagerCssClass: "pager",
                    PageIndex: parseInt(pager.find("PageIndex").text()),
                    PageSize: parseInt(pager.find("PageSize").text()),
                    RecordCount: parseInt(pager.find("RecordCount").text())
                });
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }

    function ShowPopup() {
        $('#label71').html('');
        $("#dialog").dialog({
            title: "VIEW  CYLINDER  DETAILS",
            width: 830,
            height: 500,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
        $("#dialog").parent().appendTo($("form:first"));
    };

    function ShowPopup1() {
        $('#label71').html('');
        $("#dialog1").dialog({
            title: "EDIT  CYLINDER  DETAILS",

            width: 830,
            height: 500,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });

        $("#dialog1").parent().appendTo($("form:first"));
    };
</script>

 

<asp:HiddenField ID="hfId" runat="server" />
<asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="False"
    BackColor="White" BorderColor="#CCCCCC" BorderStyle="None"
    Font-Names="Century Gothic" Font-Size="X-Small" DataKeyNames="id"
    Width="100%" Style="margin-bottom: 0px" CssClass="grid" BorderWidth="1px" CellPadding="3">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:HiddenField ID="id" runat="server" Value='<%#Eval("id") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="id" HeaderText="S/N"/>        
        <asp:BoundField DataField="boardname" HeaderText="Boardname" />
        <asp:BoundField DataField="materialgsm" HeaderText="GSM" />
        <asp:BoundField DataField="materialcode" HeaderText="Material Code" />
        <asp:BoundField DataField="materialwebwidth" HeaderText="Web Width" />
        <asp:BoundField DataField="costpersqmeter" HeaderText="Cost Per Square Meter" />                                          
                         <asp:TemplateField>
                            <ItemTemplate>                                                                   
                                <asp:Button CssClass="view" Text="View" ID="Inkview" runat="server" OnClick="Inkview_Click" ForeColor="white"  BackColor="#FF6600"/>
                            </ItemTemplate>                                                                
                        </asp:TemplateField>
                         <asp:TemplateField>
                            <ItemTemplate>
                          <asp:Button CssClass="view"  Text="Edit" ID="lnkView1" runat="server" OnClick="Inkview_Click1"     ForeColor="white"  BackColor="#FF6600"/>
                     </ItemTemplate>
                        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="White" ForeColor="#000066" />
    <HeaderStyle BackColor="#7EA9D3" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
    <RowStyle ForeColor="#000000" />
    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="#000000" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#007DBB" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
<br />
<div class="Pager" style="width: 100%"></div>

Please help

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 07, 2021 12:46 AM

Hi lingers,

Data is displaying in the popup.

Refer below example.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src=" https://code.jquery.com/jquery-3.5.1.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="ASPSnippets_Pager.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            GetCustomers(1);
        });

        $(document).on("click", '.Pager .page', function () {
            GetCustomers(parseInt($(this).attr('page')));
        });

        $(document).on('click', '.view', function () {
            var id = $(this).closest('tr').find('td').eq(0).html();
            // Setting hidden field.
            $('[id*=hfId]').val(id);
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetCustomersDetails",
                data: '{empid: ' + id + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var job_material = xml.find("job_material");
                    var id = $(job_material[0]).find("EmployeeID").text();
                    var boardname = $(job_material[0]).find("FirstName").text();
                    var materialgsm = $(job_material[0]).find("LastName").text();
                    var materialcode = $(job_material[0]).find("City").text();
                    var materialwebwidth = $(job_material[0]).find("Country").text();
                    var costpersqmeter = $(job_material[0]).find("PostalCode").text();
                    $('[id*=TextBox27]').val(boardname);
                    $('[id*=TextBox28]').val(materialgsm);
                    $('[id*=TextBox29]').val(materialcode);
                    $('[id*=TextBox30]').val(materialwebwidth);
                    $('[id*=TextBox31]').val(costpersqmeter);
                    ShowPopup();
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

            return false;
        });

        $(document).on('click', '.view1', function () {
            var id = $(this).closest('tr').find('td').eq(0).html();
            // Setting hidden field.
            $('[id*=hfId]').val(id);
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetCustomersDetails1",
                data: '{empid: ' + id + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var job_material = xml.find("job_material");
                    var id = $(job_material[0]).find("EmployeeID").text();
                    var boardname = $(job_material[0]).find("FirstName").text();
                    var materialgsm = $(job_material[0]).find("LastName").text();
                    var materialcode = $(job_material[0]).find("City").text();
                    var materialwebwidth = $(job_material[0]).find("Country").text();
                    var costpersqmeter = $(job_material[0]).find("PostalCode").text();
                    $('[id*=TextBox1]').val(boardname);
                    $('[id*=TextBox2]').val(materialgsm);
                    $('[id*=TextBox3]').val(materialcode);
                    $('[id*=TextBox4]').val(materialwebwidth);
                    $('[id*=TextBox5]').val(costpersqmeter);
                    ShowPopup1();
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

            return false;
        });

        var i = 0;
        function GetCustomers(pageIndex) {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetCustomers",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $('[id$=gvDetails]').prepend($("<thead></thead>").append($('[id$=gvDetails]').find("tr:first"))).DataTable().destroy();
                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var customers = xml.find("job_material");
                    var row = $("[id$=gvDetails] tbody tr:last-child").eq(0).clone(true);
                    $("[id$=gvDetails] tbody tr").not($("[id$=gvDetails] tbody tr:first-child")).remove();
                    $.each(customers, function () {
                        $("td", row).eq(0).html($(this).find("EmployeeID").text());
                        $("td", row).eq(1).html($(this).find("FirstName").text());
                        $("td", row).eq(2).html($(this).find("LastName").text());
                        $("td", row).eq(3).html($(this).find("City").text());
                        $("td", row).eq(4).html($(this).find("Country").text());
                        $("td", row).eq(5).html($(this).find("PostalCode").text());

                        $("[id$=gvDetails]").append(row);
                        row = $("[id$=gvDetails] tbody tr:last-child").eq(0).clone(true);
                    });
                    $("[id$=gvDetails] tbody tr:first-child").remove();
                    if (i != 0) {
                        $('[id$=gvDetails]').DataTable({
                            "paging": false,
                            "info": false
                        });
                    } else {
                        $('[id$=gvDetails]')
                            .prepend($("<thead></thead>").append($('[id$=gvDetails]').find("tr:first")))
                            .DataTable({
                                "paging": false,
                                "info": false
                            });
                    }
                    i++;
                    var pager = xml.find("Pager");
                    $(".Pager").ASPSnippets_Pager({
                        ActiveCssClass: "current",
                        PagerCssClass: "pager",
                        PageIndex: parseInt(pager.find("PageIndex").text()),
                        PageSize: parseInt(pager.find("PageSize").text()),
                        RecordCount: parseInt(pager.find("RecordCount").text())
                    });
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        }

        function ShowPopup() {
            $('#label71').html('');
            $("#dialog").dialog({
                title: "VIEW  CYLINDER  DETAILS",
                width: 830,
                height: 500,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            $("#dialog").parent().appendTo($("form:first"));
        };

        function ShowPopup1() {
            $('#label71').html('');
            $("#dialog1").dialog({
                title: "EDIT  CYLINDER  DETAILS",

                width: 830,
                height: 500,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });

            $("#dialog1").parent().appendTo($("form:first"));
        };
    </script>
</head>
<table style="width: 100%; height: 10px;" bgcolor="DarkOrange" frame="void">
    <tr>
        <td class="style6">&nbsp;
            <img class="style9" src="Images/capres.gif" />
            <img src="Images/Continue.jpg" width="1022" height="104" />
        </td>
    </tr>
</table>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <table style="width: 100%;">
            <tr>
                <td class="style23">&nbsp;</td>
                <td class="style15">
                    <table class="display" align="center" border="1px" bordercolor="grey" style="width: 1050px">
                        <tr>
                            <td align="center" class="style20" style="font-size: large; color: #006699; font-family: Cambria; font-weight: bold;">
                                <table style="width: 100%; height: 47px;">
                                    <tr>
                                        <td bgcolor="#3366FF" class="style22" align="center">
                                            <asp:HyperLink ID="HyperLink1" runat="server" Font-Bold="True"
                                                Font-Names="Century Gothic" Text="Manage Die" ForeColor="White"
                                                NavigateUrl="Die.aspx" Font-Underline="False"></asp:HyperLink>
                                        </td>
                                        <td bgcolor="Black" class="style22" align="center">
                                            <asp:HyperLink ID="HyperLink2" runat="server" Font-Bold="True"
                                                Font-Names="Century Gothic" Text="Manage Embossing" ForeColor="White"
                                                NavigateUrl="Embos.aspx" Font-Underline="False"></asp:HyperLink>
                                        </td>
                                        <td bgcolor="#009999" class="style22" align="center">
                                            <asp:HyperLink ID="HyperLink3" runat="server" Font-Bold="True"
                                                Font-Names="Century Gothic" Text="Manage Ink" ForeColor="White"
                                                NavigateUrl="Ink.aspx" Font-Underline="False"></asp:HyperLink>
                                        </td>
                                        <td bgcolor="#FF9933" class="style22" align="center">
                                            <asp:HyperLink ID="HyperLink4" runat="server" Font-Bold="True"
                                                Font-Names="Century Gothic" Text="Manage Solvent" ForeColor="White"
                                                NavigateUrl="#" Font-Underline="False"></asp:HyperLink>
                                        </td>
                                        <td bgcolor="#CC0099" class="style22" align="center">
                                            <asp:HyperLink ID="HyperLink5" runat="server" Font-Bold="True"
                                                Font-Names="Century Gothic" Text="Manage Materials" ForeColor="White"
                                                NavigateUrl="Material.aspx" Font-Underline="False"></asp:HyperLink>
                                        </td>
                                        <td bgcolor="#00CC99" class="style22" align="center">
                                            <asp:HyperLink ID="HyperLink6" runat="server" Font-Bold="True"
                                                Font-Names="Century Gothic" Text="Manage Cylinder" ForeColor="White"
                                                NavigateUrl="Cylinder.aspx" Font-Underline="False"></asp:HyperLink>
                                        </td>
                                    </tr>
                                </table>
                                <table style="width: 50%; height: 47px;">
                                    <tr>
                                        <td class="style24" align="center">
                                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/l1.jpg"
                                                PostBackUrl="JobsV.aspx" Height="67px" />
                                            <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/l2.jpg"
                                                PostBackUrl="Jobs.aspx" Height="67px" />
                                        </td>
                                    </tr>
                                </table>
                                <table style="width: 50%; height: 47px;" align="right">
                                    <tr>
                                        <td class="style141" align="right">
                                            <asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="Home.aspx">Home</asp:LinkButton>
                                            |<asp:LinkButton ID="LinkButton2" runat="server"
                                                OnClick="LinkButton2_Click">Logout</asp:LinkButton>
                                        </td>
                                    </tr>
                                </table>
                                <table id="customGrid" class="display" style="width: 100%; height: 164px; color: #000080; background-color: #000099;">
                                    <tr>
                                        <td style="border-style: 1; border-color: #003399; background-color: #FFFFFF" class="style140" align="center">
                                            <table style="width: 238%; height: 25px;">
                                                <tr>
                                                    <td style="border-style: 1; border-color: #003399; background-color: #FFFFFF"
                                                        class="style142" align="left">
                                                        <strong>MANAGE MATERIAL</strong></td>
                                                    <td class="style143">&nbsp;</td>
                                                    <td align="right">&nbsp;</td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style5" align="left" style="background-color: #FFFFFF">
                                            <br />
                                            <br />
                                            <asp:HiddenField ID="hfId" runat="server" />
                                            <asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="False"
                                                BackColor="White" BorderColor="#CCCCCC" BorderStyle="None"
                                                Font-Names="Century Gothic" Font-Size="X-Small" DataKeyNames="EmployeeID"
                                                Width="100%" Style="margin-bottom: 0px" CssClass="grid" BorderWidth="1px" CellPadding="3">
                                                <Columns>
                                                    <asp:TemplateField>
                                                        <ItemTemplate>
                                                            <asp:HiddenField ID="id" runat="server" Value='<%#Eval("EmployeeID") %>' />
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                    <asp:BoundField DataField="EmployeeID" HeaderText="S/N" />
                                                    <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                                                    <asp:BoundField DataField="LastName" HeaderText="LastName" />
                                                    <asp:BoundField DataField="City" HeaderText="City" />
                                                    <asp:BoundField DataField="Country" HeaderText="Country" />
                                                    <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" />
                                                    <asp:TemplateField>
                                                        <ItemTemplate>
                                                            <asp:Button CssClass="view" Text="View" ID="Inkview" runat="server" ForeColor="white" BackColor="#FF6600" />
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                    <asp:TemplateField>
                                                        <ItemTemplate>
                                                            <asp:Button CssClass="view1" Text="Edit" ID="lnkView1" runat="server" ForeColor="white" BackColor="#FF6600" />
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                </Columns>
                                                <FooterStyle BackColor="White" ForeColor="#000066" />
                                                <HeaderStyle BackColor="#7EA9D3" Font-Bold="True" ForeColor="White" />
                                                <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                                                <RowStyle ForeColor="#000000" />
                                                <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="#000000" />
                                                <SortedAscendingCellStyle BackColor="#F1F1F1" />
                                                <SortedAscendingHeaderStyle BackColor="#007DBB" />
                                                <SortedDescendingCellStyle BackColor="#CAC9C9" />
                                                <SortedDescendingHeaderStyle BackColor="#00547E" />
                                            </asp:GridView>
                                            <br />
                                            <div class="Pager" style="width: 100%"></div>
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <asp:Label ID="lblRecord" runat="server"></asp:Label>
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
                <td></td>
            </tr>
        </table>
        <div id="dialog" style="display: none">
            <table align="center" border="2" font-size="xx-small">
                <tr>
                    <td>
                        <asp:Button ID="Tab6" runat="server" BorderStyle="None" CssClass="Initial"
                            OnClick="Tab6_Click" Text="Manage Material" Width="151px" UseSubmitBehavior="false" Font-Bold="True" Font-Names="Arial Narrow" Font-Size="x-small" />
                        <asp:MultiView ID="MainView" runat="server">
                            <asp:View ID="View2" runat="server">
                                <table style="width: 100%; border-width: 1px; border-color: #666; border-style: solid">
                                    <tr>
                                        <td>
                                            <p>
                                                &nbsp;
                                            </p>
                                            <p>
                                                &nbsp;
                                            </p>
                                            <table border="1" class="roundedCorners"
                                                style="width: 100%; font-size: x-small; font-family: 'Arial Narrow'; font-weight: bold;">
                                                <tr>

                                                    <td class="style32">Board Name</td>
                                                    <td class="style29">Gsm</td>
                                                    <td class="style33">Material Code</td>
                                                    <td class="style35">Web Width</td>
                                                    <td class="style35">Cost Per Kg</td>
                                                </tr>
                                                <tr>
                                                    <td class="style32">
                                                        <asp:TextBox ID="TextBox27" runat="server" Width="135px" Height="24px" Font-Size="x-Small" Enabled="False"></asp:TextBox>
                                                    </td>
                                                    <td class="style29">
                                                        <asp:TextBox ID="TextBox28" runat="server" Width="135px" Height="24px" Font-Size="x-Small" Enabled="False"></asp:TextBox>
                                                    </td>
                                                    <td class="style33">
                                                        <asp:TextBox ID="TextBox29" runat="server" Width="135px" Height="24px" Font-Size="x-Small" Enabled="False"></asp:TextBox>
                                                    </td>
                                                    <td class="style35">
                                                        <asp:TextBox ID="TextBox30" runat="server" Width="135px" Height="24px" Font-Size="x-Small" Enabled="False"></asp:TextBox>
                                                    </td>
                                                    <td class="style35">
                                                        <asp:TextBox ID="TextBox31" runat="server" Width="135px" Height="24px" Font-Size="x-Small" Enabled="False"></asp:TextBox>
                                                    </td>
                                                </tr>
                                            </table>
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                </table>
                            </asp:View>
                        </asp:MultiView>
                    </td>
                </tr>
            </table>
        </div>
        <div id="dialog1" style="display: none">
            <table align="center" border="2" font-size="xx-small">
                <tr>
                    <td>
                        <asp:Button ID="Tab2" runat="server" BorderStyle="None" CssClass="Initial"
                            OnClick="Tab2_Click" Text=" Manage Material" Width="151px" UseSubmitBehavior="false" Font-Bold="True" Font-Names="Arial Narrow" Font-Size="x-small" />
                        <asp:MultiView ID="MainView1" runat="server">
                            <asp:View ID="View1" runat="server">
                                <table style="width: 100%; border-width: 1px; border-color: #666; border-style: solid">
                                    <tr>
                                        <td align="center">
                                            <asp:Label ID="Label71" runat="server" Width="400px" ForeColor="White" BackColor="#339966" Visible="False"></asp:Label>

                                            <p align="center">
                                                <asp:Button ID="Button1" runat="server" OnClick="ImageButton1_Click" Height="34px" Width="142px"
                                                    UseSubmitBehavior="false" Style="background: url(./Images/submit.jpg) no-repeat;" />
                                            </p>
                                            <p>
                                                &nbsp;
                                            </p>
                                            <table border="1" class="roundedCorners" align="center"
                                                style="width: 100%; font-size: x-small; font-family: 'Arial Narrow'; font-weight: bold;">
                                                <tr>
                                                    <td class="style32">Board Name</td>
                                                    <td class="style29">Gsm</td>
                                                    <td class="style33">Material Code</td>
                                                    <td class="style35">Web Width</td>
                                                    <td class="style35">Cost Per Kg</td>
                                                </tr>
                                                <tr>
                                                    <td class="style32">
                                                        <asp:TextBox ID="TextBox1" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
                                                    </td>
                                                    <td class="style29">
                                                        <asp:TextBox ID="TextBox2" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
                                                    </td>
                                                    <td class="style33">
                                                        <asp:TextBox ID="TextBox3" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
                                                    </td>
                                                    <td class="style35">
                                                        <asp:TextBox ID="TextBox4" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
                                                    </td>
                                                    <td class="style35">
                                                        <asp:TextBox ID="TextBox5" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
                                                    </td>
                                                </tr>
                                            </table>
                                            <br />
                                            <br />
                                            <asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
                                        </td>
                                    </tr>
                                </table>
                            </asp:View>
                        </asp:MultiView>
                    </td>
                </tr>
            </table>
        </div>
    </form>
    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    GetCustomers(1);
                }
            });
        };
    </script>
</body>
</html>

Code

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    SqlCommand cmd1 = new SqlCommand();
    SqlCommand cmd = new SqlCommand();
    SqlConnection dbConn = new SqlConnection();
    SqlConnection dbConn1 = new SqlConnection();
    SqlConnection dbConn2 = new SqlConnection();
    SqlDataReader dr, dr2, dr1, dr3;
    string selectSQL, updateSQL, selectSQL1;
    private static int PageSize = 5;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDummyRow();
        }

        MainView.ActiveViewIndex = 0;
        MainView1.ActiveViewIndex = 0;
    }

    protected void Tab6_Click(object sender, EventArgs e)
    {
        Tab6.CssClass = "Clicked";
        MainView.ActiveViewIndex = 0;
        gvDetails.UseAccessibleHeader = true;
        gvDetails.HeaderRow.TableSection = TableRowSection.TableHeader;
        ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup()", true);
    }

    protected void Tab2_Click(object sender, EventArgs e)
    {
        Tab2.CssClass = "Clicked";
        MainView1.ActiveViewIndex = 0;
        gvDetails.UseAccessibleHeader = true;
        gvDetails.HeaderRow.TableSection = TableRowSection.TableHeader;
        ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup1()", true);
    }

    private void BindDummyRow()
    {
        DataTable dummy = new DataTable();
        dummy.Columns.Add("EmployeeID");
        dummy.Columns.Add("FirstName");
        dummy.Columns.Add("LastName");
        dummy.Columns.Add("City");
        dummy.Columns.Add("Country");
        dummy.Columns.Add("PostalCode");
        dummy.Rows.Add();
        gvDetails.DataSource = dummy;
        gvDetails.DataBind();
    }

    [WebMethod]
    public static string GetCustomers(int pageIndex)
    {
        string query = "[Employees_GetEmployeesPageWise]";
        SqlCommand cmd = new SqlCommand(query);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
        cmd.Parameters.AddWithValue("@PageSize", PageSize);
        cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;

        return GetData(cmd, pageIndex).GetXml();
    }

    [WebMethod]
    public static string GetCustomersDetails(int empid)
    {
        string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(strConnString))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT * FROM Employees WHERE EmployeeID = @id"))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@id", empid);
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataSet ds = new DataSet())
                    {
                        sda.Fill(ds, "job_material");

                        return ds.GetXml();
                    }
                }
            }
        }
    }

    [WebMethod]
    public static string GetCustomersDetails1(int empid)
    {
        string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(strConnString))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT * FROM Employees WHERE EmployeeID = @id"))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@id", empid);
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataSet ds = new DataSet())
                    {
                        sda.Fill(ds, "job_material");

                        return ds.GetXml();
                    }
                }
            }
        }
    }

    private static DataSet GetData(SqlCommand cmd, int pageIndex)
    {
        string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(strConnString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    sda.Fill(ds, "job_material");
                    DataTable dt = new DataTable("Pager");
                    dt.Columns.Add("PageIndex");
                    dt.Columns.Add("PageSize");
                    dt.Columns.Add("RecordCount");
                    dt.Rows.Add();
                    dt.Rows[0]["PageIndex"] = pageIndex;
                    dt.Rows[0]["PageSize"] = PageSize;
                    dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
                    ds.Tables.Add(dt);
                    return ds;
                }
            }
        }
    }

    protected void ImageButton1_Click(object sender, object e)
    {
        updateSQL = "UPDATE job_material set ";
        updateSQL += "boardname=@boardname,materialgsm=@materialgsm,materialcode=@materialcode,materialwebwidth=@materialwebwidth,costpersqmeter=@costpersqmeter  WHERE id=@id ";
        dbConn2.ConnectionString = "Data Source=NERE\\SQLEXPRESS01; Initial Catalog=kaging;Integrated Security=True;";
        cmd1.Connection = dbConn2;
        cmd1.CommandText = updateSQL;
        cmd1.CommandType = CommandType.Text;
        cmd1.Parameters.AddWithValue("@boardname", TextBox1.Text);
        cmd1.Parameters.AddWithValue("@materialgsm", TextBox2.Text);
        cmd1.Parameters.AddWithValue("@materialcode", TextBox3.Text);
        cmd1.Parameters.AddWithValue("@materialwebwidth", TextBox4.Text);
        cmd1.Parameters.AddWithValue("@costpersqmeter", TextBox5.Text);
        cmd1.Parameters.AddWithValue("@id", Session["sidd2"].ToString());
        try
        {
            dbConn2.Open();
            int updated = cmd1.ExecuteNonQuery();
            Label71.Visible = true;
            Label71.Text = updated.ToString() + " records updated.";
            // Call the BindUserDetails to refresh the data.
            BindDummyRow();
            // Or Set UseAccessibleHeader and HeaderRow TableSection
            gvDetails.UseAccessibleHeader = true;
            gvDetails.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
        catch (Exception err)
        {
            Response.Redirect(err.Message);
        }
        finally
        {
            dbConn2.Close();
        }
    }

    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        Response.Redirect("Home.aspx");
    }

    protected void LinkButton2_Click(object sender, EventArgs e)
    {
        DateTime date1 = Convert.ToDateTime(DateTime.Now.ToString("MM/dd/yyyy hh:mm tt"));
        updateSQL = "update usertracking set loggedout='" + date1 + "' where username='" + Session["username"].ToString() + "' and loggedin='" + Session["date"].ToString() + "' ";
        dbConn.ConnectionString = "Data Source=NERE\\SQLEXPRESS01; Initial Catalog= kaging;Integrated Security=True";
        cmd.Connection = dbConn;
        cmd.CommandText = updateSQL;
        cmd.CommandType = CommandType.Text;
        try
        {
            dbConn.Open();
            //  Response.Write(updateSQL);
            int updated = cmd.ExecuteNonQuery();
            if (updated == 1)
            {
                Response.Redirect("Welcome.aspx");
            }
            else
            {
                //Label1.Text = "Process not Completed";
            }

            dbConn.Close();
        }
        catch (Exception err)
        {
            Response.Write(err.ToString());
        }
        finally
        {
            dbConn.Close();
        }
    }
}

Screenshot