Sending data from JQuery to C#, ASP.Net

Question

I have a canvas in my .aspx form page where one can sign a signature, I would like to send the base64 data from the JQuery client side to the C# Asp.Net side. Here I want to upload this base64 data to a database.

(a couple things I tried) Jquery:

$("#savebtn").bind("click", function () {
    var base64 = $('#sketch')[0].toDataURL("image\png");
    $.ajax({
        url: 'EvaluatieForm.aspx',  // page where i have button listenener
        data: '{ data: "' + base64 + '"}',
        type: 'POST',
        async: true,
        cache: false,
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            console.log("inside sucess");
            console.log("result: " + result);
        },
        error: function (request, error) {
            // This callback function will trigger on unsuccessful action                
            alert('Error!');
        }
    });

$.post("EvaluatieForm.aspx", { data: base64 }); // another thing i tried

C#:

var d = Request.Params["data"];

The variable d is null when i put a breakpoint at it. Does anybody see how I can tackle this hurdle, or make it easier? (note: I do not have a lot of experience with JQuery)

variable "d" is null, i would like to have my base 64 data there — sansactions, Mar 14 '17 at 10:41
Have you checked what the value of `base64` is? Is it filled but lost in the AJAX request, or is it null from the `toDataURL()` method? Also, why not [convert the canvas to a Blob](http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata) and send binary `FormData` which you can then bind to the `File` class in C#? — Rory McCrossan, Mar 14 '17 at 10:41
Although I think Jquery handles it internally, the data you're sending up isn't valid json, it should be like this `'{ "data": "' + base64 + '"}'` — George, Mar 14 '17 at 10:43
@RoryMcCrossan in the sam JQuery u use the base64 to create an which is filled — sansactions, Mar 14 '17 at 10:53

score 0 · Answer 1 · answered Mar 14 '17 at 10:44

0

Your JSON with base64 could be available as request body.

using (StreamReader reader = new StreamReader(context.Request.InputStream))
{
    string text = reader.ReadToEnd();
}

answered Mar 14 '17 at 10:44

Luci

1,278
9
17

score 0 · Answer 2 · answered Mar 14 '17 at 10:51

0

If you replace

url: 'EvaluatieForm.aspx'

by

url: 'EvaluatieForm.aspx?data=' + base64

and remove

data: '{ data: "' + base64 + '"}',

then it will work.

answered Mar 14 '17 at 10:51

Imad

7,126
12
55
112

Well wouldn't that need a reload of the url? or something – sansactions Mar 14 '17 at 10:57
@sansactions I don't think so. Just give it a try. – Imad Mar 14 '17 at 10:58
i will try in half an hour – sansactions Mar 14 '17 at 11:16
I honestly think its somewhere in the way i think that there is a problem – sansactions Mar 14 '17 at 13:15
Are you using `WebMethod` or `PageMethod` or just writing code in page load event? – Imad Mar 15 '17 at 04:22

score 0 · Answer 3 · answered Mar 14 '17 at 10:51

Try this: Just a small change in your existing code, used JSON.stringify to post data.

$("#savebtn").bind("click", function () {
 var base64 = $('#sketch')[0].toDataURL("image\png");
var objectToPasss = {data: base64};
var postData =JSON.stringify(objectToPasss );
$.ajax({
  url: 'EvaluatieForm.aspx',  // page where i have button listenener
  data: postData,
  type: 'POST',
  async: true,
  cache: false,
  contentType: "application/json; charset=utf-8",
  success: function (result) {
     console.log("inside sucess");
     console.log("result: " + result);
  },
  error: function (request, error) {
  // This callback function will trigger on unsuccessful action                
     alert('Error!');
   }
 });

$.post("EvaluatieForm.aspx", { data: base64 });

score 0 · Answer 4 · answered Mar 14 '17 at 11:41

Try this:

$("#savebtn").bind("click", function () {
 $.ajax({
      url: 'EvaluatieForm.aspx', // page where i have button listenener
      data: {
       sketch: $('#sketch')[0].toDataURL("image\png")
      },
      type: 'POST',
      async: true,
      cache: false,
      contentType: "application/json; charset=utf-8",
      success: function (result) {
         console.log("inside sucess");
         console.log("result: " + result);
      },
      error: function (request, error) {
      // This callback function will trigger on unsuccessful action                
         alert('Error!');
      }
 });

where

var d = Request.Params["sketch"];

The data argument in the jQuery ajax() function works in conjunction with the contentType. As you are setting it to application/json, then it stands to reason that data will be serialized, so setting the sketch variable seems about right.

score 0 · Answer 5 · edited May 23 '17 at 10:29

0

With ajax you can try xhr.

maybe this thread helps you out! :)

How can I upload files asynchronously?

edited May 23 '17 at 10:29

Community

1
1

answered Mar 14 '17 at 17:52

Eduardo Julião

61
6

Sending data from JQuery to C#, ASP.Net

5 Answers5