Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Umbraco MailChimp Angularjs Ajax Form Post to WebAPI. Clean App_Code and 100% control of everything.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<div ng-app="app">
<div ng-controller="MailChimpController">
<form name="form" novalidate ng-hide="returnmessage.status == 'OK' || returnmessage.status == 'FEJL_EMAIL'">
<label> E-mail (krævet):</label>
<input type="email" ng-model="user.email" name="email" required />
<span ng-show="form.email.$dirty && form.email.$invalid">
<p>
<span ng-show="form.email.$error.required">Email missing</span>
<span ng-show="form.email.$error.email">Dont you know email format?</span>
</p>
</span>
<button ng-click="postForm()" ng-disabled="form.$invalid" class="btn btn-default">
Send this please
</button>
</form>
<div class="ng-cloak" ng-show="returnmessage">
<div ng-switch="returnmessage.status">
<div ng-switch-when="OK">
<h3>Hello {{returnmessage.form.navn}}</h3>
</div>
<div ng-switch-default>
<h3> Darn it {{returnmessage.form.navn}} </h3>
</div>
</div>
</div>
</div>
</div>
using MailChimp;
using MailChimp.Helper;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.ServiceModel.Channels;
using System.Web;
using System.Web.Http;
using Umbraco.Web.WebApi;
// Install-Package MailChimp.NET
// Install-Package Angularjs
// Put this in App_Code
namespace jesper
{
// The form values that is required.
// Data annotations:
// http://www.asp.net/mvc/overview/older-versions-1/models-%28data%29/validation-with-the-data-annotation-validators-cs
public class FormModel {
[Required(ErrorMessage = "Email required")]
[EmailAddress(ErrorMessage = "Really? Syntax error? Really?")]
public string email { get; set; }
}
// WebAPI Umbraco style ...
public class FormMailChimpController : UmbracoApiController
{
// Takes the hit from Javascript
[HttpPost]
public string Post([FromBody]FormModel formValues)
{
if (ModelState.IsValid)
{
string apikey = "findyourownapikeyok?";
string listid = "51e72ds5307";
MailChimpManager mc = new MailChimpManager(apikey);
// Create the email parameter
EmailParameter email = new EmailParameter()
{
Email = formValues.email
};
EmailParameter results = mc.Subscribe(listid, email, doubleOptIn: false, sendWelcome: false);
var rsp = new
{
mailchimpResult = results,
status = "OK",
addanyreturnvaluehere = DateTime.Now,
form = formValues // passing back the form values ...
};
return JsonConvert.SerializeObject(rsp);
}
else {
// neeee this was not good. We actually only get here if the client side validation failed or isnt properly setup.
var rsp = new
{
status = "ERRORVALIDATION",
form = formValues
};
return JsonConvert.SerializeObject(rsp);
}
}
}
}
var app = angular.module('app', []);
app.controller("MailChimpController", ['$scope', '$http', function ($scope, $http) {
$scope.user = {};
// posting user form
$scope.postForm = function () {
$http.post('/Umbraco/Api/FormMailChimp/Post', $scope.user).success(function (data, status, headers, config) {
var x = angular.fromJson(data); // converts json string to javascript object
if (x.status == "OK") {
$scope.returnmessage = x; // throw it all back
} else {
$scope.returnmessage = x; // doing the same .. but ... we could have done it differently. But we didnt did we. Just an example
}
}).error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
// Work on this ... alerts sucks
alert('Errors');
});
} // post
}]) // controller
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.