Skip to content

Instantly share code, notes, and snippets.

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="" name="email" required />
<span ng-show="$dirty &&$invalid">
<span ng-show="$error.required">Email missing</span>
<span ng-show="$">Dont you know email format?</span>
<button ng-click="postForm()" ng-disabled="form.$invalid" class="btn btn-default">
Send this please
<div class="ng-cloak" ng-show="returnmessage">
<div ng-switch="returnmessage.status">
<div ng-switch-when="OK">
<h3>Hello {{returnmessage.form.navn}}</h3>
<div ng-switch-default>
<h3> Darn it {{returnmessage.form.navn}} </h3>
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:
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
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 =
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
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 () {
$'/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
} // 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.