CODEWITHSUNDEEP
javascriptc#jqueryasp.netajax
btalbot
btalbot

Reputation: 167

Why isn't my C# function executing from ajax Javascript code?

I have an HTML canvas on my page. When I click the canvas, a simple dot paints. I pass the coordinates into my InsertIntoDB function to enter the x and y coordinates into a MS SQL Server database, but it's not happening.

I can, however, place the C# call into an HTML

element and get it to work fine, so long as I use dummy xCoord and yCoord numbers and return something (not void).

My code is actually popping up the "Success!" alert, but when I run a SQL query, there was no INSERT. Here is the Code from Default.aspx: 

function insertIntoDB(x, y) {
        try
        {
            $.ajax({
                type: 'POST',
                url: 'Default.aspx/InsertPoints', 
                data: "{'xCoord': '" + x + "', 'yCoord': '" + y + "'}",

                //    '{"xCoord": "' + x + '", "yCoord": "' + y + '"}',
                success: function (data) {
                    alert("Success!");
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("Fail: " + textStatus);
                }
            });
        }
        catch (e)
        {
            alert(e);
        }
    }

Here is the C# code in Default.aspx.cs:

[WebMethod]
    public static void InsertPoints(int xCoord, int yCoord) {
        string myConn = "Data Source=MYDATABASEINFO;Initial Catalog=DATABASENAME;Integrated Security=False;User ID=USERID;Password=MYPASSWORD";
        SqlConnection myConnection = new SqlConnection(myConn);
        try
        {
            myConnection.Open();
            SqlCommand myCommand= new SqlCommand("INSERT INTO DRAW (xCoord, yCoord) " +
                "Values (" + xCoord + ", " + yCoord + ");", myConnection);

            myCommand.ExecuteNonQuery();

            myConnection.Close();
        } 
        catch(Exception e) 
        {
            Console.WriteLine(e.ToString());
        }
    }

Thanks for your help.

Upvotes: 0

Views: 163

Answers (3)

Sameer Azazi
Sameer Azazi

Reputation: 1497

You are trying to send json data to server then you have to declare its content type.

add jquery ajax option for content type.

function insertIntoDB(x, y) {
        try
        {
            var data = {
                "xCoord": x,
                "yCoord": y
            };


            $.ajax({
                type: 'POST',
                url: 'Default.aspx/InsertPoints', 
                data: JSON.stringify(data), 
                contentType: 'application/json',
                success: function (data) {
                    alert("Success!");
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("Fail: " + textStatus);
                }
            });
        }
        catch (e)
        {
            alert(e);
        }
    }

Upvotes: 1

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

Try change :

  data: "{'xCoord': '" + x + "', 'yCoord': '" + y + "'}",

to:

  data: {'xCoord': x , 'yCoord':  y },

and try add datatype:

  dataType: "json",
  contentType: 'application/json',

Upvotes: 0

Trekco
Trekco

Reputation: 1286

Try creating an old school Web Service(.asmx file) and not a Web Page(.aspx file).

It will even be better if you create a WebApi endpoint. It is not good practice to use web pages for web services

Upvotes: 0

Related Questions