Hi All,
I have a user control (UC) : CustomerDetails.ascx on the page: Welcome.aspx. The UC has a GridView and a Button: Submit. On click of the Submit button this should call the method on the UC CustomerDetails.ascx.cs and bind the dataset to the GridView. The event of button click isn't triggered.
--- **CustomerDetails.ascx**
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CustomerDetails.ascx.cs" Inherits="AsyncButtonEvents.CustomerDetails" %>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnSubmit").click(function () {
alert("button clicked");
CallServerSideFunction();
return false;
});
});
function CallServerSideFunction() {
alert("CallServerSideFunction");
$.ajax({
type: "POST",
url: "CustomerDetails.ascx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
alert("OnSuccess");
alert("response.d: " + response.d);
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Orders");
var row = $("[id*=gvCustomers] tr:last-child").clone(true);
$("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
$.each(customers, function () {
var customer = $(this);
$("td", row).eq(0).html($(this).find("CustomerID").text());
$("td", row).eq(1).html($(this).find("ContactName").text());
$("td", row).eq(2).html($(this).find("City").text());
$("[id*=gvCustomers]").append(row);
row = $("[id*=gvCustomers] tr:last-child").clone(true);
});
}
</script>
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
Font-Size="10pt" RowStyle-BackColor="#A1DCF2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID" />
<asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="ContactName" />
<asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
</Columns>
</asp:GridView>
<p>
</p>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
--- **CustomerDetails.ascx.cs**
using System;
using System.Data;
using System.Web.Services;
namespace AsyncButtonEvents
{
public partial class CustomerDetails : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.BindDummyRow();
}
}
private void BindDummyRow()
{
DataTable dt = new DataTable();
dt.Columns.Add("CustomerID", typeof(string));
dt.Columns.Add("ContactName", typeof(string));
dt.Columns.Add("City", typeof(string));
dt.Rows.Add();
gvCustomers.DataSource = dt;
gvCustomers.DataBind();
}
[WebMethod]
public static string GetCustomers()
{
DataSet customerOrders = new DataSet("CustomerOrders");
DataTable dt = customerOrders.Tables.Add("Orders");
dt.Columns.Add("CustomerID", typeof(string));
dt.Columns.Add("ContactName", typeof(string));
dt.Columns.Add("City", typeof(string));
dt.Rows.Add("100", "Jack", "Nashville");
dt.Rows.Add("101", "Sam", "New York");
dt.Rows.Add("102", "Tom", "Dallas");
dt.Rows.Add("103", "Henry", "Houston");
dt.Rows.Add("104", "Janet", "Seattle");
return dt.DataSet.GetXml();
}
}
}
--- **Welcome.aspx**
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Welcome.aspx.cs" Inherits="AsyncButtonEvents.Welcome" %>
<%@ Register src="~/CustomerDetails.ascx" TagPrefix="uc1" TagName="CustomerDetails" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<uc1:CustomerDetails runat="server" id="CustomerDetails" />
</form>
</body>
</html>
--- **Welcome.aspx.cs**
using System;
namespace AsyncButtonEvents
{
public partial class Welcome : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
Thanks
Janet
