Web-Matters

Umbraco 5 Surface Controller

2011-12-21T21:12:00.007Z

In a recent post I blogged my first steps in creating plugins for Umbraco 5 - creating a tree and editor using a custom hive provider for a third party database, in order to present and edit information within the Umbraco back office.

I noted how the information could also be made available on the front-end of the site by writing code within the razor view template. Whilst that worked, it wasn't very satisfactory and certainly wasn't the MVC way with too much code and logic in the view.

Since then the project has moved on and details have been made available for working with surface controllers. They can be created both directly within the Umbraco project in VS.Net or as plugins.

Creating a Surface Controller

To create a surface controller for use in a plug-in you create a class within a project with a reference to System.Web.Mvc and Umbraco.CMS.Web, with the following setup:

Inherits from SurfaceController
Named with a suffix of "SurfaceController"
Has a class attribute of Surface with a unique GUID
Contains one or more action methods that return either PartialViewResult or ContentResult and are marked with the [ChildActionOnly] attribute
The project AssemblyInfo.cs file must contain [assembly: AssemblyContainsPlugins]

Otherwise you use standard MVC concepts such as view models and tightly or loosely bound views, either standalone or embedded. You deploy to your package folder as detailed in the previous post.

Using the Surface Controller

There are a couple of ways to make use of the surface controller once it has been built and deployed to the Umbraco application.

One is the standard MVC way - after all this is just a controller action returning a partial view or content result. So you can use @Html.Action. As it's a plug-in, which is created as it's own area, you need to specify the area the controller and action is found within, as follows:

@Html.Action("ActionName","ControllerName", new {area = "PackageName"})

Unfortunately as of writing, this doesn't seem to work. An error of "No route in the route table matches the supplied values." results. Hopefully will sort this out or determine if it's a bug to be fixed shortly.

In any case the better way is really to create a Child Action Macro. This is done via the Developer section and once created the deployed package, controller and action should be selectable from the list. You can then render the macro, e.g. in a template with:

@Umbraco.RenderMacro("artistList")

Further reading

In addition to Shannon Deminick's introductory post linked to earlier, Sebastiaan Janssen also covers surface controllers in his post on creating an Umbraco 5 package.

Get the code

If you’d like to look further you can download the code here - this has been updated from the previous post with amends to the hive, tree and editor plug-ins to adhere to changes in the Umbraco code base; with an additional project added for the Surface Controller.

Creating an Umbraco 5 Hive Provider with Custom Tree and Editor Plugin

2011-11-21T23:00:00.005Z

Having used Umbraco CMS on a couple of projects in the past and been very impressed with it, I’ve been keen to follow progress on version 5 (or “Jupiter”) – a rewrite of the code-base to use ASP.Net MVC. In particular I’ve been looking recently at some of the extension points of the platform.

One of these is building upon the data access abstraction layer that is being developed for Umbraco 5 – known as Hive. Umbraco itself will use NHibernate for data access, but via the Hive abstraction. The idea is that this default data access method could be swapped out – but perhaps more importantly by building a hive provider developers can expose other data sources to their Umbraco templates and back office.

The back-office itself is also very pluggable, with the various node trees and editor interfaces also being extendable with your own custom implementations. In light of this I’ve been looking at a small project to create a hive provider for a custom database, along with a custom tree and editor for managing the content from within the Umbraco interface. The use case here might be that we already have data within a legacy database. Rather than converting it to document types and importing into Umbraco itself, we might want to keep it in the existing system whilst also providing a familiar interface for both back office editors to manage the content and template developers to surface the content on our Umbraco based website.

Credits and Further Reading

Before going further first would like to note that others having been working on a similar project and the work they have shared has been invaluable in moving forward with this. Hopefully by similarly publishing the code I’ve adapted and extended will help others on the same path.

Dirk de Grave and others looked at building a custom hive provider for a third party database at the recent Amsterdam Hackathon
David Conlisk has blogged about creating both a custom hive provider and a custom tree to display that data, along with how to configure hive, where to place the files in Umbraco, etc. This was the main source I used to get going with the hive provider.
Core team member Shannon Deminick’s series of blog posts on plugins are the best place to look for an introduction into developing custom trees and editors.

Building the Solution

In order to implement the hive provider and custom interfaces I’ve set up a separate VS.Net solution with 3 class library projects. I’ve also downloaded the full source of Umbraco and set this up on IIS and SQL server, so I have an installation of Umbraco running.

In order to deploy the functionality to the Umbraco installation the compiled assemblies need to be copied to /App_Plugins/Packages/(PackageName)/lib. To facilitate this I’ve used a post-build step that is set up with VS.Net to run an xcopy command on every successful build, e.g.:

xcopy "$(ProjectDir)bin\Debug\WebMatters.UmbracoAddOns.MusicCatalogHiveProvider.dll" "$(ProjectDir)..\..\UmbracoSource\Source\Web Apps\Umbraco.CMS.Web.UI\App_Plugins\Packages\WebMatters\lib" /i /f /y

It’s also necessary to restart the Umbraco web application when updates are deployed so that the updated are reloaded. To make this happen you can re-save web.config, or use another post-build script to copy an empty text file into the /bin folder.

With this setup deployment was fairly painless, apart from one issue with the embedded views that I used for the editor. I found at times I either needed to delete the temporary internet files or rename my view in order for changes to be picked up.

The Hive Provider

As mentioned I’m looking to create a hive provider to read and update data from a custom database, so the first thing I need is to set this up. To start things simply I’ve just got a single table for my “music catalog” database, a table of Artists:

Within the project’s Entity folder I’ve created a POCO class called Artist representing an artist and derived from the Hive class BaseEntity.

For data access to the custom database I’ve simply used ADO.Net with inline SQL, though of course this could be swapped with an ORM or stored procedures as preferred. The code for this is within SqlMusicCatalogRepository – providing basic CRUD methods.

The Hive Repository class inheriting from AbstractEntityRepository contains a reference to this custom data access class, and the appropriate methods to perform the reads and updates are passed along. Some helper methods have been created to convert between the POCO Artist and the base generic entity used within Hive called TypedEntity.

The TypedEntity contains some properties that will be common to all entities managed through Hive – things like an ID and created/last modified dates. It also contains reference to a collection of attributes for the custom fields – in my case the Name and Description of the Artist. These attributes and their definitions are defined within the various classes contained in the Schema folder.

Once the assembly has compiled and been deployed to the lib folder within the package, in order for Umbraco to use it it's necessary to make an amend to the file umbraco.hive.config found within /App_Data/Umbraco/Config. See the readme.txt file in the code download for details.

The Tree plugin

Tree plugins within Umbraco 5 are MVC controllers, inheriting from the Umbraco class SupportsEditorTreeController. You need to decorate the class it with a custom annotation called [Tree], providing a name and unique key. It’s also necessary to add [assembly: AssemblyContainsPlugins] to the project’s AssemblyInfo.cs file. This way when Umbraco loads it can pick up that the deployed dll contains a custom tree plugin.

Within the overridden GetTreeData method a reference to the hive provider is created and a method to get all entities is made. The resulting list is looped and a node created for each entity, setting properties like the name, the URL of the associated editor, the icon and the context menu items.

It's also necessary to modify a config file in order to tell Umbraco where the tree should live. The file is umbraco.cms.trees.config found within /App_Data/Umbraco/Config

. Again see the code download readme.txt file for details.

The Editor plugin

Editor plugins are also controllers, inheriting from StandardEditorController. As with the tree, steps are required to annotate the class and assembly info in order to notify Umbraco that the dll contains an editor plugin. The unique key provided here should match with the one created within the tree’s EditorControllerId property, such that the actions made on the tree nodes match up with the appropriate editor methods.

Taking just the Edit method as an example, as with the tree the first step is to get a reference to the hive provider and retrieve a single entity based on the passed Id. The resulting TypedEntity is passed to a strongly typed view for rendering the edit form.

I’m using embedded views to avoid having to deploy more than just a single assembly for each project into my Umbraco instance. This is easily done by creating a view as normal, and within its properties setting the Build Action to Embedded Resource. You then need to reference the path and namespace of the view when returning a ViewResult from the controller.

As with a standard MVC editing interface the form posts back to another method (also called Edit, but with a signature providing a reference to the posted form data). I’ve not attempted to use model binding here, rather am retrieving data direct from the Request.Form collection and using this to construct the TypedEntity. This is then passed to the Hive repository’s AddOrUpdate method in order to persist the change. Finally I’m returning a redirect to another view that simply displays a success message.

Accessing Hive data from templates

So thus far we have the list of artists displaying and being editable via the back-office, but one of the reasons for going via the Hive abstraction is that the content can also be rendered in the front-end templates using a consistent method. The following Razor code can be placed within a cshtml view and will display the list of artists from the database:

<h2>Artist list</h2>
<ul>
@using Umbraco.Framework.Persistence.Model;
@using WebMatters.UmbracoAddOns.MusicCatalogHiveProvider.Entity;

@{
var hive = RoutableRequestContext.Application.Hive.GetReader(new Uri("webmatters-music-catalog://"));
using (var uow = hive.CreateReadonly()) {
var artists = uow.Repositories.GetAll().ToArray();
foreach (var artist in artists) {    
<li>@artist.Attributes["Name"].DynamicValue</li>
}
}
}
</ul>

Update: see subsequent post for a better way to do this using surface controllers.

20/1/12: Further updated for RC 2 thanks to Ruben's comment below.

Known issues and further development

The current status of the hive provider tree and editor is to provide basic methods for reading, creating, updating and deleting the content through the Umbraco back office; and display in the view templates. Ideally I’d like to extend this to cover a wider range of use cases, in particular:

One-many relations: e.g. managing a list of albums for each artist
Many-many relations: e.g. managing a list of tags for each album

There are also a couple of key functional issues:

I haven’t yet managed to integrate Umbraco notifications on data updates. Currently I’m displaying a new view after updates with a message on it to manually reload the nodes. Obviously this isn’t ideal – would be better to have the usual notification dialog and re-synching of the tree automatically as needed.
There’s no validation set up yet.

Get the code

If you’d like to look further you can download the code here.

As I say there’s still a fair bit to I’d like to look at and improve and I’m sure there may be areas where I could have implemented things better – so if anyone would like to comment, or better yet go in and improve the code, please feel free to do so. Depending on feedback may look to add to the Umbraco 5 Contrib project too.

Upgrade ASP.Net MVC2 to MVC3

2011-06-21T22:00:00.003+01:00

Having recently upgraded a couple of ASP.Net MVC 2 projects to MVC 3, I came across a couple of tools and techniques to simplify the process.

ASP.Net MVC3 requires .Net 4 and hence use of VS.Net 2010 (or express editions) are required. There's also an additional download of the MVC3 framework required too.

One of the simplifying changes of the upgrade is a slimmed down web.config file - but I found this meant an in-place upgrade of this and all the necessary references rather complicated. So instead I created a new, empty MVC3 project and copied over all the controllers, models, views and necessary web.config settings into the new project.

An important security update is to HTML encode all output by default, using the new <:= > syntax (as opposed to <%= %>). If you've been encoding output properly in previous versions any potentially insecure content would have been wrapped in Html.Encode methods. But updating all of these to the new syntax looks to be a pretty time consuming and tedious task.

So was very pleased to discover this tip, which details how VS.Net's find/replace syntax can be used to make the update across the project.

Having done that though, what I really wanted to do was make use of the new Razor view engine. But again, updating all the views to use this syntax would take quite some time working manually.

This time a tool produced by Telerik proved invaluable in carrying out this task. You can run it on a folder of view files that use the web forms view engine, and it will convert them into ones using Razor. It's not 100% perfect - I found in particular a few brackets need manually adding here and there to ensure valid syntax - but does most of the job and saves an awful lot of time.

Script Junkie Article on Progressive Enhancement and ASP.Net MVC

2010-10-27T23:37:00.002+01:00

Linking to an article I've had published on Script Junkie: Ajax, ASP.Net MVC and Progressive Enhancement.

Validation with ASP.Net MVC2

2010-10-16T12:31:00.004+01:00

I've blogged previously about the validation methods I've used on ASP.Net MVC projects and have recently been adapting this for use with version 2 of the framework.

One of the new features I wanted to make available was the use of data annotations for validation, where domain or view model classes can be decorated with attributes for validation of required fields, field lengths and range values. These can then be used for both server side and client side validation.

I ran into a problem with this though when validating entities that had related items - for example in my case I was working on a project management tool, where an entity such as a project is related to others such as a client and an account manager. The client entity has required fields such as a name, but when validating before saving the project entity I didn't really care about that as I was only interested in the client ID to perform the update operation.

The validation by default is set up to perform whole model validation, but a useful post from Steve Sanderson details how to get around this issue and perform partial validation based on just the values that are passed in the form post.

Data annotiation based validation isn't the the full story though - in a robust application it's considered necessary for the domain model to handle it's own validation too. This is partly a result of using techniques such as the above, which would allow a determined hacker to modify the form input to by-pass data annotation based checks on required fields.

In previous projects I've used straightforward C# code for the validation of model fields, but as I'd already used data annotions to define these rules it was a obvious violation of the DRY principle to have to do this again. .Net 4 provides a means of doing this using the Validator.TryValidateObject method.

For .Net 3.5 though I used a technique illustrated by JohnyO in this post on stackoverflow. It validates based on rules specified both directly on the class or in a meta data "buddy" class and thus allows the domain model to handle validation without repetition of all the rules.

iPhone Custom UIView with Controls

2010-10-02T17:44:00.001+01:00

Armed with a copy of the Pragmatic Programmer's book and a lot of Googling, have made a start recently on developing apps for the iPhone. Took a while to find my way around XCode, Interface Builder and to get to thinking again about things like memory management, but made some progress and have released an app for bass guitar players learning scales or modes.

It's fairly straightforward - is based on a navigation controller app, and has a single table view for selecting the scale and then a custom view for displaying the scale itself. You can choose the mode, key and speed and then view the tablature for playing the scale as well as listening to it played and viewing the fingering positions.

The only tricky bit really was the display of the scale and for this I needed to develop a custom UIView. By doing this you can draw directly to the canvas - which I needed to do for the tab lines (or strings) and for plotting the finger positions of the scale. Normally with a view you use Interface Builder or code to generate controls and associate them with IBOutlets and IBActions in XCode. The problem I found was that I wanted to do both - i.e. I needed a custom view in order to display the information that couldn't be rendered using controls, but also wanted to make use of controls for functions like the selection of mode and key.

I also had the issue that I wanted to pass information to the custom UIView, by setting a property for the scale (a custom class I had created which represented the selected scale - with properties like the name, description and intervals).

I solved this using the following code which involves casting the view object to the type of my custom UIView in the UIViewControllers viewWillAppear method, which then allows me to set it's custom property.


- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

  //Pass details of scale in custom property
  [(ScaleDisplayView *)[self view] setScale:scale];
 
  //Display scale details
  self.nameLabel.text = [NSString stringWithFormat:@"The %@ scale", self.scale.name];
  self.descriptionLabel.text = self.scale.description;
 
  //Initialise view
  self.title = self.scale.name;
  self.view.backgroundColor = [UIColor whiteColor];
  [self.view setNeedsDisplay];
}

jquery - the trigger method

2010-07-21T23:31:00.006+01:00

Having recently had to work on a client website where jquery wasn't available, it was really apparent just how useful this library is and how pleasureable it makes working with JavaScript. Having to resort back to getElementById and getElementsByClassName was painful in comparison.

Today I discovered and made use of yet another useful feature - the trigger method which enables an action on one element to fire the functions associated with events on another.

I had a simple accordion style user interface that looked like this:

On clicking the cross on the right a panel below would expand and display the content.

The mark-up looked like this:

    1 <ul id="list">

    2     <li>

    3         <div class="head">Title</div>

    4         <a href="">+</a>

    5         <ul>

    6             <li>Content one</li>

    7         </ul>

    8     </li>

    9 </ul>

And I had a function that carried out the toggling of the display like this:

    1 $("#content ul.list a.toggle").click(function() {

    2     if ($(this).next().is(":visible")) {

    3         $(this).next().hide("fast");

    4         $(this).text("+");

    5         $(this).parent().removeClass("on");

    6     } else {

    7         $(this).next().show("fast");

    8         $(this).text("-");

    9         $(this).parent().addClass("on");

   10     }

   11     return false;

   12 });

As you can see the code relies on the position of the link element (it's looking for the next element to expand) and makes some styling changes to the link itself.

So when the designer asked to make the whole bar clickable this was a bit annoying, as it looked like I would to replicate the function and adapt it to cope with a click on the bar instead of the cross.

But with jquery trigger you can fire an event on another element, so adding this small addition to the function provides the means for a click on the div element firing the function associated with the click of the link.

    1 $("#content ul.list div.head").click(function() {

    2     $(this).next().trigger("click");

    3 }); 

And the last line can be simplified further to:

  1 $(this).next().click();

Progressive Enhancement with ASP.Net MVC

2010-04-18T15:09:00.008+01:00

With its clean model for separation of concerns, one of the things I’ve been impressed by in use of MVC with ASP.Net is the support for building AJAX enabled applications that support progressive enhancement.

This technique takes the traditional strategy of graceful degradation in web design and turns it on its head. Rather than focussing on having the best possible user interface degrade to a less rich but still workable and presentable one, the focus is on creating a functional base UI that is enhanced by the addition of CSS and JavaScript to produce an improved user experience for those that can make use of it.

Of course either method can lead to the same result, but – in addition to the use of some specific techniques such as external referencing of assets to avoid swamping the more basic client with code or data that can’t be used – the change of approach leads to a different design mindset and result that better supports the full user base.

In this post I’ll illustrate a small part of an application I’ve recently worked on, where we developed an RSS reader for a site. One function was that users should be able to view a list of feeds, and add and remove RSS sources to it – and that we needed to support both script enabled clients and those that don’t have access to such technologies.

Firstly, the basic application before enhancement:

In the domain model I have a feed class that represents an RSS Feed object. Not shown in code but also developed for the application are repository and service methods for validation and the persistence of the list of feeds to the database.

    1 public class Feed

    2 {

    3     public int Id { get; set; }

    4     public string Name { get; set; }

    5     public string Url { get; set; }

    7     public List<FeedItem> Items { get; internal set; }

    8 }

In the controller code I have a few methods, for the retrieval of the list of feeds, and to support functions for the addition to and removal of them from the list. The key points to note here is that the addition of a new feed requires a straightforward form post, and the removal is via a link to a confirmation page, that in turn uses an HTTP post to proces the deletion. No client-side script required for a functional, if basic, UI.

    1 /// <summary>

    2 /// Render feeds page default view

    3 /// </summary>

    4 /// <returns></returns>        

    5 public ActionResult List()

    6 {

    7     IPrincipal user = GetUser();

    8 

    9     return View(new IndexViewModel

   10     {

   11         Feeds = feedsService.GetFeedList(user),

   12         IsLoggedIn = (user != null && user.Identity.IsAuthenticated),

   15     });

   16 }

   17 

   18 /// <summary>

   19 /// Receives the URL to an RSS feed, verifies it, and saves to the user's account

   20 /// </summary>

   21 /// <param name="url">URL of RSS feed</param>

   22 /// <returns></returns>

   23 [AcceptVerbs(HttpVerbs.Post)]

   24 public ActionResult Add(string url)

   25 {

   26     if (url.Length >= 4 && url.Substring(0, 4) != "http")

   27         url = "http://" + url;

   28 

   29     bool success = false;

   30     int feedId = 0;

   31     string feedName = "";

   32     string message = "Feed addition was unsuccesful. Please correct the errors and try again.";

   33     if (feedsService.ValidateRSSFeed(url))

   34     {

   35         Feed feed = new Feed();

   36         feedName = feedsService.GetRSSFeedNameFromUrl(url);

   37         feed.Name = feedName;

   38         feed.Url = url;

   40         try

   41         {

   42             feedId = feedsService.AddFeed(feed, ControllerContext.HttpContext.User);

   43             success = true;

   44             message = "The RSS feed has been added to your list.";

   45         }

   46         catch (RuleException ex)

   47         {

   48             ex.CopyToModelState(ModelState);

   49         }

   50     }

   51     else

   52     {

   53         ModelState.AddModelError("Url", "The URL does not point to a valid RSS feed.");

   54     }

   55 

   56     TempData["Message"] = message;

   57     return RedirectToAction("Index");

   58 }

   59 

   60 /// <summary>

   61 /// Renders view for remove confirmation

   62 /// </summary>

   63 /// <param name="id">Id of feed for removal</param>

   64 /// <returns></returns>        

   65 public ActionResult Remove(int id)

   66 {

   67     Feed feed = feedsService.GetFeed(id, GetUser());

   68     return View("Remove", feed);

   69 }

   70 

   71 /// <summary>

   72 /// Processes feed removal

   73 /// </summary>

   74 /// <param name="contact">Feed object (created by model binding)</param>

   75 /// <returns></returns>        

   76 [AcceptVerbs(HttpVerbs.Post)]

   77 public ActionResult Remove(Feed feed)

   78 {

   79     bool success = false;

   80     string message = "Feed removal was unsuccesful. Please correct the errors and try again.";

   81     try

   82     {

   83         feedsService.RemoveFeed(feed.Id, GetUser());

   84         success = true;

   85         message = "The RSS feed has been removed from your list.";

   86     }

   87     catch (RuleException ex)

   88     {

   89         ex.CopyToModelState(ModelState);

   90     }

   91 

   92     TempData["Message"] = message;

   93     return RedirectToAction("Index");

   94 }

My view code marks-up the HTML for the display of the list, the links for removal and the form for adding a new RSS feed to the list.

    1 <ul id="feed-list">

    2 

    3 <% foreach (var item in Model.Feeds) { %>

    4 

    5     <li>

    6         <span><%= Html.Encode(item.Id) %></span>

    7         <%= Html.ActionLink(item.Name, "Details", new { id = item.Id })%>

    8 

    9         <%if (Model.IsAdmin || !item.Required) { %>

   10             [<%= Html.ActionLink("Remove", "Remove", new { id = item.Id })%>]

   11         <% } %>

   12     </li>

   13 

   14 <% } %>

   15 

   16 </ul>

   17 

   18 <% if (Model.IsLoggedIn) { %>

   19 

   20     <% using (Html.BeginForm("Add", "Feeds", FormMethod.Post, new { id = "form-add-feed"}))

   21        {%>

   22 

   23         <fieldset>

   24             <legend>Add new feed to your list</legend>

   25             <p>

   26                 <label for="form-add-feed-url">Feed URL:</label>

   27                 <span>

   28                     <%= Html.TextBox("Url", "", new { id = "form-add-feed-url" })%>

   29                 </span>

   30             </p>

   31             <p>         

   32                 <input type="submit" value="Add Feed" />                     

   33             </p>

   34         </fieldset>       

   35 

   36     <% } %>

   37 

   38 <% } %>

So far very straightforward, but the interface requires a number of full page post backs to function, and hence for a better user experience we can progressively enhance the application with AJAX.

Firstly, for the addition of the feeds to the list we can hijack the form post using some jquery. The key point to note about this and the other progressive enhancement techniques described is that if the client doesn’t support them, they are simply ignored and the base functionality remains untouched.

Within this function we can read the URL from the form, and construct an HTTP post response from client side code. When the response comes back from the post, we can process it and display either a success message (and carry out additional processing such as adding the new feed to the HTML list) or error response as appropriate. Finally, and importantly, we return a false response such that the default form submission process is cancelled.

    1 $(document).ready(function() {

    2     hookUpAddFeedFormAjaxPost();

    3 });

    4 

    5 function hookUpAddFeedFormAjaxPost() {

    6     $("#form-add-feed").submit(function() {

    7 

    8         //Get feed details

    9         var url;

   10         url = $("#form-add-feed-url").val();

   11 

   12         //Post to controller action for adding feed

   13         $.post("/Feeds/Add/", { url: url },

   14             function(data) {

   15 

   16                 if (data.Success) {

   17 

   18                     //Success... show message

   19                     $("#ajax-message p.message").text(data.Message);

   20                     $("#ajax-message").show();

   21 

   22                     //Add feed to list (if not already there)

   23                     var id, name;

   24                     name = data.Data.split("|")[0];

   25                     id = data.Data.split("|")[1];

   26 

   27                     if ($("#feed-list li span:contains(\"" + name + "\")").length == 0) {

   28                         $("#feed-list").append("<li><a href=\"/Feeds/View/" + id + 

   29                             "\" class=\"feed\">" + name + 

   30                             "</a> [<a href=\"/Feeds/Remove/" + id + 

   31                             "\">Remove</a>]</li>");

   34                     }

   35 

   36                     $("#form-add-feed-url").val("");

   37 

   38                 } else {

   39 

   40                     //Failed... show errors

   41                     $("#ajax-error span.validation-summary-errors").text(data.Message);

   42                     for (var i = 0; i < data.Errors.length; i++)

   43                         $("#ajax-error ul").append("<li>" + data.Errors[i] + "</li>");

   44                     $("#ajax-error").show();

   45                 }

   46 

   47             }, "json");

   48 

   49         return false;

   50     });

   51 }

In order to hook all this up we need to make some changes to our controller code, but actually very little - which is where the support of this approach from the ASP.Net MVC framework comes in. In the controller we can examine a property of the Request object to determine if the action method is being called from an AJAX request, and take appropriate steps. Here we want to by-pass the usual RedirectToAction at the end of the method, and instead format and return a JSON response.

   56     if (Request.IsAjaxRequest())

   57         return CreateAjaxResponse(success, message, ModelState, feedName + "|" + feedId);

   58     else

   59     {

   60         TempData["Message"] = message;

   61         return RedirectToAction("Index");

   62     }

The JSON response itself is contructed using this helper function:

    1 /// <summary>

    2 /// Private helper method to format a JSON respone for AJAX requests

    3 /// </summary>

    4 /// <param name="success">Flag indicating success or failure of the method</param>

    5 /// <param name="message">Message</param>

    6 /// <param name="modelState">ModelStateDictionary containing error details on failure</param>

    7 /// <param name="data">Any further specific information required by callback</param>

    8 /// <returns></returns>

    9 private JsonResult CreateAjaxResponse(bool success, string message, 

   10     ModelStateDictionary modelState, string data)

   11 {

   12     JsonResult json = new JsonResult();

   13     IList<string> errors = new List<string>();

   14     foreach (var item in modelState.Values)

   15         foreach (ModelError me in item.Errors)

   16             errors.Add(me.ErrorMessage);

   17     json.Data = new

   18     {

   19         Success = success,

   20         Message = message,

   21         Errors = errors,

   22         Data = data

   23     };

   24     return json;

   25 }

In a similar manner we can intercept the click of the remove link to disable the normal function and instead provide a client side method of confirming the deletion and constructing the HTTP post to process it. Again, if scripting is not supported, the hyperlink will just function as a normal anchor link to the confirmation form. But if it is, our client-side code will be executed and the rich AJAX UI provided instead.

View Models and Form Models in ASP.Net MVC - A Second Look

2010-04-15T22:59:00.012+01:00

Following my previous post looking at options on the use of view models within ASP.Net MVC, where I came down on the side of using a simpler approach passing domain models to views directly, in this blog post I'll outline the approach I'm taking with more recent project - where I've changed my approach to create view models and form models that wrap the domain model and can include additional fields and options that may be required in the particular view.

The argument for using custom view models is that they can be tailored precisely to each strongly typed view, providing a cleaner approach for display and updating data from views. The downside though is that there is some additional work involved. However, after further reading on the subject - would recommend both Steve Michelotti's post on MVC view model patterns and Jorit Salverda's maintainable MVC series - on balance now I've been using them more and more on projects, it seems the extra steps are worthwhile.

To illustrate this approach let's take again a simple example, where we have a domain model that represents a user. Each user has a user name and a role. The application using them needs to present a form for the update of a user's details, with the option to send them a welcome email.

The following code illustrates the code for the domain model.

    1 public class User

    2 {

    3     public string Username { get; set; }

    4     public Role Role { get; set; }

    5 }

And then I've created two further models in the UI layer - a view model that contains all the data for presentation on the form (the user object itself, and a SelectList for the various role options the administrator of the application can choose from. The second form model is created via model binding following the form post, where the user object is extracted and updated, and additional information also passed in a strongly typed manner is processed.

    1 public class UserViewModel

    2 {

    3     public User User { get; set; }

    4     public SelectList Roles { get; set; }

    5 }

    6 

    7 public class UserFormModel

    8 {

    9     public User User { get; set; }

   10     public bool SendEmail { get; set; }

   11 }

The controller code illustrates how the view models are created and information from the form model extracted.

    1 public ActionResult Add()

    2 {

    3     return View(new UserViewModel

    4     {

    5         Roles = new SelectList(usersService.GetRoleList(), "Id", "Name"),

    6     });

    7 }

    8 

    9 public ActionResult Edit(int id)

   10 {

   11     User user = usersService.GetUserById(id);

   12     return View(new UserViewModel

   13     {

   14         User = user,

   15         Roles = new SelectList(usersService.GetRoleList(), "Id", "Name", user.Role.Id),

   16     });

   17 }

   18 

   19 [AcceptVerbs(HttpVerbs.Post)]

   20 public ActionResult Edit(UserFormModel userFormModel)

   21 {

   22     if (ModelState.IsValid)

   23     {

   24         try

   25         {

   26             usersService.SaveUser(userFormModel.User, userFormModel.ResetPassword, GetUser());

   27         }

   28         catch (RuleException ex)

   29         {

   30             ex.CopyToModelState(ModelState);

   31         }

   32     }

   33     if (ModelState.IsValid)

   34     {

   35         TempData["Message"] = "User account " + (userFormModel.User.Id == 0 ? "created" : "updated") + ".";

   36         return RedirectToAction("Index");

   37     }

   38     else

   39     {

   40         return View((userFormModel.User.Id == 0 ? "Add" : "Edit"), new UserViewModel

   41         {

   42             User = userFormModel.User,

   43             Roles = new SelectList(usersService.GetRoleList(), "Id", "Name", userFormModel.User.Role.Id),

   44         });

   45     }

   46 }

And finally this strongly typed view code demonstrates how the form fields are named to support model binding following the post.

    1 <% using (Html.BeginForm()) {%>

    2 

    3     <fieldset>

    4         <h2>Account Details</h2>

    5         <p>

    6             <label for="User.Username">User name:</label>

    7             <span class="field">

    8                 <%= Html.TextBox("User.Username", Model.User.Username)%>

    9             </span>

   10         </p>

   11         <p>

   12             <label for="User.Role.Id">Role:</label>

   13             <span class="field">

   14                 <%= Html.DropDownList("User.Role.Id", Model.Roles)%>

   15             </span>

   16         </p>

   17         <p>

   18             <label for="SendEmail">Reset Password:</label>

   19             <span class="field">

   20                 <%= Html.CheckBox("SendEmail", false)%>

   21             </span>

   22         </p>   

   23         <p>

   24             <input type="submit" value="Save" class="indent" />                              

   25         </p>                             

   26         <%= Html.Hidden("User.Id",Model.User.Id) %>

   27     </fieldset>

   28 

   29 <% } %>

Without this approach it would be necesssary to pass the additional data to the view - the list of roles - in a loosely typed manner in the ViewData. And the additional information required from the form post - the flag to send the welcome email - would need to be passed as an extra paramenter to the controller action responding to the form post.

With hindsight I think this is clearly a cleaner approach and am using it for the MVC projects I'm working on now. In particular the method of creating a custom class for both the form display and the form post, provides a very elegent approach in my opinion.

Working on an Umbraco Project with Multiple Developers

2010-03-14T17:54:00.005Z

Over the past couple of months I've been working with the open source .Net CMS Umbraco, and been very impressed with the breadth of features and opportunities for extension and customisation that it provides. Operating as a one man band, it's very straightfoward to work with the product using the web based UI for most of the development tasks.

However one concern it gave was how to set it up such that in can be used within a development team - with multiple developers working on the same project and how to integrate it with source control systems.

Issues arise from the fact that whilst some content is saved as files on disk (e.g. templates, XSLT macros), others are held in the database (e.g. data types, document types, and the content itself of course).

In order to get around this, we've set up and used the following model - which seems to ameliorate the concerns:

Firstly, a single database is set up on a networked server for access by all developers. This means any created document types, data type and content nodes are immediately available to all developers, and they can rely on any IDs used to be consistent.
Secondly, each developer installs a clean Umbraco installation onto their local PC.
Finally, a companion Visual Studio solution is created. A project can be created within this for the creation of user controls and custom pages as would necessary in any case if such extensions were required. In addition though, copies of all file based information (stylesheets, scripts, templates/master pages, config files, xslt macros) are also created here.

This being the case, such files can be managed as they would in any other ASP.Net project, and checked into source control as required. The key change to working practice is that they are edited within Visual Studio rather than Umbraco.

An added advantage here is that you get access to VS.Net's intellisense and colour coding, which I've found to be a particular benefit when editing XSLT macros. There is the downside that you don't get to use Umbraco's own tooling support - in particular the toolbars for inserting fields and macros. However in practice I found that even an fairly novice Umbraco developer soon doesn't require these helpers, and if they are needed, can still be used of course provided the developer remembers to replicate the change into the VS.Net files.

In order to integrate with Umbraco, a post-build script is set up that runs an xcopy statement to copy the necessary files from the VS.Net project to the Umbraco installation.

So whenever an edit is made that needs to be reviewed, Ctrl + Shift + B will build the solution, and run the post-build script to copy the files into the Umbraco folder. And loading up the site running on localhost will allow the latest changes to be viewed in the browser.

Switched on Umbraco

2010-03-08T22:32:00.004Z

Although for reasons I won't go into it looks like there's a good chance the project isn't going to see the light of day, I've been fortunate in the past couple of months to have chance to properly get to grips with the .Net open-source content management system Umbraco.

Having heard good things about it from colleagues and the web community, I was hoping to find in this product the right balance of providing a rich framework for the generic requirements of a content-rich site, whilst retaining the ability to extend as necessary without running into the limits of the product. And I have to say after spending this time working with the system, I haven't been disappointed.

I plan to blog a few specific developments where I've found need to extend the product to fit the needs of the web-site I'm building, but firstly just wanted to highlight the key benefits for me that I've found.

Custom Document Types
Even quite recently I was pitched a commercial CMS product that whilst flexible in it's design, was very limited in the types of content you could represent. Standard article pages were all very well, but a CMS should allow you to add new fields and relationships as necessary to accurately model your content types. Without it, you end up combining data that should really be seperated to support flexibility in presentation, and generally pushing a product into ways it was never really designed to be used.

Umbraco supports this via the concept of document types which you define with the fields you require, and how the type relates to other types within the site structure. Each type can have one or more templates associated, giving flexibility in the presentation for pages with similar content structures but different layout requirements.

Extensibility
Umbraco is built on .Net, so much of the techniques for extension of the system use familiar techniques to ASP.Net developers such as user controls and aspx pages.

The most efficient way to provide custom functionality when all you are looking to do is to aggregate information already held within the Umbraco content is to use XSLT macros. The syntax for these can get a little verbose and convoluted if you aren't familiar with it, but there are good examples to work from for many common requirements (e.g. breadcrumbs, navigation and site maps) and to get up to speed.

If you need to go further than this though, it's necessary to spin-up a companion VS.Net project where you can create user controls. By copying the ascx and dll files to the appropriate folders in the Umbraco installtion and creating a macro to "wrap" the user controls, all usual .Net functionality including in-line code and code-behind, events and post-backs can be brought to bear to the project.

Finally, Umbraco itself is exposed as an API with the set of classes available providing ample opportunity for further extensibility - such as responding to Umbraco events like "page publish" and allowing information from within and outside of Umbraco to be amalgamated for display.

Community Code
One of the advantages of leveraging a product like Umbraco is the ability to make use of not only the core product, but also the many community contributions that have been built to extend the product. Sample websites, search tools and image processing controls are some of the ones I've looked into thus far, each of which has saved many hours from building into a custom CMS solution.

Any Issues?
As is no doubt clear from the discussion above, I've been very impressed with this product and am looking forward to working with it much more in the future. There have been many occasions where I've been pleasantly surprised in finding that what initially seeemed like being a tricky requirement to implement has either already been accounted for in the core product, or is easily solved via a simple extension.

One possible issue is that the content editing UI - whilst intuitive and very straightforward to work with - does seem to be optimised for small to medium websites. And that it's tree view navigation structure could get a bit unwieldy if you had hundreds of "news stories" for example.

I've got around this by structuring content for a news section using dated year and month folders, which makes the UI a little easier to work with. And using an XSLT macro the content can be collapsed on the front-end website, where I may not want to break out the stories in the same way. However it still leaves the issue of only being able to provide the CMS user with a single route to navigate to their content - in custom CMS solutions I've built in the past I've tended to provide a search form allow the user to locate the story for edit via a combination of criteria such as date, author, category and keyword.

Another potential concern is that the product whilst fantastic for a one-man-band development, requires some workarounds to support multiple developers working on the same installation. The reason is the combination of some CMS assets being stored in the database (data types, document types and content) and others on the file system (templates, CSS, XSLT macros).

In the next blog post I'll discuss how we have set up our environment to support this requirement, and also how similarly we plan to handle deployment of changes from development, to test and production.

3D Secure Implementation With PayPal

2010-01-24T18:22:00.012Z

In a recent blog post I documented some details for setting up direct payments with PayPal. I've recently had to extend that to implement 3D secure - known also as Verified by Visa or Mastercard SecureCode.

The primary reason I've needed to implement this in a hurry for a client is that as a deadline has been reached that mandates the technology if you wish to accept Maestro cards on the website. Hence, if anyone else like me has been asked to set this up on the site in a hurry, hopefully this post that documents the steps required and techniques will prove useful...

Project References

Paypal have a relationship with a company called Cardinal Commerce who are available to customers using PayPal Direct Payments for support with implementing the 3d secure technology. I found them very helpful in going through the process. The first step is to obtain a dll file called CMPCDotNet.dll (known as the "thin client software"). Note that the version supplied with the initial documentation is for .Net 2.0 - a version for .Net 1.1 is available too and this is what I needed to use.

Lookup Customer's 3d Secure Enrollment

The 3d secure process involves 2 steps - the first one being a look-up to see if the customer's card is enrolled in the scheme or not. To do this you make a web request passing in details of the order and the customer's card details, and receive back a response indicating their enrollment status. If they aren't enrolled, you just continue as normal with the Direct Payments process. Otherwise you need to continue with the steps described below.

Having made a project reference to the CMPCDotNet.dll, you'll be able to call methods provided by it, as illustrated in the code sample at the bottom of this post.

Redirect to 3D secure site

Having checked the response and confirmed the user is enrolled in the scheme, we need them to transfer the customer to the 3d secure site where they will be asked to enter their saved password. Before this happens though, it's necessary to save some information that will be needed again later in the process - and hence what I did here was save this data to the Session.

Once that's done the redirect can happen - but this needs to be via an HTTP Post. Hence a Response.Redirect() can't be used here, and instead the technique I used was to write an HTML form to the response stream, and have that form automatically posted via javascript.

Authentication

Once the customer completes the password entry process at the 3d secure website, control is passed back to your website to a URL passed in the initial form post. At this stage it's necessary to recreate state such as the user's card details in the form from the information saved to session.

Before continuing with processing the order via PayPal though, one last step is required which is to check whether or not the user was successfully authenticated with 3d secure. A second web request is made, passing the "payload" response received in the form post back from 3d secure (note - not the payload from the original look-up call - this caught me out for a while), and the transaction ID that was received in the first look-up request.

Again the response can be checked, and depending on the values received you can either decline the order, or proceed with charging the customer's card via PayPal Direct Payments. You will need to pass some additional details to PayPal, and also make sure you are using version 59.0 or later of the API.

Code Sample

The following code sample illustrates carries out the 3d secure authentication process described above. In order to demonstrate the key points from this blog post, it's not a complete working sample - you'll integrate your own methods for creating and retrieving orders of course - as well as set up the Direct Payments call (see my previous blog post if you need further details on this).

You'll see it also includes some code to log web requests and responses to a text file, which is useful for debugging and auditing purposes.

 1 private void Page_Load(object sender, System.EventArgs e)

 2 {

 3    //Check for post-back from 3D secure

 4    if (!Page.IsPostBack && Request.QueryString["3DSecPostBack"] == "1")

 5        Do3DSecAuthentication();

 6 }

 7 

 8 private void btnMakePayment_Click(object sender, ImageClickEventArgs e)

 9 {

 10    makePayment();

 11 }

 12 

 13 private void makePayment()

 14 {            

 15    //Create order record

 16    Order order = CreatePendingOrder();

 17 

 18    if (Page.IsValid)

 19    {

 20        //Open log file

 21        TextWriter objLogFile;

 22        objLogFile = File.AppendText(ConfigurationSettings.AppSettings["PaypalLogFilePath"]);

 23        try

 24        {

 25            //Get request details from card details form in ASPX file

 26            string cardType = ddlCardType.SelectedItem.Value;

 27            string cardNumber = txtCardNumber.Text;

 28            string expMonth = ddlExpiryDateMonth.SelectedItem.Value;

 29            string expYear = ddlExpiryDateYear.SelectedItem.Value;

 30            string expDate = expMonth + expYear;

 31            string startDate = "";

 32            if (ddlStartDateMonth.SelectedIndex > 0 && ddlStartDateYear.SelectedIndex > 0)

 33                startDate = ddlStartDateMonth.SelectedItem.Value + ddlStartDateYear.SelectedItem.Value;

 34            int issueNumber = 0;

 35            if (txtIssueNumber.Text != "")

 36            {

 37                try { issueNumber = int.Parse(txtIssueNumber.Text); }

 38                catch { }

 39            }

 40            string securityCode = txtSecurityCode.Text;

 41            string firstName = txtFirstName.Text;

 42            string lastName = txtLastName.Text;

 43            string street = txtStreet.Text;

 44            string city = txtCity.Text;

 45            string state = txtState.Text;

 46            string zip = txtZip.Text;

 47            string countryCode = "GB";

 48            string currencyCode = "GBP";

 49            string numericCurrencyCode = "826";

 50 

 51            //Do 3D secure look-up only for Maestro for now

 52            bool do3DSecure = (cardType == "Maestro");

 53 

 54            //Make first 3D secure call for look-up

 55            if (do3DSecure)

 56            {

 57                objLogFile.WriteLine("3D secure look-up commenced: " + DateTime.Now.ToString());

 58 

 59                //Set up request

 60                CentinelRequest centinelRequest = new CentinelRequest();

 61                centinelRequest.add("Version", ConfigurationSettings.AppSettings["CentinelMessageVersion"]);

 62                centinelRequest.add("MsgType", "cmpi_lookup");

 63                centinelRequest.add("ProcessorId", ConfigurationSettings.AppSettings["CentinelProcessorId"]);

 64                centinelRequest.add("MerchantId", ConfigurationSettings.AppSettings["CentinelMerchantId"]);

 65                centinelRequest.add("TransactionPwd", ConfigurationSettings.AppSettings["CentinelTransactionPwd"]);

 66                centinelRequest.add("TransactionType", "C");

 67                centinelRequest.add("Amount", ((int)(order.TotalAmount * 100)).ToString());

 68                centinelRequest.add("CurrencyCode", numericCurrencyCode);

 69                centinelRequest.add("CardNumber", cardNumber);

 70                centinelRequest.add("CardExpMonth", expMonth);

 71                centinelRequest.add("CardExpYear", expYear);

 72                centinelRequest.add("CardCode", securityCode);

 73                centinelRequest.add("OrderNumber", order.ID.ToString());

 74                centinelRequest.add("IPAddress", Request.ServerVariables["REMOTE_ADDR"]);

 75                objLogFile.WriteLine("... request prepared: " + centinelRequest.getUnparsedRequest().Replace(cardNumber, "XXXXXXXXXXXXXXXX"));

 76 

 77                //Set up variable to hold response

 78                string centinelErrorNo, centinelErrorDesc, centinelEnrolled = "U", centinelACSUrl = "",

 79                    centinelTransactionId = "", centinelPayload = "", centinelEciFlag = "", centinelTermUrl = "";

 80 

 81                //Make request and get response

 82                CentinelResponse centinelResponse = new CentinelResponse();

 83                try

 84                {                            

 85                    centinelResponse = centinelRequest.sendHTTP(ConfigurationSettings.AppSettings["CentinelTransactionUrl"], int.Parse(ConfigurationSettings.AppSettings["CentinelTimeout"]));

 86                    objLogFile.WriteLine("... response received: " + centinelResponse.getUnparsedResponse());

 87 

 88                    centinelErrorNo = centinelResponse.getValue("ErrorNo");

 89                    centinelErrorDesc = centinelResponse.getValue("ErrorDesc");

 90                    centinelEnrolled = centinelResponse.getValue("Enrolled");

 91                    centinelACSUrl = centinelResponse.getValue("ACSUrl");

 92                    centinelTransactionId = centinelResponse.getValue("TransactionId");

 93                    centinelPayload = centinelResponse.getValue("Payload");

 94                    centinelEciFlag = centinelResponse.getValue("EciFlag");

 95                    centinelTermUrl = "http" + (bool.Parse(ConfigurationSettings.AppSettings["UseSSL"]) ? "s" : "") + "://" + Request.ServerVariables["SERVER_NAME"] + Request.ServerVariables["URL"] + "?ID=" + order.ID + "&3DSecPostBack=1";

 96                }

 97                catch

 98                {

 99                    centinelErrorNo = "9040";

 100                    centinelErrorDesc = "Communication error";

 101                }

 102 

 103                //Check 3d secure response

 104                if (centinelErrorNo == "0")

 105                {

 106                    //No error, so check enrolled status

 107                    if (centinelEnrolled == "Y")

 108                    {

 109                        //Customer enrolled, so save collected details into session

 110                        Session["PendingOrderCurrencyCode"] = currencyCode;

 111                        Session["PendingOrderCardType"] = cardType;

 112                        Session["PendingOrderCardNumber"] = cardNumber;

 113                        Session["PendingOrderExpDate"] = expDate;

 114                        Session["PendingOrderStartDate"] = startDate;

 115                        Session["PendingOrderIssueNumber"] = issueNumber;

 116                        Session["PendingOrderSecurityCode"] = securityCode;

 117                        Session["PendingOrderFirstName"] = firstName;

 118                        Session["PendingOrderLastName"] = lastName;

 119                        Session["PendingOrderStreet"] = street;

 120                        Session["PendingOrderCity"] = city;

 121                        Session["PendingOrderState"] = state;

 122                        Session["PendingOrderZip"] = zip;

 123                        Session["PendingOrderCountryCode"] = countryCode;

 124                        Session["PendingOrderCentinelTransactionId"] = centinelTransactionId;

 125 

 126                        //Redirect to completion URL via form post

 127                        // - do this by writing out a form to the response stream that will submit automatically

 128                        StringBuilder centinelAuthForm = new StringBuilder();

 129                        centinelAuthForm.Append("<html>");

 130                        centinelAuthForm.Append("<body onload=\"document.auth.submit();\">");

 131                        centinelAuthForm.Append("<form name=\"auth\" action=\"").Append(centinelACSUrl).Append("\" method=\"post\">");

 132                        centinelAuthForm.Append("<input type=\"hidden\" name=\"PaReq\" value=\"").Append(centinelPayload).Append("\">");

 133                        centinelAuthForm.Append("<input type=\"hidden\" name=\"TermUrl\" value=\"").Append(centinelTermUrl).Append("\">");

 134                        centinelAuthForm.Append("<input type=\"hidden\" name=\"MD\" value=\"\">");

 135                        centinelAuthForm.Append("<p>If you are not automatically redirected, please click to proceed with authentication of your card details via 3-D Secure.</p>");

 136                        centinelAuthForm.Append("<p><input type=\"submit\" value=\"SUBMIT\"></p>");

 137                        centinelAuthForm.Append("</form>");

 138                        centinelAuthForm.Append("</body>");

 139                        centinelAuthForm.Append("</html>");

 140                        Response.Clear();

 141                        Response.Write(centinelAuthForm.ToString());

 142                        Response.End();

 143                    }

 144                    else

 145                    {

 146                        //Customer not-enrolled, so just carry on with PayPal process

 147                        DoPayPalRequest(objLogFile, orderId, currencyCode, cardType, cardNumber, expDate,

 148                            startDate, issueNumber, securityCode,

 149                            firstName, lastName, street, city, state, zip, countryCode,

 150                            "", centinelEnrolled, "", centinelEciFlag, "");

 151                    }

 152                }

 153                else

 154                {

 155                    //Error in 3d secure authentication, so exit

 156                    Display3DSecureErrors(centinelErrorNo, centinelErrorDesc);

 157                }

 158            }

 159            else

 160            {

 161                //3D secure not required, so just carry on with PayPal process without 3DS details

 162                DoPayPalRequest(objLogFile, orderId, currencyCode, cardType, cardNumber, expDate,

 163                    startDate, issueNumber, securityCode,

 164                    firstName, lastName, street, city, state, zip, countryCode,

 165                    "", "", "", "", "");

 166            }

 167        }

 168        finally

 169        {

 170            objLogFile.WriteLine("");

 171            objLogFile.Close();

 172        }

 173    }

 174 }

 175 

 176 private void Do3DSecAuthentication()

 177 {

 178    //Open log file

 179    TextWriter objLogFile;

 180    objLogFile = File.AppendText(ConfigurationSettings.AppSettings["PaypalLogFilePath"]);

 181    try

 182    {

 183        //Log and save PaResPayload posted back from 3DS

 184        string centinelPaRes = Request.Form["PaRes"];

 185        objLogFile.WriteLine("... payload posted: " + centinelPaRes);

 186 

 187        //Retrieve posted card and user details from session

 188        int orderId = int.Parse(Request.QueryString["ID"]);

 189        string currencyCode = (string)Session["PendingOrderCurrencyCode"];

 190        string cardType = (string)Session["PendingOrderCardType"];

 191        string cardNumber = (string)Session["PendingOrderCardNumber"];

 192        string expDate = (string)Session["PendingOrderExpDate"];

 193        string startDate = (string)Session["PendingOrderStartDate"];

 194        int issueNumber = (int)Session["PendingOrderIssueNumber"];

 195        string securityCode = (string)Session["PendingOrderSecurityCode"];

 196        string firstName = (string)Session["PendingOrderFirstName"];

 197        string lastName = (string)Session["PendingOrderLastName"];

 198        string street = (string)Session["PendingOrderStreet"];

 199        string city = (string)Session["PendingOrderCity"];

 200        string state = (string)Session["PendingOrderState"];

 201        string zip = (string)Session["PendingOrderZip"];

 202        string countryCode = (string)Session["PendingOrderCountryCode"];

 203 

 204        //Re-fill form

 205        ddlCardType.SelectedIndex = -1;

 206        ddlCardType.Items.FindByValue(cardType).Selected = true;

 207        txtCardNumber.Text = cardNumber;

 208        ddlExpiryDateMonth.SelectedIndex = -1;

 209        ddlExpiryDateMonth.Items.FindByValue(expDate.Substring(0, 2)).Selected = true;

 210        ddlExpiryDateYear.SelectedIndex = -1;

 211        ddlExpiryDateYear.Items.FindByValue(expDate.Substring(2)).Selected = true;

 212        if (issueNumber > 0)

 213            txtIssueNumber.Text = issueNumber.ToString();

 214        if (startDate != "")

 215        {

 216            ddlStartDateMonth.SelectedIndex = -1;

 217            ddlStartDateMonth.Items.FindByValue(startDate.Substring(0, 2)).Selected = true;

 218            ddlStartDateYear.SelectedIndex = -1;

 219            ddlStartDateYear.Items.FindByValue(startDate.Substring(2)).Selected = true;

 220        }

 221        txtSecurityCode.Text = securityCode;

 222 

 223        //Set up second 3D secure call for authentication

 224        objLogFile.WriteLine("3D secure authenticate commenced: " + DateTime.Now.ToString());

 225        CentinelRequest centinelRequest = new CentinelRequest();

 226        centinelRequest.add("Version", ConfigurationSettings.AppSettings["CentinelMessageVersion"]);

 227        centinelRequest.add("MsgType", "cmpi_authenticate");

 228        centinelRequest.add("ProcessorId", ConfigurationSettings.AppSettings["CentinelProcessorId"]);

 229        centinelRequest.add("MerchantId", ConfigurationSettings.AppSettings["CentinelMerchantId"]);

 230        centinelRequest.add("TransactionPwd", ConfigurationSettings.AppSettings["CentinelTransactionPwd"]);

 231        centinelRequest.add("TransactionType", "C");

 232        centinelRequest.add("TransactionId", (string)Session["PendingOrderCentinelTransactionId"]);

 233        centinelRequest.add("PAResPayload", centinelPaRes);

 234        objLogFile.WriteLine("... request prepared: " + centinelRequest.getUnparsedRequest());

 235 

 236        //Make request and check response

 237        CentinelResponse centinelResponse = new CentinelResponse();

 238        string centinelErrorNo, centinelErrorDesc, centinelPAResStatus = "",

 239            centinelSignatureVerification = "", centinelCavv = "", centinelEciFlag = "", centinelXid = "";

 240        try

 241        {

 242            centinelResponse = centinelRequest.sendHTTP(ConfigurationSettings.AppSettings["CentinelTransactionUrl"], int.Parse(ConfigurationSettings.AppSettings["CentinelTimeout"]));

 243            objLogFile.WriteLine("... response received: " + centinelResponse.getUnparsedResponse());

 244 

 245            centinelErrorNo = centinelResponse.getValue("ErrorNo");

 246            centinelErrorDesc = centinelResponse.getValue("ErrorDesc");

 247            centinelPAResStatus = centinelResponse.getValue("PAResStatus");

 248            centinelSignatureVerification = centinelResponse.getValue("SignatureVerification");

 249            centinelCavv = centinelResponse.getValue("Cavv");

 250            centinelEciFlag = centinelResponse.getValue("EciFlag");

 251            centinelXid = centinelResponse.getValue("Xid");

 252        }

 253        catch

 254        {

 255            centinelErrorNo = "9040";

 256            centinelErrorDesc = "Communication error";

 257        }

 258 

 259        //Check 3d secure response

 260        if (centinelErrorNo == "0")

 261        {

 262            //No error, so check response

 263            if ((centinelPAResStatus == "Y" || centinelPAResStatus == "A" || centinelPAResStatus == "U") && centinelSignatureVerification == "Y")

 264            {

 265                //Response OK, so process PayPay payment

 266                DoPayPalRequest(objLogFile, orderId, currencyCode, cardType, cardNumber, expDate,

 267                    startDate, issueNumber, securityCode,

 268                    firstName, lastName, street, city, state, zip, countryCode,

 269                    centinelPAResStatus, "Y", centinelCavv, centinelEciFlag, centinelXid);

 270            }

 271            else

 272            {

 273                //Response not OK, so can't go further

 274                lblResultMessage.Text = "Sorry, but we cannot complete your order as your card has not been authorised with 3D secure";

 275            }

 276        }

 277        else

 278        {

 279            //Error in response

 280            Display3DSecureErrors(centinelErrorNo, centinelErrorDesc);

 281        }

 282    }

 283    finally

 284    {

 285        objLogFile.WriteLine("");

 286        objLogFile.Close();

 287    }

 288 }

 289 

 290 private void DoPayPalRequest(TextWriter objLogFile, int orderId, string currencyCode,

 291    string cardType, string cardNumber, string expDate,

 292    string startDate, int issueNumber, string securityCode,

 293    string firstName, string lastName, string street, string city, string state, string zip, string countryCode,

 294    string centinelPAResStatus, string centinelEnrolled, string centinelCavv, string centinelEciFlag, string centinelXid)

 295 {

 296    //Make payment with PayPal Direct Payments...

 297 }

 298 

 299 private void Display3DSecureErrors(string centinelErrorNo, string centinelErrorDesc)

 300 {

 301    lblResultMessage.Text = "Error in 3D secure authentication";

 302    lblResultMessage.Text += "<ul>";

 303    string[] centinelErrorNos = centinelErrorNo.Split(',');

 304    string[] centinelErrorDescs = centinelErrorDesc.Split(',');

 305    for (int i = 0; i < centinelErrorNos.Length; i++)

 306        lblResultMessage.Text += "<li>" + centinelErrorDescs[i] + " (" + centinelErrorNos[i].Trim() + ")" + "</li>";

 307    lblResultMessage.Text += "</ul>";

 308 }

Search Engine Optimization Toolkit

2010-01-04T22:51:00.004Z

I recently downloaded and installed the Microsoft Search Engine Optimisation Toolkit, having been alerted to it via a blog post from Scott Guthrie. To install you need to have IIS7 administration tools on your PC - which seems a little odd as you can point it to any server and have it analyse your site. Perhaps originally it was intended for use only on sites on the specific server that it is installed, but it seems a little odd that it's not a standalone tool.

Nonetheless, it's very straightforward to install and use. Once installed using the Microsoft Web Platform Installer it appears as a new icon within IIS Manager (Control Panel > Administrative Tools > Internet Information Services (IIS) Manager).

Click on the icon to start a new analysis - enter a name, URL and you can fire it off.

Once complete a set of results are displayed summarising the results of the analysis. Helpfully they are presented grouped by error, which, as well as providing a straightforward way to view the potential problems, also serves as a useful learning tool for some SEO best practices.

Some of the problems that can be identified are as follows:

Broken links
Missing <h1> tag - considered by SEO experts to be one of the key fields used to rank pages... if the search term is in your <h1> tag the page be more likely to rank higher. It's also a common error to place the website title in the <h1> tag on deep pages, often simply because it's presented in the largest font. Generally you would want to put the most relevent title (usually the page title rather than the site one) in the <h1> tag, and use CSS to style it smaller should this be required by the design.
Missing (and too short) <title> tags
Missing <meta> description - perhaps not used so much now by ranking algorithms, but still often used to present summary information about the website in search engine results.
Multiple canonical formats - pages with the same content linked under different URLs. From an SEO perspective it's best to avoid this as search engines can penalise this (I got a few "false negatives" here though with the toolkit complaining about images which I presume is just a bug where the toolkit is assuming two different images of similar sizes and formats are returing the same content)
Missing alt tags
Invalid markup (e.g. tags opened and not closed). So the toolkit can also be used as a basic alternative to the W3C validator.

All in all, looks to be a useful tool that can be run on a site under development and content population in order to ensure best practices are being followed.

To View Model or not to View Model?

2009-12-13T21:10:00.027Z

Up to now in developing web applications using ASP.Net MVC I've eschewed the use of View Models and have simply passed my Domain Model objects into views, along with supplementary information as needed in the ViewData Dictionary. This technique allows the domain model object to be be made available in a strongly typed manner within the view, and to use model binding to put the object back together following form posts for create and update methods.

Certainly for the scale of application I've built so far this works just fine. In cases where I want to use additional information passed in the loosely typed ViewData dictionary, I'm able to cast to a typed variable at the top of the view in order to use it in a strongly typed manner from then on. And if I've needed to pass additional information back from my form posts, these can be added as additional parameters to the controller action set up to receive the post.

The following code illustrates this. The first method retrieves a User object and passes it in a strongly typed manner to the view, along with a select list for the different options for the user's Role. On the view, an additional field to indicate whether to send out a welcome email to the user can be checked. This isn't part of the model (it's not a field that needs to be persisted back to the database) and so it is passed as an additional parameter to the second method that responds to the form post.

    1 public class UserController : Controller

    2 {

    3     private UserService userService = new UserService();

    4     public ActionResult Edit(int id)

    5     {

    6         //Get user

    7         User user = userService.GetUser(id);

    8 

    9         //Get list of roles

   10         IList<Role> roles = userService.GetRoles();

   11 

   12         //Add list of roles to ViewData dictionary

   13         ViewData["RoleList"] = new SelectList(roles, "Id", "Name", user.Role.Id);

   14 

   15         //Pass the user as the model to the strongly typed view

   16         return View(user);

   17     }

   18 

   19     [AcceptVerbs(HttpVerbs.Post)]

   20     public ActionResult Edit(User user, bool sendEmail)

   21     {

   22         if (ModelState.IsValid)

   23         {

   24             //Save user details

   25             userService.SaveUser(user);

   26 

   27             //Send email flag set, so send welcome email

   28             if (sendEmail)

   29                 userService.SendWelcomeEmail(user);

   30             return RedirectToAction("Index");

   31         }

   32         else

   33         {

   34             IList<Role> roles = userService.GetRoles();

   35             ViewData["RoleList"] = new SelectList(roles, "Id", "Name", user.Role.Id);

   36             return View(user);

   37         }

   38     }

   39 }

It's clear though that in some ways these techniques aren't ideal, and it could be argued are really workarounds for not having a model that perfectly represents the data that the view is intended to display. In the example above it's really only a minor part of the view's data that doesn't come from the domain model, but in other cases the situation can be more obvious (perhaps you want a page that displays lists of two model objects - only one of which can be selected as the type for the strongly-typed view).

Which is where View Models come in. View Models aren't part of the Domain Model, and instead are created from them via composition or mapping. They can be designed to present only the information that the view requires, in a strongly typed manner.

There are a number of transformations you might want to carry out on the Domain Model object that has been designed to precisely represent the business entity or process, and the View Model object that you wish to pass to the view:

Additional Information - as noted above, you will often need to pass additional details to the view (e.g. to populate drop-down lists or breadcrumb trails), which can be made part of the view model.
Simplification - you may choose to present only the sub-set of fields that are required for display or to flatten the model
Logic - the view model could implement some custom logic on the base fields (e.g. presenting a calculated value to the view)
Formatting - the output of the view will eventually be a string (usually as part of an HTML response), and hence for consistency and in order to follow the policy of keeping the views as "dumb" as possible, you could carry out your date and number field formatting in order to present a pre-formatted string field to the view.

So sounds ideal... but of course the downside here is that it creates more work. Instead of simply passing the Domain Model object to the view and reinstantiating it using the model binder for data updates, it is necessary in convert between view and domain model and vice versa. And if in most cases there aren't hugely persuasive factors for implementation it can be that this extra layer, which can be fairly tedious and error-prone to code, doesn't appear to add too much value for the effort required.

View Model Techniques

In reading around on the various techniques for implementing view models the most useful and recommended information I found was on Steve Michelotti's blog and his post on ASP.NET MVC View Model Patterns. He distinguishes between two methods of creating view models - using composition and mapping.

The first using composition is where the Domain Model object is effectively contained by a View Model object, with the former being accessed via a field of the latter. Additional fields can be added to represent the extra information that needs to be passed to a view. The following code illustrates this idea based on the User Domain Model object described above.

    1 public class UserView

    2 {

    3     public User User { get; set; }

    4     public SelectList Roles { get; set; }

    5     public bool SendEmail { get; set; }

    6 }

    1 public ActionResult EditVM1(int id)

    2 {

    3     //Get user

    4     User user = userService.GetUser(id);

    5 

    6     //Get list of roles

    7     IList<Role> roles = userService.GetRoles();

    8 

    9     //Create view model

   10     UserView userView = new UserView();

   11     userView.User = user;

   12     userView.Roles = new SelectList(roles, "Id", "Name", user.Role.Id);

   13 

   14     //Pass the user as the model to the strongly typed view

   15     return View(userView);

   16 }

   17 

   18 [AcceptVerbs(HttpVerbs.Post)]

   19 public ActionResult EditVM1(UserView userView)

   20 {

   21     if (ModelState.IsValid)

   22     {

   23         //Save user details

   24         userService.SaveUser(userView.User);

   25 

   26         //Send email flag set, so send welcome email

   27         if (userView.SendEmail)

   28             userService.SendWelcomeEmail(userView.User);

   29         return RedirectToAction("Index");

   30     }

   31     else

   32     {

   33         return View(userView);

   34     }

   35 }

On the plus side it can be seen that this technique is relatively straightforward to implement and doesn't require too much additional work. However whilst it achieves the aim of providing all information to the view in a strongly typed manner, it doesn't do anything for the other potential benefits of simplification, logic or formatting.

The other technique is to implement a completely separate View Model class designed purely for the purposes of representing the particular data required for display in the view. Here the fields are mapped from the Domain Model object before presentation to the view. This code sample illustrates how this can be done for display of information in a form and it's subsequent processing after the post.

    1 public class UserView2

    2 {

    3     public int Id { get; set; }

    4     public string FirstName { get; set; }

    5     public string LastName { get; set; }

    6     public string Email { get; set; }

    7     public Role Role { get; set; }

    8 

    9     public SelectList Roles { get; set; }

   10     public bool SendEmail { get; set; }

   11 }

    1 public ActionResult EditVM2(int id)

    2 {

    3     //Get user

    4     User user = userService.GetUser(id);

    5 

    6     //Get list of roles

    7     IList<Role> roles = userService.GetRoles();

    8 

    9     //Create view model

   10     UserView2 userView = new UserView2();

   11     userView.Id = user.Id;

   12     userView.FirstName = user.FirstName;

   13     userView.LastName = user.LastName;

   14     userView.Email = user.Email; 

   15     userView.Role = user.Role;            

   16     userView.Roles = new SelectList(roles, "Id", "Name", user.Role.Id);

   17 

   18     //Pass the user as the model to the strongly typed view

   19     return View(userView);

   20 }

   21 

   22 [AcceptVerbs(HttpVerbs.Post)]

   23 public ActionResult EditVM2(UserView2 userView)

   24 {

   25     if (ModelState.IsValid)

   26     {

   27         //Save user details

   28         User user = new User();

   29         user.Id = userView.Id;

   30         user.FirstName = userView.FirstName;

   31         user.LastName = userView.LastName;

   32         user.Email = userView.Email;

   33         user.Role = userView.Role;     

   34         userService.SaveUser(user);

   35 

   36         //Send email flag set, so send welcome email

   37         if (userView.SendEmail)

   38             userService.SendWelcomeEmail(user);

   39         return RedirectToAction("Index");

   40     }

   41     else

   42     {

   43         return View(userView);

   44     }

   45 }

Enter Automapper...

Kind of ugly? It's certainly fairly tedious code to write mapping each of the properties - particularly when there's actually not a whole lot of difference between the object fields. At the very least we would want to factor out the property-to-property mapping from our controller to a supporting builder class, but nonetheless we would still have to handle to left/right transformation of the properties.

In these cases it's worth considering the use of Automapper - an object-to-object mapper that operates on the basis of conventions.

Using this the code can be simplified so long as you follow a few simple (and sensible) conventions in the design of your View Model fields.

The first step is to download the dll from the link above and add a reference to it from the application. Mappings only need to be created once in the application lifecycle, and hence you can do this in the global.asax file:

    1 protected void Application_Start()

    2 {

    3     RegisterRoutes(RouteTable.Routes);

    4     Mapper.CreateMap<User, UserView2>();

    5 }

To create a map between objects you call the Map method, indicating the source and destination types:

    1 public ActionResult EditVM3(int id)

    2 {

    3     //Get user

    4     User user = userService.GetUser(id);

    5 

    6     //Get list of roles

    7     IList<Role> roles = userService.GetRoles();

    8 

    9     //Create view model

   10     UserView2 userView = Mapper.Map<User, UserView2>(user);

   11     userView.Roles = new SelectList(roles, "Id", "Name", user.Role.Id);

   12 

   13     //Pass the user as the model to the strongly typed view

   14     return View(userView);

   15 }

   16 

   17 [AcceptVerbs(HttpVerbs.Post)]

   18 public ActionResult EditVM3(UserView2 userView)

   19 {

   20     if (ModelState.IsValid)

   21     {

   22         //Save user details

   23         User user = Mapper.Map<UserView2, User>(userView);

   24         userService.SaveUser(user);

   25 

   26         //Send email flag set, so send welcome email

   27         if (userView.SendEmail)

   28             userService.SendWelcomeEmail(user);

   29         return RedirectToAction("Index");

   30     }

   31     else

   32     {

   33         return View(userView);

   34     }

   35 }

Because the fields have the same name, Automapper can on the basis of conventions carry out the property-to-property mapping without having to explicity code this on a per field basis.

Conclusion

Generally I'm keen to ensue that an application code-base is internally consistent, which would mean if using View Models I would like to do so throughout, and to implement them using the same technique. And hence I'm a little reluctant at this stage to take this additional step on with the applicatons I am building - for most examples I look at, the benefit doesn't as yet seem to to outweigh the cost.

Whilst I can see the value and appreciate the best practice of their use with the mapped custom model technique, for now I expect to stick with the ViewData dictionary, but will be certainly be giving them due consideration as I take on new projects and perhaps larger projects using MVC.

UPDATE 15th April: further thought and work has lead me to change my conclusion on this...

Count Active Sessions in ASP.Net

2009-11-23T14:20:00.005Z

In order to monitor load on a site I've built and support, I wanted to add a simple counter to show how many active sessions were currently being handled by the web application.

The first technique was to use a counter variable held in the Application context. This was pretty straightforward - in global.asax increment the counter in the Session_Start event and decrement in the Session_End:

  1   Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs)

  2 

  3       'Increment session count

  4       Application.Lock()

  5       Application("SessionCount") += 1

  6       Application.UnLock()

  7 

  8   End Sub

  9 

   10   Sub Session_End(ByVal sender As Object, ByVal e As EventArgs)

   11 

   12       'Decrement session count

   13       Application.Lock()

   14       Application("SessionCount") = Application("SessionCount") - 1

   15       Application.UnLock()

   16 

   17   End Sub

Unfortunately this didn't turn out to be accurate in my case as I was using out of process session state, using State Server. This is a method of using an external service for the management of sessions, which is often a good idea as it means that user's session information will survive application restarts caused by uploading new .dlls or modifying the web.config file.

So instead made use of a performance counter, reading it's value in code for display in a web page:

  1   Private Sub DisplaySessionCount()

  2       Dim pc As PerformanceCounter

  3       Dim dblSessions As Double = 0

  4       If PerformanceCounterCategory.CounterExists("State Server Sessions Active", "ASP.NET") Then

  5           pc = New PerformanceCounter("ASP.NET", "State Server Sessions Active")

  6           dblSessions = pc.NextValue()

  7       End If

  8       lblSessionCount.Text = dblSessions.ToString()

  9   End Sub

There's a gotcha in that as it stands this will lead to a security exception. To avoid you need to add the website account (e.g. IUSR_MACHINENAME if IIS anonymous access and identity impersonate are being used), to the Performance Monitor and Perfomance Log groups under Computer Management > Local Users and Groups.

Paging with SQL Server and MySQL

2009-11-17T22:01:00.007Z

Paging sets of database records in a web application efficiently has long been a relatively tricky undertaking. Whilst web form controls such as the GridView offer control based paging very easily, they will still hit the database for all the records before processing the paging within the web application, and hence unnecessary amounts of data are passed between database and web server.

Database based techniques - only retrieving the particular rows you require in each request - are therefore generally to be preferred. But some of those provide their own headaches - for example as well as retrieving the particular set of rows for a page, you will often want to know what the full count of records to be able to display a message along the lines of: 200 records found. Page 1 of 20.

SQL Server Paging

Prior to the 2005 version, I would do this using SQL Server with two queries - one to get the page of data and another, using the same WHERE clause, to get the count. With SQL Server 2005 though, you can get both with a single query, using the following syntax:

CREATE PROCEDURE getProducts
  @page int,
  @recordsPerPage int
AS
WITH Results AS (
  SELECT ROW_NUMBER() OVER ( ORDER BY Name ) RowNumber,
      ID, Name
  FROM Products
)
SELECT ID,Name,
  (SELECT Count(*) FROM Results) TotalRows
FROM Results
WHERE @page = 0 OR @recordsPerPage = 0 OR RowNumber BETWEEN @recordsPerPage * (@page - 1) AND @recordsPerPage * @page
ORDER BY Name

With this stored procedure, passing 0 for the page number or the records per page simply returns all of them, but with non-zero values passed only the required page of data is returned. In addition, every row will have an additional column TotalRows that returns the full count of the query.

MySQL Server Paging

On a recent project we had need to port an SQL server database to MySQL, at which point we discovered this is one of the features that isn't so easy to translate. MySQL supports the LIMIT clause in SELECT statements. It also supports a clause called SQL_CALC_FOUND_ROW which returns the total number of records returned irrespective of the LIMIT clause. These two together can be used as the basis of a similar paging technique to that described above.

The crux of the problem though is that MySQL doesn't support the use of parameters in the LIMIT clause in functions (stored procedures).

Instead you have to make use of prepared statements and execute two of them within the function to have the same result as the SQL server version. An example follows:

CREATE PROCEDURE `getProducts`(page INT,@recordsPerPage INT)
BEGIN

SET @sql = CONCAT(
  "SELECT SQL_CALC_FOUND_ROWS ID,Name
  FROM products
  LIMIT ", page,",",@recordsPerPage,"; "
);

set @sql2 = "SELECT found_rows();";

prepare stmt from @sql;
execute stmt;

prepare stmt from @sql2;
execute stmt;

drop prepare stmt;

END;

In this case, rather than having one result set with an additional column holding the total number of rows, there will be a second result set containing just a single field where the total record count can be extracted.

In .Net the IDataReader method NextResult can be used to access this additional recordset.

Integrating Paypal Payment Pro (Direct Payment)

2009-10-03T13:37:00.010+01:00

I've recently had need to integrate PayPal payments on a website, using their Payments Pro interface. It's actually very straightforward, although initally didn't appear so as the information they provide on their website and forums is rather confusing. This is primarily due to the different versions of their API that have been provided historically, plus there are a number of different techniques to access it.

All I need was a simple request to authorise a set of card details, getting back a response to allow the order to either be processed appropriately.

Pulling together with my own code a few different examples online, the Paypal documentation and some advice from their technical support led me to this function - which I'll post in the hope of helping rather than hindering someone else in the same position!

    1 private void makePayPalPayment()

    2 {

    3   //Open log file

    4   TextWriter objLogFile; 

    5   objLogFile = File.AppendText(ConfigurationManager.AppSettings["PaypalLogFilePath"]);

    6   try

    7   {

    8     objLogFile.WriteLine("Paypal request commenced: " + DateTime.Now.ToString());

    9 

   10     //Get details for request    

   11     // - get paypal endpoint and authorisation details

   12     string endPoint = ConfigurationManager.AppSettings["PayPalEndPoint"];

   13     string username = ConfigurationManager.AppSettings["PayPalUserName"];

   14     string password = ConfigurationManager.AppSettings["PayPalPassword"];

   15     string signature = ConfigurationManager.AppSettings["PayPalSignature"];

   16     // - get IP of current user

   17     string ip = Request.ServerVariables["REMOTE_ADDR"];

   18     // - get customer details (from form fields)

   19     string cardType = ddlCardType.SelectedItem.Value;

   20     string cardNumber = txtCardNumber.Text;

   21     string expDate = ddlExpiryDateMonth.SelectedItem.Value + ddlExpiryDateYear.SelectedItem.Value;

   22     string securityCode = txtSecurityCode.Text;

   23     string firstName = txtFirstName.Text;

   24     string lastName = txtLastName.Text;

   25     string street = txtStreet.Text;

   26     string city = txtCity.Text;

   27     string state = txtState.Text;

   28     string zip = txtZip.Text;

   29     string countryCode = ddlCountry.SelectedItem.Value;    

   30     // - get order details (hardcoded in this example)

   31     decimal orderAmount = 10.0;

   32     string currencyCode = "GBP";

   33 

   34     //Build request

   35     StringBuilder request = new StringBuilder();

   36     request.Append("VERSION=52.0");

   37     request.Append("&USER=" + HttpUtility.UrlEncode(username));

   38     request.Append("&PWD=" + HttpUtility.UrlEncode(password));

   39     request.Append("&SIGNATURE=" + HttpUtility.UrlEncode(signature));

   40     request.Append("&METHOD=DoDirectPayment");

   41     request.Append("&PAYMENTACTION=Sale");

   42     request.Append("&AMT=" + orderAmount.ToString("F"));

   43     request.Append("&IPADDRESS=" + HttpUtility.UrlEncode(ip)); 

   44     request.Append("&CREDITCARDTYPE=" + HttpUtility.UrlEncode(cardType));

   45     request.Append("&ACCT=" + HttpUtility.UrlEncode(cardNumber));

   46     request.Append("&EXPDATE=" + HttpUtility.UrlEncode(expDate)); 

   47     request.Append("&CVV2=" + HttpUtility.UrlEncode(securityCode));

   48     request.Append("&FIRSTNAME=" + HttpUtility.UrlEncode(firstName));

   49     request.Append("&LASTNAME=" + HttpUtility.UrlEncode(lastName));

   50     request.Append("&STREET=" + HttpUtility.UrlEncode(street));

   51     request.Append("&CITY=" + HttpUtility.UrlEncode(city));

   52     request.Append("&STATE=" + HttpUtility.UrlEncode(state)); 

   53     request.Append("&ZIP=" + HttpUtility.UrlEncode(zip));

   54     request.Append("&INVOICEID=" + HttpUtility.UrlEncode(order.ID.ToString()));

   55     request.Append("&COUNTRYCODE=" + HttpUtility.UrlEncode(countryCode));

   56     request.Append("&CURRENCYCODE=" + HttpUtility.UrlEncode(currencyCode));

   57     objLogFile.WriteLine("Request: " + request.ToString());

   58 

   59     //Set up flags for success of operation

   60     bool success = false;

   61     string errorMessage = "";

   62 

   63     //Make Paypal request

   64     HttpWebRequest webRequest = WebRequest.Create(endPoint) as HttpWebRequest;

   65     webRequest.Method = "POST";

   66     webRequest.ContentType = "application/x-www-form-urlencoded";

   67     webRequest.ContentLength = request.Length;

   68     StreamWriter writer = new StreamWriter(webRequest.GetRequestStream());

   69     writer.Write(request.ToString());

   70     writer.Close();

   71 

   72     //Get Paypal response

   73     HttpWebResponse webResponse = (HttpWebResponse)webRequest.GetResponse();

   74 

   75     //Check status

   76     if (webRequest.HaveResponse && (webResponse.StatusCode == HttpStatusCode.OK || webResponse.StatusCode == HttpStatusCode.Accepted))

   77     {

   78       //Response received, so parse into name value pairs for processing

   79       StreamReader reader = new StreamReader(webResponse.GetResponseStream());

   80       string responseString = reader.ReadToEnd();

   81       objLogFile.WriteLine("Response: " + responseString);

   82       reader.Close();

   83       char[] ampersand = { '&' };

   84       char[] equalsign = { '=' };

   85       string[] pairs = responseString.Split(ampersand);                

   86       for (int i = 0; i < pairs.Length; i++)

   87       {

   88         string[] pair = pairs[i].Split(equalsign);

   89         //One pair will be the acknowledgement (ACK) - if this is not set to failure we know the payment has been authorised

   90         if (pair[0].ToLower() == "ack" && HttpUtility.UrlDecode(pair[1]).ToLower() != "failure")

   91         {

   92           success = true;

   93         }

   94         //One or more messages wil be returned in the case of a failure, so build up list of messages to present to user (or developer :-))

   95         if (pair[0].Length > 13 && pair[0].Substring(0,13).ToLower() == "l_longmessage")

   96         {

   97           errorMessage += "<li>" + HttpUtility.UrlDecode(pair[1]) + "</li>";

   98         }

   99       }

  100     }

  101 

  102     //Display appropriate message to user

  103     if (success)

  104     {

  105       // *** process authorised order ***

  106     }

  107     else

  108     {

  109       lblResultMessage.Text = "Sorry, but your payment transaction cannot be proceed. Please review the following messages and try again, or select another payment method.";

  110       lblResultMessage.Text += "<ul>" + errorMessage + "</ul>";

  111     }

  112   }

  113   finally 

  114   {

  115     objLogFile.WriteLine("");

  116     objLogFile.Close();

  117   }

  118 }

MVC/Jquery Calendar

2009-09-21T22:55:00.009+01:00

One of the main pluses of working with the ASP.Net MVC framework is of course the separation of concerns it promotes with the split between the controller and the view in the UI. This is not only apparent in the standard method of having the controller obtain the data required for display, and passing this to a view for display as XHTML. The same clear separation of purpose can be made use of when the output of the view is other formats too.

In a recent project I've had need to represent a calendar of events - a simple side bar to the website that displays a calendar view with days that have events associated with them highlighted. Clicking on the day displays the list of events below.

In implementing this feature I made use of the controller and view pattern in three distinct ways.

Having a controller render an XHTML page view
Having a controller render JSON data for use from an AJAX request.
Having a controller render a partial view to support an AJAX page update.

Application Structure

The back-end of this MVC application consisted of a database table of events, accessed via a stored procedure and an ADO.Net repository layer. My controller made calls to obtain data in the form of custom business entities from this repository layer via a service layer.

The controller consists of three methods as illustrated in listing 1.

Listing 1: Controller methods

    1  /// <summary>

    2  /// Renders calendar partial view

    3  /// </summary>

    4  /// <returns></returns>

    5  public ActionResult Calendar()

    6  {

    7      return View();

    8  }

    9 

   10  /// <summary>

   11  /// Renders events for month in JSON format (for AJAX page injection)

   12  /// </summary>

   13  /// <param name="year">Year</param>

   14  /// <param name="month">Month</param>

   15  /// <returns></returns>

   16  public JsonResult ListAsJson(int year, int month)

   17  {

   18      IList<Event> events = eventsService.GetEventList(year, month, 0);

   19      return this.Json(events);

   20  }

   21 

   22  /// <summary>

   23  /// Returns partial view with events for selected day (for AJAX page injection)

   24  /// </summary>

   25  /// <param name="year">Year</param>

   26  /// <param name="month">Month</param>

   27  /// <param name="day">Day</param>

   28  /// <returns></returns>

   29  public ActionResult EventsForDay(int year, int month, int day)

   30  {

   31      IList<Event> events = eventsService.GetEventList(year, month, day);

   32      return View(events);

   33  }

The first, Calendar(), is pretty much as a simple as a controller method gets. Initially I had this retrieving the event data and passing it to the view, but when I realised I wanted to go the AJAX route for display as the calendar is paged from month to month, I decided not to retrieve any data for the initial display. So this simply renders the view.

As the calendar is displayed on most pages of the website, it's called via a RenderAction method coded into the site's master page.

The second ListAsJson() retrieves the events for the supplied year and month and renders them in JSON format. This format, which is native JavaScript of course, can be used directly in the client side code that makes an AJAX call as the months are selected in the calendar.

Finally, EventsForDay() similarly retrieves event data, this time for a specified day. The event data is supplied to a partial view which consists of not a whole XHTML template, but just a fragment. This is then injected into the page using JavaScript.

Listing 2: View XHTML

    1 <div id="calendar-render"></div>

    2 

    3 <script src="<%= Url.Content("~/js/calendar.js") %>" type="text/javascript"></script>

    4 

    5 <div id="calendar-events-display">

    6     <h3></h3>    

    7     <div id="calendar-events-display-events"></div>

    8 </div>

As the major part of the work is via AJAX calls from JavaScript, the view is very simple. Really it just contains a couple of placeholders for the calendar control and event list to be rendered.

Listing 3: JavaScript (jquery) AJAX code

    1 var selectableDates;

    2 var months = new Array(13);

    3 months[0] = "January";

    4 months[1] = "February";

    5 months[2] = "March";

    6 months[3] = "April";

    7 months[4] = "May";

    8 months[5] = "June";

    9 months[6] = "July";

   10 months[7] = "August";

   11 months[8] = "September";

   12 months[9] = "October";

   13 months[10] = "November";

   14 months[11] = "December";

   15 

   16 //Hook-up the jquery datepicker

   17 $(document).ready(function() {

   18     var today = new Date();

   19     getEventsForMonth(today.getUTCFullYear(), today.getMonth() + 1);

   20 });

   21 

   22 //Set up the datepicker

   23 function initializeDatePicker(startDate) {

   24 

   25     //Check if current month - if so use current day rather than 1st of the month

   26     var today = new Date();

   27     if (startDate.getUTCFullYear() == today.getUTCFullYear() && startDate.getMonth() == today.getMonth())

   28         startDate = today;

   29 

   30     $("div#calendar-render").datepicker('destroy'); // Destroy if previously created so render will call again when events wired up

   31     $("div#calendar-render").datepicker({

   32         defaultDate: startDate,

   33         beforeShowDay: renderDay,

   34         onSelect: showEvents

   35     }).datepicker("option", { onChangeMonthYear: getEventsForMonth }); 

   36 }

   37 

   38 //Render a day as selectable if there's an event on that day

   39 function renderDay(date) {

   40     return [isDateSelectable(date), ""];

   41 }

   42 

   43 //Checks to see if date to be rendered is in the list of selectable dates

   44 function isDateSelectable(date) {

   45     for (var i = 0; i < selectableDates.length; i++) {

   46         if (selectableDates[i].getDate() == date.getDate())

   47             return true;

   48     }

   49     return false;

   50 }

   51 

   52 //Makes AJAX call to get events list for month and populates the selectableDates array

   53 function getEventsForMonth(year, month, inst) {

   54     $("div#calendar-events-display").hide();

   55     selectableDates = new Array();

   56     $.getJSON("/Events/ListAsJson?year=" + year + "&month=" + month, null, function(data) {

   57         var i = 0;

   58         $.each(data, function(index, evt) {

   59             selectableDates[i] = extractDateFromJSONResponse(evt.Start);

   60             i++;

   61         });

   62         initializeDatePicker(new Date(year, month - 1, 1));

   63     });

   64 }

   65 

   66 //Extracts date object from JSON formatted date response

   67 function extractDateFromJSONResponse(jsonDate) {

   68     return new Date(parseInt(jsonDate.substr(jsonDate.indexOf("/Date(") + 6, jsonDate.length - 8)));

   69 }

   70 

   71 //Show events for selected day

   72 function showEvents(dateText, inst) {

   73     var d = new Date(dateText);

   74     var day = d.getDate();

   75     var month = d.getMonth() + 1;

   76     var year = d.getUTCFullYear();

   77     $("div#calendar-events-display").hide();

   78     $("div#calendar-events-display h3").html(day + " " + months[month - 1] + " " + year);

   79     $.get("/Events/EventsForDay?year=" + year + "&month=" + month + "&day=" + day, null, function(data, textStatus) {

   80         $("div#calendar-events-display-events").html(data);

   81         $("div#calendar-events-display-events div:nth-child(odd)").addClass("alt");

   82         $("div#calendar-events-display-events div div:nth-child(odd)").removeClass("alt");

   83         $("div#calendar-events-display").show("fast");

   84     });        

   85 }

The JavasScript code itself makes use of the Jquery UI DatePicker that can be custom styled to provide a very neat client side calendar control. It provides events such as for day rendering and navigating from month to month, that I've hooked into in order to make the AJAX requests to retrieve the events for each month, and for rendering the listing of events for a day when a particular date is selected.

Validation Framework with MVC Support (Part 2) - Tests

2009-08-25T20:03:00.006+01:00

Following on from the previous post describing a validation framework I'm planning to use on MVC projects, this post extends the development to incorporate a range of tests.

To recap, I've set up a domain model structure that consists of:

Entities - simple classes representing the fields and relationships of my business objects. They consist of properties and methods that act only on those properties (i.e. they have no external dependencies.
Repository layer - a number of data access methods that provide CRUD methods for retrieving and data from the database and instantiating the entities, and persisting their changes back.
Service layer - a layer consisting of methods that sit between the UI and repository layer, passing method calls and objects in between.

These classes combine to provide validation at three levels:

Entity validation - these are C# methods defined on the entity object itself to internally validate its fields. They will consist of checks for required fields, range checking and internal field comparisons.
Service validation - these are checks made against external dependencies. Examples might be user authorisation or arbitrary business rules such as "customer records can only be saved on a Friday".
Database validation - basically wrappers around database exceptions, such as errors caused due to deleting records where foreign key constraints are violated, or entry of duplicate key values.

In order to test the classes created for each entity type, I've set up four folders, each for different types of tests:

Entity tests - unit tests on the entity self-validation rules
Service tests - unit tests on the service layer, using a mocked repository
Controller tests - unit tests on the MVC controller class, using a mocked service layer
Integration tests - tests that hit the database, running against a known set of data

An example of each follows.

Customer Entity Test

This test prepares a customer object with a known validation error (a missing name). The rule violations are queried and asserted to check there is a single correct exception reported.

    1 private Customer PrepareCustomer()

    2 {

    3     return new Customer

    4     {

    5         Id = 1,

    6         Name = "Test Customer"

    7     };

    8 }

    9 

   10 [Description("Entity Test"), TestMethod]

   11 public void Customer_InvalidCustomerWithMissingName_GeneratesException()

   12 {

   13     //Arrange

   14     Customer customer = PrepareCustomer();

   15 

   16     //Act

   17     customer.Name = "";

   18 

   19     //Assert

   20     Assert.AreEqual(1, customer.GetRuleViolations().Count);

   21     Assert.AreEqual("Name is a required field.", customer.GetRuleViolations()[0]);

   22 }

Customer Service Test

This unit test acts on a method in the service layer. The idea here is to isolate the function and test it without dependencies - i.e. by mocking the repository layer to the test doesn't actually hit the database. In other words, by mocking the repository, we can say given a defined behaviour in the repository method, does the service method respond appropriately. Here we are checking that the correct exceptions are thrown given and valid and invalid Customer object.

    1 private CustomersService service = new CustomersService(MockCustomersRepository());

    2 

    3 static ICustomersRepository MockCustomersRepository()

    4 {

    5     //Set up test data

    6     IList<Customer> customers = new List<Customer>

    7             {

    8                 new Customer {Id = 2, Name = "Drama"}, 

    9                 new Customer {Id = 1, Name = "Entertainment"}

   10             };

   11 

   12     // Generate an implementor of IProductsRepository at runtime using Moq

   13     var mockCustomersRepository = new Moq.Mock<ICustomersRepository>();

   14     mockCustomersRepository.Setup(x => x.UpdateCustomer(It.IsAny<Customer>())).Verifiable();

   15 

   16     return mockCustomersRepository.Object;

   17 }

   18 

   19 private Customer PrepareCustomer()

   20 {

   21     return new Customer

   22     {

   23         Id = 1,

   24         Name = "Test Customer"

   25     };

   26 }

   27 

   28 [Description("Service Test"), TestMethod]

   29 public void CustomerService_UpdateValidCustomerWithValidAccount_GeneratesNoExceptions()

   30 {

   31     // Arrange

   32     Customer customer = PrepareCustomer();

   33     User user = new User { Id = 1, Role = new Role { Id = 1, Name = "Administrator" } };

   34 

   35     // Act: Request the update method for customer that will pass validation and with valid account

   36     service.UpdateCustomer(customer, user);

   37 

   38     // Assert: Check the results

   39 }

   40 

   41 [Description("Service Test"), TestMethod]

   42 public void CustomerService_UpdateCustomerWithMissingName_GeneratesRuleExceptions()

   43 {

   44     // Arrange

   45     Customer customer = PrepareCustomer();

   46     customer.Name = "";

   47     User user = new User { Id = 1, Role = new Role { Id = 1, Name = "Administrator" } };

   48 

   49     // Act: Request the update method for customer that will fail validation due to missing name

   50     bool ok = false;

   51     try

   52     {

   53         service.UpdateCustomer(customer, user);

   54         ok = true;

   55     }

   56     catch (RuleException ex)

   57     {

   58         // Assert: Check the results

   59         Assert.AreEqual(1, ex.Errors.Count);

   60         Assert.AreEqual("Name is a required field.", ex.Errors[0]);

   61     }

   62     Assert.IsFalse(ok);

   63 }

Customer Integration Test

This test involves the database, and confirms that the correct information is written to and retrieved from it.

    1 [Description("Integration Test"), TestMethod]

    2 public void CustomerIntegration_UpdateValidCustomerWithValidAccount_UpdatesCustomerDetails()

    3 {

    4     //Arrange            

    5     Customer customer = service.GetCustomer(1);

    6     User user = new User { Id = 1, Role = new Role { Id = 1, Name = "Administrator" } };

    7 

    8     //Act            

    9     customer.Name = "Test Customer Changed";

   10     service.UpdateCustomer(customer, user);

   11     customer = service.GetCustomer(1);

   12 

   13     //Assert

   14     Assert.AreEqual("Test Customer Changed", customer.Name);

   15 

   16     //Revert

   17     customer.Name = "Test Customer";

   18     service.UpdateCustomer(customer, user);

   19     customer = service.GetCustomer(1);

   20     Assert.AreEqual(1, customer.Id);

   21     Assert.AreEqual("Test Customer", customer.Name);

   22 }

Customer Controller Test

In this test we are mocking the service layer, and testing the behaviour of the controller. Again we can say that given a mocked behaviour of the service layer, do the controller methods respond with the appropriate ActionResults (redirects or view rendering).

    1 private ICustomersService CustomersService = MockCustomersService();

    2 

    3 static ICustomersService MockCustomersService()

    4 {

    5     //Set up test data

    6     IList<customer> customers = new List<customer>

    7     {

    8         new customer {Id = 1, Name = "Test Customer"}, 

    9         new customer {Id = 2, Name = "Test Customer Two"}

   10     };

   11 

   12     // Generate an implementor of ICustomersService at runtime using Moq

   13     var mockCustomersService = new Moq.Mock<ICustomersService>();

   14     mockCustomersService.Setup(x => x.GetCustomer(1).Returns(Customers[0]);

   15     mockCustomersService.Setup(x => x.UpdateCustomer(It.Is<Customer>(t => t.Name == "Invalid"), null)).Throws(new RuleException(new NameValueCollection { { "Name", "Invalid" } }));

   16     return mockCustomersService.Object;

   17 }

   18 

   19 [Description("Controller Test"), TestMethod]

   20 public void CustomersController_EditValidCustomer_ReturnsCorrectRedirectAction()

   21 {

   22     // Arrange: get controller

   23     CustomersController controller = new CustomersController(CustomersService, usersService);

   24     ContextMocks mocks = new ContextMocks(controller);

   25 

   26     // Act: Request the edit action for Customer that will pass validation

   27     var result = controller.Edit(new Customer { Id = 3, Name = "Valid" }, null, null);

   28 

   29     // Assert: Check the results

   30     Assert.IsNotNull(result);

   31     Assert.IsInstanceOfType(result, typeof(RedirectToRouteResult));

   32     Assert.AreEqual("Index", ((RedirectToRouteResult)result).RouteValues["action"]);

   33 }

   34 

   35 [Description("Controller Test"), TestMethod]

   36 public void CustomersController_EditInvalidCustomer_ReturnsViewWithErrorsInModelState()

   37 {

   38     // Arrange: get controller

   39     CustomersController controller = new CustomersController(CustomersService, usersService);

   40     ContextMocks mocks = new ContextMocks(controller);

   41 

   42     // Act: Request the edit action for Customer that will fail validation           

   43     ActionResult result = null;

   44     Customer Customer = CustomersService.GetCustomer(3, CustomerLoad.LoadCustomerOnly);

   45     Customer.Name = "Invalid";

   46     result = controller.Edit(Customer, null, null);

   47 

   48     // Assert: Check the results

   49     Assert.IsNotNull(result);

   50     Assert.IsInstanceOfType(result, typeof(ViewResult));

   51     Assert.AreEqual("Edit", ((ViewResult)result).ViewName);

   52     Assert.IsFalse(controller.ModelState.IsValid);

   53     Assert.AreEqual(1, controller.ModelState.Count);

   54 }

Conclusion

As you can see, this is a very simple, yet fairly comprehensive set of tests on the domain model. Although there's a fair bit of work involved for each set of classes, the patterns are straightforward and hence should be relatively easy for a developer or team to adhere to. Following it I hope is going to lead to a robust domain model, with a consistent and reliable means of validating business rules.

One last note on the integration tests. As they involve hitting the database, they aren't classed as unit tests - they suffer from external dependencies that may lead to brittleness, and they will be a little slower to run due to the need to connect for real to the database. They are therefore a bit more painful to maintain - they can quickly become out of synch with the data, leading to false negative results, and untrustworthy tests.

It's going to take a bit of discipline to maintain this I'm sure - but the way I'm looking to do this is that once I had the bulk of my database structure built, I used the database publishing wizard to generate a script of the full schema and data. This I amended slightly to add statements to drop and create the database, and then checked the file into the solution.

From now on, following any updates to the database schema, I must also make the change to the script. Doing this means that when I come to run the integration tests that are coded to expect particular data values in return, I just need to run the script before running the tests.