Bind a GridView on a Usercontrol using JQuery in ASP.NET

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>
    &nbsp;
</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