Integrating dot less css is pretty easy by default, as shown on its home page however I wanted something that could be configured by application users. We want to be able to specify the link html tag like the following.

<link href="/public/css/sites.less" rel="stylesheet" type="text/css" />

There are few steps involved in the solution I have come up with so bare with me as I go through them. Firstly we’ll start with the web.config:

        <compilation>
            <buildProviders>
                <add extension=".lessx" type="System.Web.Compilation.PageBuildProvider" />
            </buildProviders>
        </compilation>

Insert the builderProviders block inside the compilation section. The compilation section will be under the system.web section. This will enable us to use code blocks in our lessx files.

Secondly, is the routing.

        //Special Route for css so that images are relative to it
        routes.MapRoute("css",
                           "public/css/{filename}.less",
                           new { controller = "Css", action = "Index” },
                           new[] { "eLearning.Controllers" });

This specifies that any url matching /public/css/{filename}.less should be routed to the CssController passing the filename as the parameter to the Index method.

    public class CssController : BaseController
    {
        [OutputCache(Duration = 10, VaryByParam = "")]
        public ActionResult Index(string filename)
        {
            if (string.IsNullOrEmpty(filename))
                throw new ArgumentException("A filename must be supplied");

            ViewData["baseColor"] = "#aabbcc";

            var less = RenderViewToString(filename + ".lessx", null);
            var css = LessCss.Generate(less, true);
            return Content(css, "text/css");
        }
    }

    public static class LessCss
    {
        public static string Generate(string less, bool minify)
        {
            var lessEngine = new EngineFactory();
            lessEngine.Configuration.MinifyOutput = minify;
            var output = lessEngine.GetEngine().TransformToCss(less, null);
            return output;
        }
    }

This is the css controller class. It receives the filename as the input, finds the corresponding .lessx file and returns the file with appropriate view data replaced. Is then takes the less formatted string and runs it through the dot less parser to return a css string. This is then returned to the browser with the appropriate content-type. One method I have not shown is the RenderViewToString() and how the .lessx file is located. This method is located on the base controller class that the css controller inherits from. I have also turned Caching on so that it will cache the result for 10seconds.

        protected string RenderViewToString(string viewName, object model)
        {
            if (string.IsNullOrEmpty(viewName))
                viewName = ControllerContext.RouteData.GetRequiredString("action");

            ViewData.Model = model;

            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindView(ControllerContext, viewName, null);
                ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
                viewResult.View.Render(viewContext, sw);

                return sw.GetStringBuilder().ToString();
            }
        }

This method finds the .lessx file and returns the result as a string. Now usually the view engine will take controller name and method name and by convention look in the /Views/css/index.aspx file. It doesn’t quite make sense to put it in the views folder so I have overridden the default web forms view engine so that they can be placed in the /Public/Css folder. This can be configured to your liking (convention).

    public class CustomViewEngine : WebFormViewEngine
    {
        public CustomViewEngine()
        {
            var locs = new List<string>(base.ViewLocationFormats);
            locs.Add("~/Public/{1}/{0}"); //My personal choice
            locs.Add("~/Views/{1}/{0}");  //An alternative choice
            base.ViewLocationFormats = locs.ToArray();
        }
    }

Once your Custom View Engine has been overridden, you will need to add it to the ViewEngines.Engines collection in the application start method in the global.asax.cs.

        ViewEngines.Engines.Clear();
        ViewEngines.Engines.Add(new CustomViewEngine());

This will then allow us to write a *.lessx file like the following; you can also pass a strongly typed model to the .lessx file if you so wish in the same way you would to a regular aspx view.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

@basecolor: <%= ViewData["baseColor"] %>;

body {
    background: @basecolor;
}

Which will be rendered to the browser as:

body {
    background: #aabbcc;
}

And that’s it. I’m still working on the finer details but I am liking how it works at the moment. If you have any thoughts or suggestions, please leave a comment.

Adam

It currently supports the following FV validatiors:

• NullValidator
• NotEmptyValidator
• LengthValidator
• RegularExpressionValidator
• ComparisonValidator including:
  • Equal
  • Not Equal
  • Greater Than or Equal
  • Less Than or Equal

To configure the integration we need to tell xVal to use the FV rules provider rather than the default one. This is done in the global.asax.cs in Application_Start().

xVal.ActiveRuleProviders.Providers.Clear();
xVal.ActiveRuleProviders.Providers.Add(
    new FluentValidation.xValIntegration.
            FluentValidationRulesProvider(new AttributedValidatorFactory()));

The rules provider here is instructed to use the AttributedValidatorFactory to instruct the provider to use the attribute attached to the model class to find the validation class for that model.

Note: This is still new and xVal is still in beta so there may be some issues. If you find any please let me know so we can fix them as soon as possible.

Hopefully once its ready it can be checked in with the other providers at the xVal codeplex site.

This is currently in the development source code which can be downloaded and tried now.

Cheers,

Adam

Since then I have submitted a few patches for the framework, one of which is the Fluent Validation Model binder. Inspired by the Data Annotations Model binder, it works in much the same way. Once you have it set to your default model binder, it will validate any model which contains the specific attribute. This will become clear in the examples below.

Firstly lets take our model.

    [Validator(typeof(LineItemValidator))]
    public class LineItem
    {
        public int LineNumber { get; set; }
        public DateTime Date { get; set; }
        public string Description { get; set; }
        public decimal Net { get; set; }
        public decimal Tax { get; set; }
        public decimal Gross { get; set; }
    }

Attached to this simple LineItem class is a Validator attribute. This attribute is used by the Model Binder to locate the Class used for validation. Below I will define my LineItemValidator class which will hold the rules for the validation.

    public class LineItemValidator : AbstractValidator<LineItem>
    {
        public LineItemValidator()
        {
            RuleFor(x => x.Description)
                .NotEmpty().When(x => Settings.DescriptionRequired)
                .And
                .Length(0, 30);

            RuleFor(x => x.Date)
                .GreaterThanOrEqualTo(DateTime.Today);

            RuleFor(x => x.Net)
                .GreaterThan(0);

            RuleFor(x => x.Gross)
                .GreaterThan(0)
                .And
                .Equal(y => (y.Net + y.Tax))
                .WithName("Total Amount");
        }
    }

As you can see the class must inherit from AbstractValidator<T> where T is the model you want to define the rules for. The first rule uses the conditional When clause where it will only validate that the field is NotEmpty when the Settings.DescriptionRequired boolean is true. Also, another thing is the complex validation taking place on the Gross field. Not only does it validate that it is greater than 0, but that the value is equal to the net + tax amount. This is very elegant indeed. I have also specified the ‘WithName’ clause which has also been integrated into the model binder so that if an error occurs with the gross field, the WithName value will be displayed when an error happens. This is extremely handy for language localization or when the name of the field on the Model is insufficient.

Wiring this Model binder up in the Application_start event in the global.asax.cs is as easy as this.

     ModelBinders.Binders.DefaultBinder =
                new FluentValidationModelBinder(new AttributedValidatorFactory());

Note that we have to pass an instance of the AttributedValidatoryFactory into the Model Binder. This means if you have an alternate way of locating the Validator class other than via the attribute you can inherit from IValidatorFactory and create your own.

Now when a parameter of LineItem gets passed into a controller it will be validated against the model and all errors placed into the ModelState. This can then check the isValid property to determine if there are any errors and proceed accordingly.

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Edit(List<LineItem> lineItems)
        {
            if (ModelState.IsValid)
                return RedirectToAction("Edit");

            return View();
        }

And that’s it. I hope you enjoy using the Fluent Validation framework as much as I have and happy coding. For all you guys waiting for xVal integration, I will try and post a solution in the coming week.

Adam