call javascript function and use the returned result in .net code

Question

I have been looking for a way to call the javascript function from my default.aspx.cs file...after reading some questions here, i discovered this approach( Call JavaScript function from C# ) However I need to use the returned value from javascript function in my .net code.

I need to grab users input on canvas and save it to an image and append that image to a pdf file.

Here is the js function:

    getSignatureImage: function () {
    var tmpCanvas = document.createElement('canvas')
      , tmpContext = null
      , data = null

       tmpCanvas.style.position = 'absolute'
       tmpCanvas.style.top = '-999em'
       tmpCanvas.width = element.width
       tmpCanvas.height = element.height
       document.body.appendChild(tmpCanvas)

       if (!tmpCanvas.getContext && FlashCanvas)
           FlashCanvas.initElement(tmpCanvas)

           tmpContext = tmpCanvas.getContext('2d')


           tmpContext.fillStyle = settings.bgColour
           tmpContext.fillRect(0, 0, element.width, element.height)
           tmpContext.lineWidth = settings.penWidth
           tmpContext.strokeStyle = settings.penColour

           drawSignature(output, tmpContext)
           data = tmpCanvas.toDataURL.apply(tmpCanvas, arguments)

           document.body.removeChild(tmpCanvas)
           tmpCanvas = null

           return data
        }

Here is the pdf generating code in my default.aspx.cs:

        document.SetMargins(20f, 20f, 85f, 20f);
        long milliseconds2 = DateTime.Now.Ticks / TimeSpan.TicksPerMillisecond;
        //Document document = new Document();
        var output = new FileStream(Server.MapPath("~/PDFs/Test-File-" + milliseconds2 + ".pdf"), FileMode.Create);
        pdfUrlLink = "Test-File-" + milliseconds2 + ".pdf";
        var writer = PdfWriter.GetInstance(document, output);

        // the image we're using for the page header      
        iTextSharp.text.Image imageHeader = iTextSharp.text.Image.GetInstance(Request.MapPath(
        "~/Images/pdfHeader.jpg"
        ));

        // instantiate the custom PdfPageEventHelper
        MyPageEventHandler ex = new MyPageEventHandler()
        {

            ImageHeader = imageHeader
        };
        // and add it to the PdfWriter
        writer.PageEvent = ex;
        document.Open();
        createContent();
        document.Close();
        submitEmail(); 
          }
    }

This is the modified code from other questions to integrate both world together:

        string SignData = null;
        Page page = HttpContext.Current.CurrentHandler as Page;
        page.ClientScript.RegisterStartupScript(typeof(Page), "Test", "<script type='text/javascript'>" + SignData +"=getSignatureImage();</script>");

It doesn't work...Any help or input will be appreciated!

Answer 1

You don't want to call the javascript function from your C# code. What you want to do is post the data from your javascript function to your web app so your C# code can handle it.

The client HTML where the canvas is would have a button that when clicked calls your javascript to get the dataUrl from the canvas and puts the it in a form field - like a hidden input or something - and then submits the form.

Your C# code would pull the value out of the Request.Form collection. The value is a Base64 encoded image so you'll need to convert it to a bitmap and then use it in your PDF output.

Here's a quick fiddle that demonstrates: http://jsfiddle.net/LSRYG/

function submitImage(){
    var url = document.getElementById('canv').toDataURL();
    //this will show you the image data but you won't actually want to do this.  It's just for the demo
    alert(url);
    //put it in the hidden imput and submit the form.
    document.getElementById('canvImg').value = url;

    document.getElementById('theform').submit();
}

I'm sure you can find out how to convert the dataURL string to an image in your C# code.

Answer 2

What you found is how you can run tell the browser to run Javascript on the page load within an ASP.NET application.

What I think you're looking for is a Javascript compiler within .NET. A quick google led me to this link: Embedding JavaScript engine into .NET

Answer 3

can you change whatever control causes the postback to just run some javascript? Then you can just call a __dopostback with getSignatureImage() as the event argument and figure it out from there.

Basically have something with an onclick="SendEmail();" with function SendEmail{ _doPostBack([controlClientID], getSignatureImage()); } function SendEmail{ _doPostBack([controlClientID], getSignatureImage()); } then on your pageload/ifpostback check for __EVENTTARGET(first param) == whatever client id, and if it matches, do your processing of __EVENTARGUMENT(second param) which will be your getSignatureImage() results

either that or make a webmethod or service to send the email with the getSignatureImage() results