How can I save a BASE64 string as file through ajax.post and prevent the site being refreshed?

See more:

C#

Ajax

jQuery

MVC5

Hi!

I'm using a ui control to capture a signature of a customer. The control returns a BASE64 string and since I need to add the image to a document (word mail merge) I need to save the signature first.

My current code works but since I'm displaying the signature control in a modal I have to prevent the page from refreshing itself in order to be able to add another signature or modify some other fields which are passed to the mail merge fields.

I noticed that the page only gets refreshed when I actually save the file and not because of the Ajax POST action in general.

This is what I have so far:

Controller:

[HttpPost]
public JsonResult SaveImage(string imageString)
{

    string base64 = imageString.Substring(imageString.IndexOf(',') + 1);

    base64 = base64.Trim('\0');
    byte[] img = Convert.FromBase64String(base64);

    Image image;

    using (MemoryStream ms = new MemoryStream(img))
    {
        image = Image.FromStream(ms);

        image.Save(Server.MapPath("~/Template/Contract/lgeber.png"), System.Drawing.Imaging.ImageFormat.Png);
    }

    return Json("OK");
}

As soon as image.Save is executed the page refreshes.

Jquery:

$('#saveSignLgeber').on("click", function () {
    var signLgeber = $("#signLgeber").ejSignature("instance");
    lgeberImageString = signLgeber.storeSnap[signLgeber.storeSnap.length - 1]

    $.ajax({
        url: "/Doc/SaveImage",

        type: "POST",
        data: JSON.stringify({ imageString: lgeberImageString }),
        processData: false,
        contentType: 'application/json'
    });

    $('#signLgeberModal').modal('hide');
    $('#signLnehmerModal').modal('show');
});

What I have tried:

I tried to add a

<form>

to my code and use

function(e){ 
    e.preventDefault() 
}

I also tried to use a onclick=return false; to the button and set button type to button.
Nothing works. It still refreshes the page all time.

Any idea?