Search code examples
jqueryasp.netwebmethod

Unable to call server side webmethod function

I am using summernote, I want to upload image to my web server.. Below is my code which I am using

Default.aspx

<script type="text/javascript">
    $(document).ready(function () {
        $('#summernote').summernote({
            onImageUpload: function (files, editor, $editable) {
                alert('image?');
                var formData = new FormData();
                formData.append("file", files[0]);

                $.ajax({
                    url: "Default.aspx/UploadImage",
                    data: formData,
                    type: 'POST',
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (imageUrl) {
                        alert(imageUrl);
                        if (!imageUrl) {

                            // handle error

                            return;
                        }

                        editor.insertImage($editable, imageUrl);
                    },
                    error: function () {
                        alert('error');
                        // handle error
                    }
                });
                console.log('image upload:', files, editor, $editable);
            }
        });
    });
</script>

Default.asp.cs

[System.Web.Services.WebMethod]
    public static string UploadImage(HttpPostedFileBase file)
    {
        //Saving to Server

        return imageUrl;
    }

But it is not calling server side function. Also, alert(imageUrl) is giving me complete page html.

Where I am wrong?

Updating Question with network information (google chrome)

enter image description here

Edit 2

Updated after suggestion

Code:

 url: "About.aspx/UploadImage",
                   data: "multipart/form-data",
                   type: 'POST',
                   cache: false,
                   contentType: "application/json",

Error:

enter image description here

Note: I have changed Page from Default.aspx to about.aspx (but code is same)

Solution

  • WebMethod or "Page methods" expect contentType: "application/json;

    Additional ref: Scott Guthrie - JSON Hijacking and How ASP.NET AJAX 1.0 Avoids these Attacks:

    There is a built-in validation layer of protection that ASP.NET enforces for both GET and POST based ASP.NET AJAX web methods, which is that regardless of the HTTP verb being used, ASP.NET always requires that the HTTP Content-Type header is set to the value application/json. It this content type header is not sent, ASP.NET AJAX will reject the request on the server.

    • this is why your alert is returning the page (html), your call succesfully called the page (default.aspx), but the webmethod was not invoked.

    See this for direction/possible solution.

    I think you're getting confused, probably my fault. I'll try to simplify:

    • The suggestion in the link is not using WebMethod.
    • In order to send file/s, your contentType must be multipart/form-data
    • But as referenced above, WebMethods require contentType to be application/json
    • It will not work with WebMethods (hence the link suggests using a generic handler).

    Hth...