Calling a method with ajax in aspx.cs from aspx

Question

I am trying to call a method from my aspx page. This method is found on the aspx.cs page, but it is throwing an error. Do you know what's wrong, please?

ajax script

<script type="text/javascript">
     function OnSucceeded(response) {
         alert(response);
     }
     function OnFailed(error) {
         alert(error);
     }         //Default.aspx
     function insertMarker() {
         var usernameName = 'username';
         var usernameVal = document.getElementById('<%=hdnUsername.ClientID%>').value;

         var latitudeName = 'latitudeStr';
         var latitudeVal = document.getElementById('<%=hdnMarkerLatitude.ClientID%>').value;

         var longituteName = 'longitudeStr';
         var longitudeVal = document.getElementById('<%=hdnMarkerLongitude.ClientID%>').value;

         var iconName = 'markerIcon';
         var iconVal;
         if (document.getElementById('blueMarker').checked) {
             iconVal = 'images/blueMarker.png';
         }
         if (document.getElementById('greenMarker').checked) {
             iconVal = 'images/greenMarker.png'
         }
         if (document.getElementById('pinkMarker').checked) {
             iconVal = 'images/pinkMarker.png';
         }

         var titleName = 'name';
         var titleVal = document.getElementById('<%=title.ClientID%>').value;

         var descriptionName = 'description';
         var descriptionVal = document.getElementById('<%=description.ClientID%>').value;

         $.ajax({
             type: "POST",
             url: "mapping.aspx/insertNewMarker",
             data: {"username" : usernameVal, "longitudeStr":longitudeVal, "latitudeStr" :latitudeVal, "markerIcon":iconVal, "name" : titleVal, "description" :descriptionVal},
             contentType: 'application/json; charset=utf-8',
             dataType: 'json',
             error: function (XMLHttpRequest, textStatus, errorThrown) {
                 alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
             },
             success: function (result) {
                 alert("We returned: " + result.d);
             }
         });
     }

     </script>

Website Design Save Marker Title Description
Save

Aspx.cs Method.

[ScriptService]
public partial class mapping: System.Web.UI.Page
{
    [WebMethod]
    private static void insertNewMarker(string username, string longitudeStr, string latitudeStr,  string markerIcon, string name, string description)
    {

       //My Code
    }


}

Answer 1

Your server-side webmethod cannot be private , you have to change it to public .

From MSDN documentation on webmethods :

When you create a Web service in managed code, you indicate the methods that are available through that Web service by placing the WebMethod attribute before the method declaration of a Public method. Private methods cannot serve as the entry point for a Web service although they can be in the same class and the Web service code can call them.

Answer 2

Change your data like this

data:JSON.stringify({username : usernameVal, longitudeStr:longitudeVal, latitudeStr :latitudeVal, markerIcon:iconVal, name : titleVal, description :descriptionVal}),

You need to pass data as json stirng which has a specific format. If you use JSON.stringify data will be convetred to json string and if you don't use this than you have to pass every paremter and its value in quotes like this.

data:"{username:'" + usernameVal + "',............}",