Webmethod not firing in FlexiGrid

Question

I'm using FlexiGid for my project.But the problem is WebMethod not firing.(Json/Ajax call) I have put a Debug point to the Webmethod but it's not firing and also Firebug shows the web method Url is correct.

Here i have put the code

Ajax Call

  function flexgrid() {
        debugger;
        $("#flex1").flexigrid({

                    url: '/WebMethods.aspx/GetIssueSummaryById',
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    colModel : [
                        {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},



                    ],
                    data: JSON.stringify({ ProjectId: "1", UserId: "1" }), //Hard code this values at this time
                    buttons : [
                        { name: 'Add', bclass: 'add', onpress: test },
                        { name: 'Delete', bclass: 'delete', onpress: test },
                        {separator: true},
                        {name: 'A', onpress: sortAlpha},
                        {name: 'B', onpress: sortAlpha}


                    ],
                    searchitems : [
                        { display: 'Project', name: 'project' },
                        {display: 'Name', name : 'name', isdefault: true}
                    ],
                    sortname: "id",
                    sortorder: "asc",
                    usepager: true,
                    title: 'Issue Summary',
                    useRp: true,
                    rp: 10,
                    showTableToggleBtn: true,
                    width: 1000,
                    height: 500
                });

    };

Web Method( thats in WebMethods.aspx file )

 [WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<IssuesVM> GetIssueSummaryById(string UserId, string ProjectId)
{
    //Guid LoggedInUserId = new Guid(UserId);
    //int ProjectId = Convert.ToInt32(ProjectId);

    List<IssuesVM> lst = new List<IssuesVM>();

    try
    {
        SqlCommand comIssueSummary = new SqlCommand("SP_GetIssuesByProjectIDAndOwnerId", conn);
        comIssueSummary.CommandType = CommandType.StoredProcedure;
        //comIssueSummary.Parameters.Add("@ProjectId", SqlDbType.Int).Value = ProjectId;
       // comIssueSummary.Parameters.Add("@UserId", SqlDbType.UniqueIdentifier).Value = LoggedInUserId;
        if (conn.State == ConnectionState.Closed)
            conn.Open();

        SqlDataReader rdr = comIssueSummary.ExecuteReader();
        DataTable dt = new DataTable();
        dt.Load(rdr);
        foreach (DataRow r in dt.Rows)
        {
           //Some code goes here
        }

    }
    catch (Exception)
    {

        throw;
    }

    return lst;
}

After that Firebug shows this Image Here

Can anyone know the Error for this ? Not firing webmethod ?

P.S - I saw some solution in below post[Click Here], I did thatone to the flexigrid.js file but it also not working.

Here is the Change FlexiGrid.js file (before change )

    $.ajax({
                type: p.method,
                url: p.url,
                data: param,
                dataType: p.dataType,
                success: function (data) {
                    g.addData(data);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    try {
                        if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown);
                    } catch (e) {}
                }
            });
        },

FlexiGrid.js (After Change )

 $.ajax({
                    contentType: "application/json; charset=utf-8",
  data: "{}", // to pass the parameters to WebMethod see below 
                    success: function (data) {
                        g.addData(data);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        try {
                            if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown);
                        } catch (e) {}
                    }
                });
            },

Answer 1

So first off, it might be a good idea to move this to a WebService.asmx file. It is just best and common practice to do so. .ASPX pages respond with HTML/CSS/Javascript normally and .asmx responds with JSON or XML.

Either way, whether the Ajax calls for flexigrid are to a WebService or a Web Forms page, when you add the attribute [WebMethod] to expose a method doing the first Ajax call can be a bit challenging. There is something a bit finicky about Ajax calls to public WebMethods. The finicky arises around the content-type of the request and if the request is JSON or XML and if the response is JSON or XML.

So I am going to show you what I know works for a project I used Flexigrid:

 $('#gridTablegSearchProperty').flexigrid({
        url: 'Services/WSgSearch.asmx/gridTablegSearchProperty',
        colModel: [...

You will notice in the first code snippet I do not set the contentType or the dataType properties of Flexigrid.

And now my WebMethod signature

 [WebMethod]
    public XmlDocument gridTablegSearchProperty()
    {
        System.Collections.Specialized.NameValueCollection nvc = HttpContext.Current.Request.Form;

        int pgNum = nvc.GetValueAsInteger("page").GetValueOrDefault(1);
        int pgSize = nvc.GetValueAsInteger("rp").GetValueOrDefault(20);
        string sortName = nvc.GetValueOrDefaultAsString("sortname", "key");
        string sortOrder = nvc.GetValueOrDefaultAsString("sortorder", "desc");

        string query = nvc.GetValueOrDefaultAsString("query", string.Empty);
        string qtype = nvc.GetValueOrDefaultAsString("qtype", string.Empty);

My WebMethod is in a .asmx file, it will not matter if you keep yours in a code behind file but I would move to a WebService and drop the WebMethods.aspx this is poor naming convention and file use convention.