Scenario: I have an application being built in Visual Studio using ASP.NET. The application is being hosted on an IIS server. In the application there is an asp.net page with mostly html elements that references a javascript file that allows the user to draw a signature in a canvas and then submit it with an email.
The Goal with this is to have a webpage that allows the user to give their email and signature, click accept, and send that data to the C# method that will attach the signature and email it to the address.
I have tried multiple ways and done some good ajax research but have had no luck. I can't see any errors in the Visual Studio debugger. When i click the send button the text changes to Sending... but never goes further. I have yet to complete and write out the email portion of the method. At this point i just want to be able to pass in the JSON object with the email and canvas image. and somehow display the email (just to verify it was sent through).
What might i be doing wrong here? I'm thinking my issue lies in the ajax statement in the application.js, but have tried multiple ways of sending with no luck.
EDIT::: I am receiving the error code from the POST statement like
Internal Server Error
jquery-1.7.min.js:4 POST http://localhost:port#/SigCapture.aspx/SendMail 500 (Internal Server Error)
send @ jquery-1.7.min.js:4
ajax @ jquery-1.7.min.js:4
onSubmitClick @ application.js:28
dispatch @ jquery-1.7.min.js:3
i @ jquery-1.7.min.js:3\
Update: I have received a new error after making the WebMethod a public static method so it can be seen by the ajax statement.
{Message: "Invalid JSON primitive: method.",…}
ExceptionType
:
"System.ArgumentException"
Message
:
"Invalid JSON primitive: method."
Here is the code:
NAME: SigCapture.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SigCapture.aspx.cs" Inherits="mytest.SigCapture" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="assets/styles.css" />
<title>Signature Capture</title>
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/modernizr.custom.34982.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>
<script src="js/signatureCapture.js" type="text/javascript"></script>
</head>
<body>
<form id="mainform" runat="server">
<img src="assets/phonegap.png" alt=""/>
<asp:Button ID="btn1" runat="server" Text="Clickme" OnClick="btn1_Click" />
<h2 runat="server">SAMPLE FORM</h2>
<asp:Label id="labeltext" runat="server" Text="Enter your email and `Sign the form"/>`
</form>
<h2>EMAIL</h2>
<input id="email" type="email" />
<p id="text"></p>
<h2>SIGNATURE</h2>
<div id="canvasContainer" width="100%">
<canvas id="signature" height="200px" />
</div>
<div id="lowerControls">
<div id="feedback"></div>
<div id="buttonsContainer">
<input type="image" id="submit" src="assets/accept.png" />
<input type="image" id="cancel" src="assets/cancel.png" />
</div>
</div>
</body>
</html>
NAME: SigCapture.apsx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace mytest
{
public partial class SigCapture : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btn1_Click(object sender, EventArgs e)
{
labeltext.Text = "DER_";
}
public void test(object sender, EventArgs e, string name)
{
labeltext.Text = "DER_";
}
[WebMethod]
public string SendMail(object data)
{
return data.ToString();
}
}
}
NAME: application.js
// JavaScript Document
var sigCapture = null;
$(document).ready(function(e) {
sigCapture = new SignatureCapture( "signature" );
$("#submit").click( onSubmitClick );
$("#cancel").click( onCancelClick );
});
function onSubmitClick( event ) {
if ( verifyEmail() )
{
$("#text").html("CLICKED");
$("#feedback").html( "Sending..." );
var email = $("#email").val();
var sig = sigCapture.toString();
var data = { "method":"submitSignature",
"email":email,
"signature":sig,
"returnformat":"json" };
var url = 'SigCapture.aspx/SendMail';
$.ajax({
type: 'POST',
url: url,
data: data,
contentType: 'application/json; charset=utf-8',
datatype: 'json',
success: requestSuccess,
error: requestError
});
}
else {
$("#feedback").html( "Please enter a valid email address." );
}
}
function onCancelClick( event ) {
clearForm();
}
function clearForm() {
$("#email").val( "" );
sigCapture.clear();
$("#feedback").html( "" );
}
function requestSuccess( data, textStatus, jqXHR ) {
clearForm();
$("#feedback").html( "Thank you." );
}
function requestError( jqXHR, textStatus, errorThrown ) {
$("#feedback").html( "Error: " + errorThrown );
}
function verifyEmail() {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test( $("#email").val() );
}
