Umbraco MailChimp Angularjs Ajax Form Post to WebAPI. Clean App_Code and 100% control of everything.

formHtml.cshtml

@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>

FormMailChimpController.cs

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);
            }
          
        }

     

    }
}

myscript.js

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