Ajax call in my aspx page

Question

I am trying to give a call to my function "InsertMethod" using Ajax but the function is not being called. But if i use the same code as below in new page then its works ie call to function is given using Ajax. Can anyone please help me out regarding this. And i have one more query. I cannot access any control of page in that web method "Insertmethod"

below is the script

<script type="text/javascript">
    function getDistinctChains() {
        $.ajax({
            url: 'Tax_Type_Master.aspx/InsertMethod',
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            data: "{'Name':'" + TaxType.value + "'}",
            //async: false,
            success: function(response) {
                $('[id*=txtTaxtypeName]').val('');
                alert("Record Has been Saved in Database");
            },
            error: function() { //console.log('there is some error'); 
                alert('there is some error');
            }
        });
    }
    $(document).ready(function() {
        $('[id*=ImageSaveFooter]').click(function() {
            getDistinctChains();
        });
    });
</script>

below is my cs code

public partial class Tax_Type_Master : System.Web.UI.Page
{
    Generic gn = new Generic();
    protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            if (!IsPostBack)
            {
                Master.FillHeader("Tax Type Master");
                BindGrid();
            }
        }
        catch (Exception ex)
        {
            Master.ErrorMessage(ex.Message);
        }
    }
}

[WebMethod]
[System.Web.Script.Services.ScriptMethod(ResponseFormat =     
    System.Web.Script.Services.ResponseFormat.Json,
    UseHttpGet = false)]
public static string InsertMethod(string Name)
{
    TextBox TaxTypeName = (TextBox)grd_Master.FooterRow.FindControl("txtTaxtypeName");

    int count = (int)gn.ExecuteScaler("Check_TaxType_Ref_TaxTypeMaster", TaxTypeName.Text.ToUpper().Trim());

    if (count == 0)
    {
        gn.ExecuteNonQuery("Insert_Taxtype_Master",  
        TaxTypeName.Text.ToUpper().Trim());
        BindGrid();
        Master.SuccessMessage("Record Inserted Successfully..");
    }
    else
    {
        Master.ValidationMessage("Record Already Exist..");
    }
    return "True";
}

Answer 1

You need to define what version of jquery you are using:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#<%= Button1.ClientID %>").click(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                ...

Answer 2

There is one alternate you can use query string like this:-

http://localhost/Tax_Type_Master.aspx?m=InsertMethod

on page load to call InsertMethod use this:-

protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString.HasKeys() ||
                !string.IsNullOrEmpty(Request.QueryString["m"]))
        {
            var m = Request.QueryString["m"];

            switch (m)
            {
                case "InsertMethod":
                    InsertMethod("Name");
                    break;
            }
        }
    }

Your InsertMethod is like this:-

public void InsertMethod(string Name)
    {
        Page.Controls.Add(new Literal(){Text = "<script>alert('method called');</script>"});
    }

Modify your ajax call like this:-

$.ajax({
            url: 'Tax_Type_Master.aspx?m=InsertMethod',
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            data: "{'Name':'" + "asdf" + "'}",
            //async: false,
            success: function (response) {
                if (response.d) {
                    $('[id*=txtTaxtypeName]').val('');
                    alert("Record Has been Saved in Database");
                }
            },
            error: function () { //console.log('there is some error'); 
                alert('there is some error');
            }
        });

Hope this help.

Answer 3

And i have one more query. I cannot access any control of page in that web method "Insertmethod"

It's the way it should be, you cannot access the Page Control via PageMethod as they are static and have no access to the page's control collection .

From your code, its evident that you use a textbox. So just add a CssClass to access it like this in the ajax method.

<asp:TextBox ID="txtTaxtypeName" runat="server" CssClass="myclass"></asp:TextBox>

Change your ajax call like this so that you can access the footer row like this.

function getDistinctChains() {
    var DTO = { Name = $(".myclass").val() };
    $.ajax({
        .....
        data: JSON.stringify( DTO ),
        success: function(response) {
            .....
        },
        error: function() { 
            .....
        }
    });
}

---

That being said, this is bad design as you cannot bind an asp:GridView in a PageMethod . What you are trying to do is to insert a value to the database ( if its unique ) and re-bind the GridView using the PageMethod. Insertion would would just fine. But the BindGrid() method won't work as its cannot access grd_Master from a static method.

You must either use an UpdatePanel or use a third party plugin like datatables.net or jqGrid

For further info, read this. http://encosia.com/why-do-aspnet-ajax-page-methods-have-to-be-static/