ExtJS 4: Ext.Ajax.request error "Web Service method name is not valid."

Question

What would cause this?

Error System.InvalidOperationException: UpdateProject Web Service method name is not valid.

   at System.Web.Services.Protocols.HttpServerProtocol.Initialize()

   at System.Web.Services.Protocols.ServerProtocolFactory.Create(Type type, HttpContext context, HttpRequest request, HttpResponse response, Boolean& abortProcessing)

JavaScript Code:

                Ext.Ajax.request({
                        url: 'http://localhost/Controls/ProjectList/ProjectListService.asmx/UpdateProject',
                        params: {
                            'project': { project_id: 'a', project_number: 'b', project_name: 'c' }
                        },
                        success : function(response){
                            alert(response.responseText);
                        }, 
                        failure : function(response){
                            alert("Error " + response.responseText);
                        }
                });                         

Web Service (ProjectListService.asmx):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Xml;
using System.Data;
using System.Web.Script.Services;
using System.IO;
using System.Text;

namespace Web.Controls.ProjectList
{
    /// <summary>
    /// Summary description for WebService1
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class ProjectListService : System.Web.Services.WebService
    {
        [Serializable]
        public class Project
        {
            public string project_id;
            public string project_number;
            public string project_name;
        }

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json,
            UseHttpGet = false, XmlSerializeString = false)]
        public List<Project> GetProjects(string myTest, string bar)
        {
            var list = new List<Project>(new[] {
                new Project() {project_id="1", project_name="project 1", project_number="001"},
                new Project() {project_id="2", project_name= "project 2", project_number= "002" },
                new Project() {project_id="3", project_name= "project 3", project_number= "003" }
            });

            return list;
        }

        [WebMethod]
        [ScriptMethod]
        //[ScriptMethod(ResponseFormat = ResponseFormat.Json,
        //    UseHttpGet = false, XmlSerializeString = false)]
        public void UpdateProject(Project project)
        {

            string x = "";
            Project p = project;

        }
    }
}

==========================

7/20/2012 @ 10:43 update:

New Error:

Error {"Message":"Invalid JSON primitive: project.","StackTrace":"   at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()\r\n   at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth)\r\n   at System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer)\r\n   at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n   at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n   at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n   at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n   at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.ArgumentException"}

JavaScript Code:

                Ext.Ajax.request({
                        url: 'http://localhost/Controls/ProjectList/ProjectListService.asmx/UpdateProject',
                    headers: { 'Content-Type': 'application/json' },
                    method: 'POST',
                    scope: this,
                        params: {
                            'project': { project_id: 'a', project_number: 'b', project_name: 'c' }
                        },
                        success : function(response){
                            alert(response.responseText);
                        }, 
                        failure : function(response){
                            alert("Error " + response.responseText);
                        }
                });  

==================================

7/20/2012 @ 2:40pm update:

Working JSON Request:

                var jsonStr = Ext.encode({ 'project_id': 'a', 'project_number': 'b', 'project_name': 'c' });

                Ext.Ajax.request({
                        url: 'http://localhost/Controls/ProjectList/ProjectListService.asmx/SaveProject',
                    method: 'POST',
                        jsonData: jsonStr,
                        success : function(response){
                            alert(response.responseText);
                        }, 
                        failure : function(response){
                            alert("Error " + response.responseText);
                        }
                });  

Web Method (so far):

(see Project object above in question)

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false, XmlSerializeString = false)]
public string SaveProject()
{         
    return "success";
}

================================

7/22/2012 @ 9:03pm update (fixed):

Changed two things. Added the "project" parameter of type "Project" for my web service. Then put the Project object properties inside of that object in my "jsonData" object.

Working JSON Request:

            //var jsonStr = Ext.encode({ 'project_id': 'a', 'project_number': 'b', 'project_name': 'c' });
            var jsonDataObject = { 'project': { 'project_id: '4', 'project_number': '004', 'project_name': 'project 4' } };

            Ext.Ajax.request({
                        url: 'http://localhost/Controls/ProjectList/ProjectListService.asmx/SaveProject',
                method: 'POST',
                        jsonData: jsonDataObject,
                        success : function(response){
                            alert(response.responseText);
                        }, 
                        failure : function(response){
                            alert("Error " + response.responseText);
                        }
            });  

Web Method (so far):

(see Project object above in question)

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false, XmlSerializeString = false)]
public string SaveProject(Project project)
{         
    return "success";
}

Answer 1

Looks like the serializer doesn't think you can have objects as properties of a JSON node.

Couple things to try:

• Since Project is your only arguments to the UpdateProject function, can you just pass your project as the data? params: { project_id: 'a', project_number: 'b', project_name: 'c' }
• Instead of "params", try using jsonData. This will also make it so that you don't need to add the application/json header yourself, as well, and maybe the serialization will happen correctly (if the issue is on the client).