Hello,
I have first time used jQuery AJAX to bind the gridview, now it is binded successfully, but all of a suddent when I used server side events of gridview, my gridview vanishes and nothing worked inside my server side event, Attached is the code for your reference. Thanks.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="BSD.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/Style/Bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Style/Bootstrap/bootstrap-theme.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox2" class="form-control" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" class="form-control" runat="server"></asp:TextBox>
<asp:Panel ID="Panel1" runat="server" DefaultButton="Button1">
<div class="col-xs-4">
<div class="input-group">
<asp:TextBox ID="TextBox1" class="form-control" runat="server"></asp:TextBox>
<span class="input-group-addon">
<asp:Button ID="Button1" runat="server" class="btn btn-primary" Text="Button" /></span>
</div>
</div>
</asp:Panel>
<asp:GridView ID="gridView" runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="gridView_OnSelectedIndexChanged" CssClass="table table-condensed table-hover">
<Columns>
<asp:BoundField DataField="RowNum" HeaderText="RowNum" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />
<asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" />
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:ImageButton ID="Edit" runat="server" ClientIDMode="Static" CommandName="Select"
ImageUrl="Content/Image/Edit.png" ToolTip="EDIT" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<div class="Pager"></div>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="Scripts/ASPSnippets_Pager.min.js"></script>
<script>
function toSearch() {
return $('#TextBox1').val();
}
$(document).ready(function () {
CallServerFunction(1, toSearch());
});
$('#Button1').click(function () {
CallServerFunction(1, toSearch());
return false;
});
$(".Pager .page").live("click", function () {
CallServerFunction(parseInt($(this).attr('page')), toSearch());
});
function CallServerFunction(pageIndex, search) {
$.ajax({
type: "POST",
url: "test.aspx/GetCustomers",
data: JSON.stringify({ pageIndex: pageIndex, search: search }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
function OnSuccess(message) {
var xmlDoc = $.parseXML(message.d);
var xml = $(xmlDoc);
var product = xml.find("Table");
var row = $("[id*=gridView] tr:last-child").clone(true);
$("[id*=gridView] tr").not($("[id*=gridView] tr:first-child")).remove();
$.each(product, function () {
var customer = $(this);
$("td", row).eq(0).html($(this).find("RowNum").text());
$("td", row).eq(1).html($(this).find("ProductName").text());
$("td", row).eq(2).html($(this).find("QuantityPerUnit").text());
$("td", row).eq(3).html($(this).find("UnitPrice").text());
$("td", row).eq(4).html($(this).find("UnitsInStock").text());
$("[id*=gridView]").append(row);
row = $("[id*=gridView] tr:last-child").clone(true);
});
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())
});
}
</script>
</form>
</body>
</html>
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Web.UI;
namespace BSD
{
public partial class test : Page
{
protected void gridView_OnSelectedIndexChanged(object sender, EventArgs e)
{
var index = gridView.SelectedIndex;
var ProductName = gridView.Rows[index].Cells[0].Text;
var QuantityPerUnit = gridView.Rows[index].Cells[1].Text;
TextBox2.Text = ProductName;
TextBox3.Text = QuantityPerUnit;
}
}
}
