Angular.NET – Helpers for ASP .NET MVC 4

ASP .NET MVC is a great web-server framework and, in my opinion, a HUGE improvement over regular ASP .NET WebForms. Among many features, it has routing, helper methods to generate views, declarative model validation (data annotations), automatic model binding for different media types (with model validation), support for dependency injection, etc.

On the other hand, AngularJS is a great client-side framework that helps you to create professional applications using JavaScript. It’s loaded with features such as client-side routing, directives for custom behavior like model binding (ngModel) and model validation, filters, message dispatcher, dependency injection, etc.

Currently, creating HTML forms with model bindings and the respective validations and error messages for each field in the form can be a tedious, error-prone task. Suppose we have the following model class:

using System;
using System.ComponentModel.DataAnnotations;

public class Person
{
    public int Id { get; set; }

    [Required]
    [StringLength(25)]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [Required]
    [StringLength(25)]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }
}

Let’s look at an example of how you would create a simple but fully functional form (with validations) in AngularJS for this model (for more information, see the form and ngModel directives):

<form autocomplete="off" class="form-horizontal ng-cloak" id="personalForm" method="POST" name="personalForm" ng-submit="save(personalForm)" novalidate>
    <div class="control-group" ng-class="{ error: personalForm.FirstName.$invalid && personalForm.FirstName.$dirty }">
        <label class="control-label" for="FirstName">First Name</label>
        <div class="controls">
            <input autofocus id="FirstName" name="FirstName" ng-maxlength="25" ng-model="FirstName" required type="text" />
            <span class="help-inline" ng-show="personalForm.FirstName.$error.required && personalForm.FirstName.$dirty">The First Name field is required.</span>
            <span class="help-inline" ng-show="personalForm.FirstName.$error.maxlength && personalForm.FirstName.$dirty">The field First Name must be a string with a maximum length of 25.</span>
        </div>
    </div>
    <div class="control-group" ng-class="{ error: personalForm.LastName.$invalid && personalForm.LastName.$dirty }">
        <label class="control-label" for="LastName">Last Name(s)</label>
        <div class="controls">
            <input id="LastName" name="LastName" ng-maxlength="25" ng-model="LastName" required type="text" />
            <span class="help-inline" ng-show="personalForm.LastName.$error.required && personalForm.LastName.$dirty">The Last Name(s) field is required.</span>
            <span class="help-inline" ng-show="personalForm.LastName.$error.maxlength && personalForm.LastName.$dirty">The field Last Name(s) must be a string with a maximum length of 25.</span>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button class="btn btn-primary" type="submit">Save</button>
            <button class="btn" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </div>
</form>

Now, that was only a form with two fields (I know, I have a several rules and validation messages, but it’s a real-world case). This works like a charm but, as you can see, it requires a great deal of maintenance effort. You need to add all the validation directives, the appropriate help messages and the rules for when to display/hide them. You will need to be careful to keep you form validations in sync with your server side models if any of the following occur:

  • The names of your model properties are modified.
  • The validations for a specific property are added/removed.
  • The values for such validations are changed (for example, the max value for a number or the max length for a string field)

That’s a lot work for me. Since I’m too lazy for all that, I thought there must be something that could save me some time when coding and maintaining my code. It turns out there is a great ASP .NET MVC feature that could come to the rescue: HTML helper extension methods. So, inspired by a solution that I used for Knockout some time ago (Knockout MVC) and by ASP .NET MVC’s jQuery unobtrusive validation, I created a small library for AngularJS that integrated both features (binding and validation generation).

Using this library, the same view can be created in Razor as follows:

@using AxSoft.Angular.Net

@model AxSoft.Model.Person
@using (var form = Html.BeginAngularForm("personForm", "save", "person", new { @class = "form-horizontal ng-cloak" }))
{
    <div class="control-group" @form.NgClassError(m => m.FirstName)>
        @form.Label(m => m.FirstName)
        <div class="controls">
            @form.TextBox(m => m.FirstName, new { autofocus = "" })
            @form.ValidationsFor(m => m.FirstName, true)
        </div>
    </div>
    <div class="control-group" @form.NgClassError(m => m.LastName)>
        @form.Label(m => m.LastName)
        <div class="controls">
            @form.TextBox(m => m.LastName)
            @form.ValidationsFor(m => m.LastName, true)
        </div>
    </div>
    
    <div class="control-group">
        <div class="controls">
            <button class="btn btn-primary" type="submit">Save</button>
            <button class="btn" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </div>
}

A few things to note:

  • You need to import the AxSoft.Angular.Net (or add it to the namespaces node of you web.config file under the Views folder).
  • You have to declare the model type for the extension methods to work properly. Note that this declaration only acts as an indication of the type of model you want to get the properties from, but you don’t need to pass an actual model instance to the view.
  • You can create a form almost exactly as you would using the Html.BeginForm method, supplying the following values:
    • A form name: this will be used for the validation message conditions; also, AngularJS will create a property on your controller’s scope with the same name as the form.
    • The name of the method to be invoked when the form is submitted (optional); this is used to output the ng-submit directive in the form ng-submit="nameOfMethod(nameOfForm)". The form instance is passed to the method so that you can check the validity of the form through form.$valid. The default value is "save"
    • The name of the scope property that will hold the model object (optional).
    • An object or dictionary instance containing custom HTML attributes to be set on the form (optional).

The invocation of Html.BeginAngularForm will return a generic AngularForm object which you can use to create your form controls and bindings.

You can create controls for specific model properties using the methods TextBox, Hidden, TextArea, Password, RadioButton, CheckBox, and Dropdown. These methods will output the corresponding ngModel directive as well as all the registered validations found in the ValidationAttribute‘s of the property.

The method ValidationsFor will generate span elements for each registered validation for the property. Each element will have a CSS class with the value you specify in the AngularConfiguration.HelpCssClass property (the default is "help-inline").

The method Label is similar to Html.LabelFor, with the only advantage of creating a for attribute that will match the id attribute of the control generated for the same property.

Lastly, the method NgClassError will output an ng-class directive that will activate the error CSS class of the element when any of the validations for that property fail to pass. The name of this class will be given by the value of the AngularConfiguration.ErrorCssClass property (the defautl is "error").

Interested? Grab the code from Github and play with it. Any feedback is welcome.

In a future tutorial: how to extend the validation mechanism with custom validation attributes and directives. Stay tuned.

Advertisements

Using XSLT as email template engine in C#

Email has been (and will be for some time) one of the main means to communicate with your customers and perform various core business and security tasks (such as confirming a newly created accounts, helping a user reset their lost password, notify updates and required actions, etc.). These emails usually consist of static sections and some dynamic parts that are specific to the user receiving the email.

Sometimes, a simple string replacement approach works to achieve such goal (that’s what I used to do before). But if you need something more elegant and powerful than that, a good option would be using XSLT. I am no XSLT expert and I won’t talk about it in this post, but I encourage you to learn about it if you don’t already know. In order to follow the principle of separation of concerns and improve testability, the solution is separated into four components with their corresponding interface (contract):

  • A XSLT template compiler (ITemplateCompiler). A simple wrapper that uses cached XslCompiledTransform‘s.
  • An email sender (IEmailSender). Another wrapper, in this case, around the SmtpClient. This is abstracted away in order to mock the actual sending of the email when testing (dump the result to console or to a text file, etc.).
  • A custom XML serializer (IXmlSerializer). Why not use the built in XML serializer? Simple: it doesn’t work with anonymous objects. Sometimes we want to pass our variables without having to explicitly create a class for it. In case you do want to use the regular serializer, you can always create a wrapper that implements IXmlSerializer.
  • A template email sender (ITemplateEmailSender). Integrates all the above mentioned services.

The XSLT compiler

Not much to say about it. It will accept an input XML stream (this would be your variables object serialized as XML), an XSLT file path (or stream), and an output stream to dump the resulting transformation. If you use the overload that accepts the XSLT file path, the XslCompiledTransform object will be cached.

The email sender

Again, as simple as it sounds. Just to decouple the actual sending of the email. In the example, I dump the result to an HTML file called output.html.

The XML Serializer

For the custom XML serializer, I borrowed Martin Normark‘s solution, but made some modifications to it, mainly allowing for the serialization of any kind enumerable, not only arrays.

Basically, it will turn any object into XML following these rules:

  1. If no root element name is provided, “object” will be used.
  2. All properties will be serialized as XML nodes with the same name as the property.
  3. For collection properties, the main node will be named after the property, and the child nodes will have the same name with the suffix “Item” appended.

The template email sender

This is the one that puts all together, and has dependencies to everything else. It only has a Send method (and its async counterpart). You’ll notice that it does not accept a from parameter. That’s because you usually handle that in the SMTP configuration part of your project’s web.config or app.config. If you need it, just go ahead and add it.

Additionally, this service has a LayoutFilePath property. Inspired by ASP .NET’s layout (or master) pages, only much simpler, this allows to have a base, static HTML content file where you can put the frame and layout that is common to all the emails that you will send. If this property is null, then the output will be only what results from the XSLT transformation. The only requirement for your layout file is that you need to include the following wherever you want the content placed:

<!-- Content -->

For example:

<html>
<head>
</head>
<body>
<div style="height: 10px; font-size: 10px; line-height: 10px;">&nbsp;</div>
<table width="602" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td>
<!-- Content --></td>
</tr>
</tbody>
</table>
<div style="height: 10px; font-size: 10px; line-height: 10px;">&nbsp;</div>
</body>
</html>

Putting it all together

var templateDirectory = Path.Combine(Environment.CurrentDirectory, "Templates");
var layoutFile = Path.Combine(templateDirectory, "layout.html");
var xsltFilePath = Path.Combine(templateDirectory, "ActivateAccount.xslt");
var variables = new
{
FirstName = "Axel",
LastName = "Zarate",
Username = "azarate",
Logo = "http://www.logotree.com/images/single-logo-design/logo-design-sample-14.jpg",
ActivationLink = "http://localhost/Account/Activate/azarate"
};

var templateEmailSender = new TemplateEmailSender(emailSender, templateCompiler, xmlSerializer)
{
LayoutFilePath = layoutFile
};

templateEmailSender.Send(xsltFilePath, variables, "axel.zarate@mail.com", "This is a template test");

Advice: To maximize email viewing compatibility across different clients, use regular tables for layout and old HTML attributes for appearance (width, bgcolor, etc.).

Check out the source code and sample.

Model validation filter in ASP .NET Web API

Most Web applications need to be able to accept and save data, and any serious application must perform all sorts of validations before taking information and attempt to store it. Luckily for us (.Net developers at least), the days of manual, imperative validation are gone for good.

Thanks to Data Annotations, model validation and error messages have become easy and consistent. We can pick from the built in validation attributes in the System.ComponentModel.DataAnnotations namespace (such as RequiredAttribute, StringLengthAttribute, CompareAttribute) or roll our own, and then declare our intention to validate our objects properties by decorating them with the corresponding attributes. This validation mechanism is plugged right into the core of ASP NET MVC and Web API, so we can check right away if a model entity passed to a controller action is valid or not:

// MyModel.cs file
using System.ComponentModel.DataAnnotations;

public class MyModel
{
	[Required(ErrorMessageResourceType = typeof(Resources), ErrorMessageResourceName = "MyModel_Name")]
	public string Name { get; set; }

	[EmailAddress]
	public string Email { get; set; }
}

// MyController.cs file
using System.Web.Http;

public class MyController : ApiController
{
	public HttpResponseMessage Post(MyModel model)
	{
		if (ModelState.IsValid)
		{
			// Work with the object
			_repository.Save(model);
			return new HttpResponseMessage(HttpStatusCode.OK);
		}
		else
		{
			var errors = ModelState.Values.SelectMany(v => v.Errors.Select(e => e.ErrorMessage)).ToArray();
			return Request.CreateResponse(HttpStatusCode.BadRequest, new { errors });
		}
	}
}

Easy, huh? But, if you are as lazy (or practical) as me, and don’t want to keep checking your model validity in every action, you can centralize that logic in only one place and then apply it wherever you like. Just create an ActionFilterAttribute:

using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http.Controllers;
using System.Web.Http.Filters;

public class ModelValidationFilterAttribute : ActionFilterAttribute
{
	public override void OnActionExecuting(HttpActionContext actionContext)
	{
		if (!actionContext.ModelState.IsValid)
		{
			var errors = actionContext.ModelState.Values.SelectMany(v => v.Errors.Select(e => e.ErrorMessage)).ToArray();
			actionContext.Response =
				actionContext.Request.CreateResponse(HttpStatusCode.BadRequest, new { errors });
		}
	}
}

And on your controllers:

public class MyController : ApiController
{
	[ModelValidationFilter]
	public HttpResponseMessage Post(MyModel model)
	{
		// No need to check for validity (if model is not valid, the method will not be called)
		_repository.Save(model);
	}
}

Parameter validation in ASP .NET MVC 4

Routing in ASP .NET MVC is a great feature. Among other things, it lets you create stateless applications more easily and in a more elegant way and break away from practices that rely on cookies/session variables. If you have a controller action like the following:

public class SiteController : Controller
{
	public ActionResult News(int id)
	{
		// Do some interesting stuff with that id parameter
	}
}

And if you leave the default route that comes with most MVC project templates, you will have that action automatically respond to a route (read URL) like /Site/News/1. How cool is that?

However, there’s a small catch in the route-matching mechanism. If the route is requested with an invalid id parameter (as in /Site/News/blah) or a missing one (/Site/News) you will get an awful error:

System.ArgumentException: The parameters dictionary contains a null entry for parameter ‘id’ of non-nullable type ‘System.Int32’ for method ‘System.Web.Mvc.ActionResult News(Int32)’ in ‘Tbt.Controllers.SiteController’. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.

Yep, that’s a 500 (Internal Server Error) page. That’s basically because the routing engine could find the controller and the action but had trouble parsing the parameter (that happens to be a value type). That might not sound like a big deal (and probably isn’t in most projects); after all, who will be using our web app’s URLs in ways they’re not intended to be used? Well, in my experience, search engines’ crawlers seem to do that. And if good SEO is a concern, you might not want to make the search engines “think” your app crashes for no apparent reason.

Of course, there’s an easy, straightforward way to fix that. You guessed right: make the parameters nullable.

public class SiteController : Controller
{
	public ActionResult News(int? id)
	{
		if (!id.HasValue)
		{
			// Redirect or return the appropriate HTTP code here
		}
		int realId = id.Value;
		// Do some interesting stuff with the realId variable
	}
}

However, depending on the amount of actions the application may have, this can become a cumbersome, tedious task and can distract us from our main goal: write awesome code. That’s what made me look for a better solution, and this is what I came up with.

Using the ActionMethodSelectorAttribute class

According to the MSDN documentation, the ActionMethodSelectorAttributeRepresents an attribute that is used to influence the selection of an action method“. And that’s exactly what we will do: intercept the request and make sure it fulfills all the requirements (in this case, having valid values for all non-nullable parameters); if not, the app will automatically issue a 404 (Not found) HTTP status code and our action method will not be called. Here’s the code:

Update (2015-05-27): Added default value check as suggested by Steven Sproat.

using System;
using System.Reflection;
using System.Web.Mvc;

public class NonNullableParametersAttribute : ActionMethodSelectorAttribute
{
	public override bool IsValidForRequest(ControllerContext controllerContext, MethodInfo methodInfo)
	{
		var methodParams = methodInfo.GetParameters();

		foreach (var parameterInfo in methodParams)
		{
			if (parameterInfo.HasDefaultValue)
			{
				continue;
			}

			var paramType = parameterInfo.ParameterType;
			if (!IsSimpleType(paramType))
			{
				continue;
			}

			var value = controllerContext.Controller.ValueProvider.GetValue(parameterInfo.Name);
			if (value == null || value.AttemptedValue == null || !CanParse(value.AttemptedValue, paramType, value.Culture))
			{
				return false;
			}
		}

		return true;
	}

	private static bool IsSimpleType(Type t)
	{
		return t.IsPrimitive || t.IsEnum || t == typeof(Decimal) || t == typeof(DateTime) || t == typeof(Guid);
	}

	private static bool CanParse(object rawValue, Type destinationType, IFormatProvider formatProvider)
	{
		try
		{
			var test = Convert.ChangeType(rawValue, destinationType, formatProvider);
			return test != null;
		}
		catch
		{
			return false;
		}
	}
}

Then, we decorate our action methods like so:

[NonNullableParameters]
public ActionResult News(int id)
{
	// Do your stuff using that id parameter
}

The NonNullableParametersAttribute will handle any number of parameters of primitive type (int, double, etc) and some non-primitive value types (decimal, DateTime, Guid) for you.

Exporting to CSV in C#

Every once in a while, our application is required to export the data it generates to some sort of format. CSV (comma-separated values) is one of the most popular formats to export/import data.

As the first post of my blog, I will show you a quick way to generate a CSV  file from a generic collection of objects in C#.

Suppose you have a domain object like the following:

using System;
using System.ComponentModel.DataAnnotations;

public class UserDto
{
	public int Id { get; set; }

	[Display(ResourceType = typeof(ModelStrings), Name = "Username", Order = 1)]
	public string Username { get; set; }

	[Required]
	[Display(ResourceType = typeof(ModelStrings), Name = "FirstName", Order = 2)]
	public string FirstName { get; set; }

	[Required]
	[Display(ResourceType = typeof(ModelStrings), Name = "LastName", Order = 3)]
	public string LastName { get; set; }

	[Display(ResourceType = typeof(ModelStrings), Name = "Status", Order = 4)]
	public bool IsActive { get; set; }

	[Display(ResourceType = typeof(ModelStrings), Name = "LastLogin", Order = 5)]
	public DateTime? LastLogin { get; set; }
}

Note: The code above assumes there exists a resource file called ModelStrings with all the specified entries (Username, FirstName, etc.)

Then we can convert a collection of such objects (or objects of any class) using this helper class:

Update (8/7/2014): Based on Goody’s feedback, I decided to add code to handle special characters properly.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Text;

namespace AxSoft.Data
{
    public static class CsvHelper
    {
        private const string Quote = "\"";
        private const string EscapedQuote = "\"\"";
        private static readonly char[] EscapableCharacters = { '"', ',', '\r', '\n' };

        public static void ToCsv<T>(IEnumerable<T> collection, Stream stream, params string[] onlyFields) where T : class
        {
            Dictionary<PropertyInfo, string> fieldNames = null;
            var sw = new StreamWriter(stream, Encoding.UTF8);

            foreach (var item in collection)
            {
                // Only on the first iteration we get the list of properties from the object type
                // We use a dictionary of <PropertyInfo, string> instead of just a list of PropertyInfo, 
                // because we extract the display name of the property (if exists) to use it as the "column" header
                if (fieldNames == null)
                {
                    fieldNames = GetProperties(typeof(T), onlyFields);
                    // Write the column headers
                    WriteRow(sw, fieldNames.Select(v => v.Value));
                }

                var current = item;
                var valueList = fieldNames.Keys.Select(prop => prop.GetValue(current, null))
                    .Select(Convert.ToString);

                WriteRow(sw, valueList);
            }

            // Reset the stream position to the beginning
            stream.Seek(0, SeekOrigin.Begin);
        }

        private static Dictionary<PropertyInfo, string> GetProperties(Type type, string[] onlyFields)
        {
            var properties = type.GetProperties(BindingFlags.Public | BindingFlags.Instance | BindingFlags.FlattenHierarchy)
                                 .Where(prop => IsSimpleOrNullableType(prop.PropertyType))
                                 .OrderBy(prop =>
                                     {
                                         var displayAttr = prop.GetCustomAttributes(typeof(DisplayAttribute), true).FirstOrDefault() as DisplayAttribute;
                                         return displayAttr != null ? displayAttr.Order : int.MaxValue;
                                     });

            // If the entity has MetadataTypeAttribute's, use them
            var metadata = (MetadataTypeAttribute[])type.GetCustomAttributes(typeof(MetadataTypeAttribute), true);

            var names = new Dictionary<PropertyInfo, string>();
            foreach (var property in properties)
            {
                if (onlyFields.Length == 0 || onlyFields.Contains(property.Name, StringComparer.InvariantCultureIgnoreCase))
                {
                    var text = GetDisplayName(property, metadata);

                    names.Add(property, text);
                }
            }

            return names;
        }

        private static string GetDisplayName(PropertyInfo property, IEnumerable<MetadataTypeAttribute> metadata)
        {
            // Extract the display name from the DisplayAttribute on the object or on any of the MetadataTypeAttribute's 
            // it may contain
            var displayText = metadata.Select(m => m.MetadataClassType.GetProperty(property.Name))
                    .Where(p => p != null)
                    .SelectMany(p => (DisplayAttribute[])p.GetCustomAttributes(typeof(DisplayAttribute), true))
                    .Concat((DisplayAttribute[])property.GetCustomAttributes(typeof(DisplayAttribute), true))
                    .Select(m => m.GetName())
                    .FirstOrDefault(n => !string.IsNullOrEmpty(n));

            // Return the display text if found, otherwise return the property name
            return displayText ?? property.Name;
        }
 
        private static bool IsSimpleOrNullableType(Type t)
        {
            if (t.IsGenericType && t.GetGenericTypeDefinition() == typeof(Nullable<>))
            {
                t = Nullable.GetUnderlyingType(t);
            }
 
            return IsSimpleType(t);
        }
 
        private static bool IsSimpleType(Type t)
        {
            return t.IsPrimitive || t.IsEnum || t == typeof(string) || t == typeof(Decimal) || t == typeof(DateTime) || t == typeof(Guid);
        }

        private static void WriteRow(TextWriter sw, IEnumerable<string> values)
        {
            int index = 0;
            foreach (var value in values)
            {
                if (index > 0)
                {
                    sw.Write(",");
                }

                WriteValue(sw, value);
                index++;
            }

            sw.Write(Environment.NewLine);
            sw.Flush();
        }

        private static void WriteValue(TextWriter sw, string value)
        {
            bool needsEscaping = value.IndexOfAny(EscapableCharacters) >= 0;

            if (needsEscaping)
            {
                sw.Write(Quote);
                sw.Write(value.Replace(Quote, EscapedQuote));
                sw.Write(Quote);
            }
            else
            {
                sw.Write(value);
            }
        }
    }
}

This helper class has the following features:

  1. Uses the user-friendly display name of the property if present (DisplayAttribute.Name property).
  2. Respects the order of the properties/columns (DisplayAttribute.Order property).
  3. Uses the DisplayAttribute from the class itself or from the MetadataTypeAttribute the class it’s decorated with (if any).

Note: The onlyFields params array lets us specify which properties we want to output to the CSV. If you want to include them all, just leave that empty.

Streams are used because they give us more control over where we want the results dumped, but if we want to get the resulting CSV as a string, we can add the following method:

public static string ToCsv<T>(IEnumerable<T> collection, params string[] onlyFields) where T : class
{
    using (var stream = new MemoryStream())
    {
        ToCsv(collection, stream, onlyFields);
        using (var reader = new StreamReader(stream))
        {
            return reader.ReadToEnd();
        }
    }
}

Finally, we can consume our helper class in ways like the following:

As a download in ASP .NET MVC

List<UserDto> users = /* Fetch the object list here */;
var outputStream = new MemoryStream();
CsvHelper.ToCsv(users, outputStream);
return File(outputStream, "text/csv", "Users.csv");

As a local file

List<UserDto> users = /* Fetch the object list here */;
using (var fileStream = File.Create("myFile.csv"))
{
	CsvHelper.ToCsv(users, fileStream);
}