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)

Answer 1

Your JSON with base64 could be available as request body.

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

Answer 2

If you replace

url: 'EvaluatieForm.aspx'

by

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

and remove

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

then it will work.

Answer 3

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 });

Answer 4

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.

Answer 5

With ajax you can try xhr.

maybe this thread helps you out! :)

How can I upload files asynchronously?