Pass (Send) parameter to jQuery AJAX when URL Routing is used in ASP.Net

Hi SajidHussa,

Check this example. Now please take its reference and correct your code.

HTML

Default

<h1>Home</h1><hr />
<a href='<%=ResolveUrl("~/Customers") %>'>View Customers</a>

Customers

<h1>Customers</h1><hr />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
        <asp:TemplateField>
            <ItemTemplate>
                <a href="<%# string.Format(ResolveUrl("~/Customers/{0}"), Eval("ID")) %>">View</a>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

CustomerDetails

<asp:HiddenField ID="hfId" runat="server" />
<h1>Customer Details</h1><hr />
<b>Customer Id:</b>
<asp:Label ID="lblCustomerId" 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 () {
        var cid = $('[id*=hfId]').val();
        $.ajax({
            url: "<%=ResolveUrl("~/CustomerDetails.aspx/GetData") %>",
            data: '{ "id":' + cid + '}',
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                $('[id*=lblCustomerId]').html(response.d);
            },
            error: function (response) {
                alert("error");
            },
            failure: function (response) {
                alert("no data");
            }
        });
    });
</script>

Code

Customers

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[3] {
            new System.Data.DataColumn("Id", typeof(int)),
            new System.Data.DataColumn("Name", typeof(string)),
            new System.Data.DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New Data.DataTable()
        dt.Columns.AddRange(New Data.DataColumn() {
                            New Data.DataColumn("Id", GetType(Integer)),
                            New Data.DataColumn("Name", GetType(String)),
                            New Data.DataColumn("Country", GetType(String))})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

CustomerDetails

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        hfId.Value = this.Page.RouteData.Values["CustomerId"].ToString();
    }
}

[System.Web.Services.WebMethod]
public static int GetData(int id)
{
    return id;
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        hfId.Value = Me.Page.RouteData.Values("CustomerId").ToString()
    End If
End Sub

<System.Web.Services.WebMethod>
Public Shared Function GetData(ByVal id As Integer) As Integer
    Return id
End Function

Global.asax

C#

<%@ Application Language="C#" %>
<%@ Import Namespace="System.Web.Routing" %>

<script RunAt="server">
    void Application_Start(object sender, EventArgs e)
    {
        RegisterRoutes(RouteTable.Routes);
    }

    static void RegisterRoutes(RouteCollection routes)
    {
        routes.MapPageRoute("Default", "Default", "~/Default.aspx");
        routes.MapPageRoute("Customers", "Customers", "~/Customers.aspx");
        routes.MapPageRoute("CustomerDetails", "Customers/{CustomerId}", "~/CustomerDetails.aspx");
    }
</script>

VB.Net

<%@ Application Language="VB" %>
<%@ Import Namespace="System.Web.Routing" %>

<script RunAt="server">
    Private Sub Application_Start(sender As Object, e As EventArgs)
        RegisterRoutes(RouteTable.Routes)
    End Sub

    Private Shared Sub RegisterRoutes(routes As RouteCollection)
        routes.MapPageRoute("Default", "Default", "~/Default.aspx")
        routes.MapPageRoute("Customers", "Customers", "~/Customers.aspx")
        routes.MapPageRoute("CustomerDetails", "Customers/{CustomerId}", "~/CustomerDetails.aspx")
    End Sub
</script>

Screenshot