无法在Ajax调用中在ASPX中调试WebMethod

Question

I am trying to send a screenshot done via html2canvas to the server using an AJAX call and the POST method, but it's not happening. When I am trying to debug the script using Firebug by setting breakpoints at the related lines, my application is not hitting the breakpoint.

Here is my client-side code (using jQuery):

$("#excel").on("click", function (e) {
        e.preventDefault();

        html2canvas($("#placeholder").get(0), {
            onrendered: function (canvas) {
                //document.body.appendChild(canvas);

                var img = canvas.toDataURL().replace(/^data[:]image\/(png|jpg|jpeg)[;]base64,/i, "");
                $.ajax({
                    "type": "POST",
                    "url": "Default.aspx/MyMethod",
                    "data": {
                        "imageData": img //Send to WebMethod
                    }
                }).done(function (o) {
                    console.log(["Response:", o]);
                });

            }
    });

And this is my server-side ASPX WebMethod:

 [WebMethod()]
public static void MyMethod(string imageData)
{

    string fileNameWitPath = "D:/Kabir/custom_name.png";
    using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
    {
        using (BinaryWriter bw = new BinaryWriter(fs))
        {
            byte[] data = Convert.FromBase64String(imageData);//convert from base64
            bw.Write(data);
            bw.Close();
        }
    }

When I try to see it within Firebug, its status is 200 OK . Why is this happening?

Answer 1

You have invalid JSON:

  "type": "POST", "url": "Default.aspx/MyMethod", "data": { "imageData": img //Send to WebMethod } 

Problem is in your canvas data, Use this one . and just replace the var img = "image"; variable to as your desire input

$(document).ready(function () {
            $("#excel").on("click", function (e) {
                e.preventDefault();
                //document.body.appendChild(canvas);
                var img = "image";
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/MyMethod",
                    data: JSON.stringify({ imageData: img }),
                    contentType: "application/json; charset=utf-8"
                }).done(function (o) {
                    console.log(["Response:", o]);
                });


            });
        });

Answer 2

On your client side

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#excel").on("click", function (e) {
                e.preventDefault();
                //document.body.appendChild(canvas);
                var img = "image";
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/MyMethod",
                    data: JSON.stringify({ imageData: img }),
                    contentType: "application/json; charset=utf-8"
                }).done(function (o) {
                    console.log(["Response:", o]);
                });
            });
        });
    </script>
    <input type="button" id="excel" title="something" />

On code behind

 [WebMethod()]
        public static void MyMethod(string imageData)
        {

            string fileNameWitPath = "D:/Kabir/custom_name.png";
            using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
            {
                using (BinaryWriter bw = new BinaryWriter(fs))
                {
                    byte[] data = Convert.FromBase64String(imageData);//convert from base64
                    bw.Write(data);
                    bw.Close();
                }
            }
        }