I have simple user form for sending emails. When the user submits the form its data is passed to a webmethod (called "SendParameters") which handles server side email processing.
The code below works fine locally but when I deploy this to my remote host I get http://simoneduca.com/Default.aspx/SendParameters 500 Internal Server Error.
This is my call in app.js
var myApp = angular.module('MyApp', ['ngMessages', 'ngAnimate']);
myApp.controller('FormCtrl', function ($scope, $http, $timeout) {
$scope.master = {};
$scope.reset = function () {
$scope.user.name = "";
$scope.user.emailAddress = "";
$scope.user.subject = "";
$scope.user.message = "";
$scope.contactForm.$setPristine();
$scope.contactForm.$setUntouched();
};
$scope.submit = function (user) {
$scope.master = angular.copy(user);
$http({
method: "POST",
url: "Default.aspx/SendParameters",
headers: { 'Content-Type': 'application/json; charset=utf-8' },
data: JSON.stringify($scope.master)
}).success(function (data, status, header) {
$scope.resultMessage = data.d;
$scope.showMessage = true;
$timeout(function () {
$timeout(function () {
$scope.showMessage = false;
}, 2000);
}, 3000);
console.log('data.d: ', data.d)
console.log('status: ', status)
console.log('headers: ', header)
console.log('data: ', data)
$scope.reset();
});
};
});
This is my html form in index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>FORM</h1>
<div class="cform" id="contact-form">
<form role="form" id="contactForm" ng-controller="FormCtrl" name="contactForm" novalidate>
<div class="form-group" ng-class="{'has-error': contactForm.name.$invalid && contactForm.name.$dirty}">
<label for="name">Your Name</label>
<input type="text" runat="server" name="name" class="form-control" id="name" placeholder="Your Name" ng-model="user.name" ng-minlength="3" ng-maxlength="30" required />
<div ng-messages="contactForm.name.$error" class="error" ng-if="contactForm.name.$dirty" ng-messages-include="error-messages.html">
</div>
</div>
<div class="form-group" ng-class="{'has-error': contactForm.emailAddress.$invalid && contactForm.emailAddress.$dirty}">
<label for="emailAddress">Your Email</label>
<input type="email" id="email" placeholder="Your Email" class="form-control" name="emailAddress" ng-model="user.emailAddress" ng-minlength="5" ng-maxlength="30" required />
<div ng-messages="contactForm.emailAddress.$error" class="error" ng-if="contactForm.emailAddress.$dirty" ng-messages-include="error-messages.html">
</div>
</div>
<div class="form-group" ng-class="{'has-error': contactForm.subject.$invalid && contactForm.subject.$dirty}">
<label for="subject">Subject</label>
<input type="text" ng-model="user.subject" class="form-control" name="subject" id="subject" placeholder="Subject" required />
<div ng-messages="contactForm.subject.$error" class="error" ng-if="contactForm.subject.$dirty" ng-messages-include="error-messages.html">
</div>
</div>
<div class="form-group" ng-class="{'has-error': contactForm.message.$invalid && contactForm.message.$dirty}">
<label for="message">Describe your project</label>
<textarea class="form-control" ng-model="user.message" id="message" name="message" rows="5" required></textarea>
<div ng-messages="contactForm.message.$error" class="error" ng-if="contactForm.message.$dirty" ng-messages-include="error-messages.html">
</div>
</div>
<button id="sendEmail" runat="server" ng-click="submit(user)" type="submit" ng-disabled="contactForm.$invalid" class="btn btn-theme pull-right">SEND</button>
<button type="button" ng-click="reset()" class="btn">Reset</button>
<div ng-show="showMessage" class="feedback">{{ resultMessage }}</div>
</form>
</div>
</body>
</html>
And this is my web method in Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Net;
using System.Net.Mail;
using System.Web.Services;
namespace SimoWebTest1
{
public partial class singlePage : System.Web.UI.Page
{
[WebMethod]
public static string SendParameters(string name, string emailAddress, string subject, string message)
{
if (string.IsNullOrEmpty(emailAddress) || string.IsNullOrEmpty(subject) || string.IsNullOrEmpty(message))
{
return string.Format("Please complete the form.");
}
else
{
try
{
SmtpClient client = new SmtpClient();
client.Port = 80;
client.Host = "smtpout.europe.secureserver.net";
client.EnableSsl = false;
client.Timeout = 10000;
client.DeliveryMethod = SmtpDeliveryMethod.Network;
client.UseDefaultCredentials = false;
client.Credentials = new System.Net.NetworkCredential("iam@simoneduca.com", "password");
MailMessage mm = new MailMessage(emailAddress, "iam@simoneduca.com", subject, message);
mm.BodyEncoding = System.Text.UTF8Encoding.UTF8;
mm.DeliveryNotificationOptions = DeliveryNotificationOptions.OnFailure;
client.Send(mm);
return string.Format("Your message has been sent. Thank you {0}!", name);
}
catch (Exception)
{
//return string.Format("Inner Exception: {0}.<br/>Message: {1} ", ex.InnerException, ex.Message);
return string.Format("Oops, your message could not be sent. Please retry.");
}
}
}
}
}
I have tried to change application/json; charset=utf-8 to application/x-www-form-urlencoded; charset=utf-8
and data: JSON.stringify($scope.master) to data: $.param($scope.master).
This seemed to improve the situation: status 200 is returned, but instead of a JSON string, as expected, the whole html page is returned.
Does anyone know why?
I also tried to use the Angular shortcut method in my submit function and to change the format of how the data is passed to url parameters
var transform = function (user) {
$scope.master = angular.copy(user);
return $.param($scope.master);
}
$scope.submit = function (user) {
$scope.master = angular.copy(user);
$http.post("Default.aspx/SendParameters", $scope.master, {
headers: { 'Content-Type': 'application/json; charset=UTF-8' },
transformRequest: transform
}).success(function (data, status, header) {
$scope.resultMessage = data.d;
$scope.showMessage = true;
$timeout(function () {
$timeout(function () {
$scope.showMessage = false;
}, 2000);
}, 3000);
console.log('data.d: ', data.d)
console.log('status: ', status)
console.log('headers: ', header)
console.log('data: ', data)
$scope.reset();
});
};
Last but not least, I also phone up Godaddy (my hosting provider) to ask if they support Json extensions and they said they don't.
Could that be the issue? Is there a way to get round it?
I thought a Plunker would be helpful but the call fails: 400 Bad Request.
