Jack Altiere

Ninject with MVC and ValidationAttributes

Jack Altiere — Tue, 04 May 2010 14:40:01 +0000

I was recently working on an MVC application and I ran into a problem. I was creating a ValidationAttribute and I needed to have access to my repository in this attribute. The use case is that I want to add a release of an application, and I want to make sure that the ID being passed in is actually a valid application. My first pass at this was to try and use property injection, like this:

public class ApplicationIDValidAttribute : ValidationAttribute
{
    [Inject]
    public IRepository AppRepo { set; private get; }

    public override bool IsValid(object value)
    {
        // Don't force required here, they can use the required attribute.
        if (value == null)
        {
            return true;
        }

        int appID;
        if (!Int32.TryParse(value.ToString(), out appID))
        {
            return false;
        }

        // This did not work, AppRepo was not injected
        var app = AppRepo.LoadApplicationById(appID);

        return (app != null);
    }
}

The problem here is that because of the way attributes are instantiated, this injection method does not work. In the above code sample, when this gets executed my AppRepo is null.

Service Locator

The solution to my problem ended up being the use of a service locator to handle my injection. I could have went with the Common Service Locator library, but that isn’t exactly what I want. I already know what DI container I want to use, so completely abstracting that layer away isn’t what I need. I ended up creating a library to handle the wiring up of Ninject, and to basically act as a wrapper to access the Ninject kernel.

public static class Container
{
    private static IKernel _kernel;

    public static void Initialize(IKernel kernel)
    {
        _kernel = kernel;
    }

    public static T Get()
    {
        return _kernel.Get();
    }

    public static object Get(Type type)
    {
        return _kernel.Get(type);
    }
}

Then, I could wire up my service locator in my global.asax file, like this:

// This is in my global.asax.cs file
// Required because I inherited from NinjectHttpApplication
protected override IKernel CreateKernel()
{
    var kernel =  new StandardKernel(new DataModule());

    // Gives my wrapper class access to the kernel instance
    Container.Initialize(kernel);

    return kernel;
}

// This is my data module for reference.
public class DataModule : NinjectModule
{
    public override void Load()
    {
        Bind(typeof (IRepository<>)).To(typeof (Repository<>));
    }
}

Then, to close the loop, I can wire up my attribute like this:

public class ApplicationIDValidAttribute : ValidationAttribute
{
    public override bool IsValid(object value)
    {
        // Don't force required here, they can use the required attribute.
        if (value == null)
        {
            return true;
        }

        int appID;
        if (!Int32.TryParse(value.ToString(), out appID))
        {
            return false;
        }

        var repo = Container.Get>();
        var app = repo.LoadApplicationById(appID);

        return (app != null);
    }
}

Don’t Abuse It

I try to only use my service locator container when I have to. I use standard property or constructor injection whenever possible, but this does provide a nice way to be able to inject into my ValidationAttribute classes.

jQuery Grid Data with jqGrid

Jack Altiere — Tue, 27 Apr 2010 13:08:40 +0000

Creating a grid of data is a common task when building a dynamic website. I recently started looking for a good grid component that would play nice with both JQuery and ASP.NET MVC. The solution I ended up with is jqGrid. I’m going to walk through a simple example of setting up a grid and populating it via JSON with an MVC controller. I’ll also show how to add, edit and delete rows to the grid.

Setup

First, I created a simple User table and generated my Linq to SQL classes. I just want to show a simple grid of users, showing ID, First Name, Last Name, Email address and Birthday. When we are done, the finished grid will look something like this:

One thing that I like about this grid is that it supports jQuery UI right out of the box. After downloading jQuery UI and jqGrid and following the installation instructions, just reference the relevent .css and .js files to get started, which I did in a master page:

HTML

The first thing I want to do is set up my grid on the client site. This requires two parts. The first is the HTML landing spot for the grid, pager and search box, which looks like this:

Javascript

The next part is the Javascript that takes care of configuring our grid and hooking it up to the HTML elements on the page.

    $(document).ready(function() {
        jQuery("#grid").jqGrid({
            url: '/Home/SampleGridData/',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Id', 'First Name', 'Last Name', 'Email', 'Birthday'],
            colModel: [
              { name: 'UserID', index: 'UserID', width: 60, align: 'center', editable: true, editrules: { edithidden: false} },
              { name: 'FirstName', index: 'FirstName', width: 200, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
              { name: 'LastName', index: 'LastName', width: 200, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
              { name: 'Email', index: 'Email', width: 200, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true, email: true} },
              { name: 'Birthday', index: 'Birthday', width: 200, align: 'center', sortable: true, editable: true, editrules: { required: true }
            ],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'UserID',
            sortorder: "asc",
            viewrecords: true,
            imgpath: '/Content/Images',
            caption: 'JqGrid Sample',
            scrollOffset: 0
        });

        jQuery("#grid").jqGrid('navGrid', '#pager',
            { edit: true, add: true, del: true, search: false },
            { url: "/Home/EditSampleGrid", closeAfterEdit: true, beforeShowForm: function(formid) { $("#tr_UserID", formid).hide(); $("#Birthday").datepicker(); } },
            { url: "/Home/AddSampleGrid", closeAfterAdd: true, beforeShowForm: function(formid) { $("#tr_UserID", formid).hide(); $("#Birthday").datepicker(); } },
            { url: "/Home/DeleteSampleGrid" }, {});

        $("#search").filterGrid("#grid", {
            gridModel: false,
            filterModel: [{
                label: 'Search',
                name: 'search',
                stype: 'text'
            }]
       });
 });

This really isn’t as bad as it looks. Once you start getting into jqGrid, I suggest spending some time getting familiar with the wiki, I spent a lot of time there learning how the plugin works. I will explain some of the important pieces. First, the url above is set to /Home/SampleGridData. This means that I have a method in my home controller called SampleGridData that is supplying me with the data to fill the grid. The format that jqGrid expects is pretty particuliar, you can see from the documentation what is expected.

Grid Configuration

There are a lot of options available to configure in the grid. I want to quickly touch on some of the options I used in this sample. A lot of your configuration is going to happen in the colModel section. Here you can set up the width of your fields, the data types, etc. More importantly, you can set up which columns are hidden, and what the validation rules are for your columns. I didn’t show it, but you can also set up custom field validation as well as custom data formatting rules. I used the editrules section for each column to mark any fields as required that I wanted, and I also took advantage of being able to set up my Email field as type ‘email’’. This allows the grid to check to see if the input is in the correct format. You can also make any column sortable by just applying the sortable: true parameter.

C#

This method is what I’m using to initially load the grid data. As you can see, the code is fairly straight forward:

public ActionResult SampleGridData(string sidx, string sord, int page, int rows, string search)
{
    var db = new BlogSamplesDataContext();

    var pageIndex = Convert.ToInt32(page) - 1;
    var pageSize = rows;
    var totalRecords = db.Users.Count();
    var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);

    // This is possible because I'm using the LINQ Dynamic Query Library
    var users = db.Users
            .OrderBy(sidx + " " + sord)
            .Skip(pageIndex * pageSize)
            .Take(pageSize).AsQueryable();

    var jsonData = new
    {
        total = totalPages,
        page = page,
        records = totalRecords,
        rows = (
            from User u in users
            select new {
                i = u.UserID,
                cell = new[] { u.UserID.ToString(), u.FirstName, u.LastName, u.Email, u.Birthday.Value.ToShortDateString() }
        }).ToArray()
    };

    return Json(jsonData);
}

For the sake of the example I’m doing everything in the controller rather than implementing a repository, which I would normally do. One thing to point out, I did not choose the parameter names in this method. (with the exception of search, but we’ll get to that later) This is the data that jqGrid is going to post to my controller to handle sorting, paging, filtering, etc.

You may notice above that my OrderBy statement is taking a string parameter. This is possible through the LINQ Dynamic Query Library, which allows you to use string based expressions rather than type safe Lambda expressions in your queries. Using this library allows me to use the sorting and ordering columns that are passed in from the grid directly. Make sure that your client indexes match your database column names or this will not work!

Adding A Record

Now that the grid is successfully loading data, the next step is adding records from the grid. This actually isn’t very hard using jqGrid. If you press the Add icon in the bottom left of the grid, you will be presented with a dialog with all the fields set up, like this one:

This form is constructed using the properties set up in the ‘colModel’ section of the grid call. Every field set up with the property of editable: true will be displayed on this form. If you notice, the ID field is not showing up in this example, although it was marked as an editable field in my grid setup. The reason for this is that I wanted to send the UserID to the controller, but I didn’t want the user to be able to edit it. To accomplish this, I added a little bit of jQuery to my grid setup and hid the column. At the same time, I leveraged jQuery UI and made my Birthday field a datepicker. I handled both of these things using the beforeShowForm event available in the grid.

{ url: "/Home/EditSampleGrid", closeAfterEdit: true, beforeShowForm: function(formid) { $("#tr_UserID", formid).hide(); $("#Birthday").datepicker(); } },
{ url: "/Home/AddSampleGrid", closeAfterAdd: true, beforeShowForm: function(formid) { $("#tr_UserID", formid).hide(); $("#Birthday").datepicker(); } },

The grid assigns ID’s in this way according to your column indexes. Since my ID field is named UserID, I can access it’s row with the selector of $(“#tr_UserID”) and my birthday textbox with the selector of $(“#Birthday”). As you can see from the client code, I’m setting up a method in my Home controller called AddSampleGrid to process my grid data.

public ActionResult AddSampleGrid(string FirstName, string LastName, string Email, string Birthday)
{
    try
    {
        var db = new BlogSamplesDataContext();

        DateTime bDay;
        if (!DateTime.TryParse(Birthday, out bDay))
            bDay = DateTime.MinValue;

        var user = new User
                       {
                           FirstName = FirstName,
                           LastName = LastName,
                           Email = Email,
                           Birthday = bDay
                       };

        db.Users.InsertOnSubmit(user);
        db.SubmitChanges();

        return Json(true);
    }
    catch (Exception)
    {
        // Do some error logging stuff, handle exception, etc.
        return Json(false);
    }
}

The grid will pass the parameters according to their name on the colModel, so catching them and setting them up is a breeze.

Editing a Record

Editing a record is basically the same process as adding, the only difference is that you are sending the ID along with the rest of the data. You could easily combine the two operations into the same controller method if you want, although I normally separate them. I’m using the same trick to hide the ID field from the edit form, but the key here is that it’s actually being sent to the controller so we can use it to figure out which record is being edited.

The dialog for editing records is nice in jqGrid. It allows you to edit the highlighted row, and you can also use the navigation errors on the bottom left of the dialog to cycle between records.

The controller method for editing a record is similar to the add method, we just have to load the correct user and edit the fields as shown here.

public ActionResult EditSampleGrid(int UserID, string FirstName, string LastName, string Email, string Birthday)
{
    try
    {
        var db = new BlogSamplesDataContext();

        DateTime bDay;
        if (!DateTime.TryParse(Birthday, out bDay))
            bDay = DateTime.MinValue;

        var query = from u in db.Users
                    where u.UserID.Equals(UserID)
                    select u;

        var user = query.First();
        user.FirstName = FirstName;
        user.LastName = LastName;
        user.Email = Email;
        user.Birthday = bDay;

        db.SubmitChanges();

        return Json(true);
    }
    catch (Exception)
    {
        // Do some error logging stuff, handle exception, etc.
        return Json(false);
    }
}

If you notice, I’m passing the birthday as a string. This is intentional, I just find that this makes dealing with dates much easier because you don’t have to convert between a Javascript date and a .NET date.

Deleting a Record

Deleting a record is trivial with jqGrid. The grid will pass a parameter called id, and you can use that to delete the record in question in your controller.

public ActionResult DeleteSampleGrid(int id)
{
    try
    {
        var db = new BlogSamplesDataContext();
        var query = from u in db.Users
                    where u.UserID.Equals(id)
                    select u;

        var user = query.First();

        db.Users.DeleteOnSubmit(user);
        db.SubmitChanges();

        return Json(true);
    }
    catch (Exception)
    {
        // Do some error logging stuff, handle exception, etc.
        return Json(false);
    }
}

Filtering

The last part I want to talk about is implementing a grid filter. Out of the box, the grid supports a filter that allows you to search specific fields. You can see an example of this here:

While this is nice, I generally like to implement a more generic filter. I want the user to just have to type in what they are looking for, and I’ll search all the relevant fields. This is pretty easy, and it’s what I was using the search parameter for in the original SampleGridData method. With just a quick check to see if I have a search string and a minor modification to the data call, I can quickly filter the grid on any field I want to.

if (!string.IsNullOrEmpty(search))
{
    // This is possible because I'm using the LINQ Dynamic Query Library
    var users = (from u in db.Users
             where u.FirstName.Contains(search)
                       || u.LastName.Contains(search)
                       || u.Email.Contains(search)
             select u).OrderBy(sidx + " " + sord)
                      .Skip(pageIndex*pageSize)
                      .Take(pageSize)
                      .AsQueryable();

    var totalRecords = users.Count();
    var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);
}

If this is the way you want to go, be sure to turn off the default search parameter. You can toggle all of the icons on the bottom left through these grid options:

jQuery("#grid").jqGrid('navGrid', '#pager',
{ edit: true, add: true, del: true, search: false },

Final Thoughts

All in all, I feel that jqGrid is a nice plugin that allows you to quickly and easily set up grid data on your site. If you are already using jQuery UI, the fact that this grid integrates well with it is just icing on the cake. I’ve only scratched the surface with what is possible using this plugin, so be sure to check out the product wiki. The good news is that this product is well documented, and there are a lot of examples available to get you up and going.

Blog Setup

Jack Altiere — Mon, 12 Apr 2010 19:15:41 +0000

I have been trying different combinations of tools / plugins for my blog, and now that I’m finally happy with the setup I have I thought I’d share how I’m doing things.

First, I host my own instance of WordPress to handle the site. There are several different blog engines available, but WordPress is the only one that I have any real experience with. It meets all of my requirements for a blog engine.

There are a lot of free templates available. This is important to me, because I’d like to have a decent looking site and I’m by not a good graphic artist.
It’s easy to update. WordPress used to be a pain to upgrade, but now it is very easy. You can upgrade to a new version with the click of a link from the administrative interface.
There are plenty of nice third party plugins and widgets available. I want to focus on writing content, not playing around with my website.
It’s written in PHP, so it’s easy to get in there and modify stuff if I absolutely have to.

Next, I publish all of my content with Windows Live Writer. This tool is simple, and it integrates well with WordPress. It does have one quirk that I had to get around however. I want to be able to edit content from more than 1 computer, and I don’t want to have to carry around a USB drive to accomplish this. To solve the first part of the problem, I’m using Live Mesh. With this, you can set up folders that are shared across as many PC’s as you want to. You get 5 GB of space for free, and it’s a snap to install. I installed Mesh on the computers I would potentially be writing content with, and then I created a Mesh folder called My Weblog Posts. In this folder I have a Drafts folder and a Recent Posts folder. This is important, because it addresses the pain point I have with Live Writer.

In Live Writer, you can’t specify where you want your drafts to be saved. By default drafts get saved to Documents / My Weblog Posts / Drafts. What I did was delete this directory after installing Live Writer. Then I created a symbolic link to the directory I set up in Mesh, which ends up sitting on my Desktop with instructions found here. I’ve done this on both Windows 7 and Vista machines. Make sure you run cmd.exe as an Administrator so you have sufficient privileges to create the link. So when I’m done, my Documents directory has a link to my Mesh folder structure to save Drafts, as seen by the icon next to the folder below.

I give credit to Justin Etheridge for this idea, this came out of a conversation we had at the Mix 10 conference last month. I don’t remember exactly how he does it, but our conversation inspired my new setup.

Another thing that I have changed around a lot is my code syntax highlighter. I finally settled on using a product called (strangely enough) SyntaxHighlighter. If you are reading my blog on an aggregator such as Google Reader you are missing out, but this is what the code looks like on my actual site:

This tool does a fantastic job, and it supports a lot of different languages. To make this even easier to use, I found a WordPress plugin called SyntaxHighlighter Evolved that automatically puts the required Javascript calls in my theme so I don’t have to edit my template by hand. I also use a Live Writer plugin called PreCode that allows me to copy and paste stuff directly into Live Writer and be formatted with the correct “pre” tags for the language I’m pasting. It fixed indentation with the click of a button, which is helpful since I often don’t include the namespace information, etc. when posting fragments. It also allows you to choose what the target language is from a drop down list. This has made pasting code snippets a breeze, I wish I would have stumbled across this sooner.

For image editing, I use Paint.Net. If you aren’t already using this tool I highly recommend it. It’s everything that Paint SHOULD be.

Lastly, I use Google Analytics to look at how traffic to my site is looking. They added a new feature called Intelligence that allows you to set up custom daily, weekly, and monthly alerts. This allows you to get email if certain criteria happen. For example, you can set up daily alerts to let you know that you got 50 new visitors, or that you got 500 visits, or that someone reached your site by using the keyword jquery in a search 10 times. It really is a cool feature, and they have a few pre-canned alerts you can use to get you started.

That’s my setup. I’m able to edit drafts on any of my PC’s and I finally have a syntax highlighting product that I’m happy with. One thing I should point out, my method of sharing drafts should only be used for drafts. I think that this would break down if you tried to edit posts that are already published from a different PC because of how Live Writer generates an ID for each post.

JQuery delegates

Jack Altiere — Thu, 08 Apr 2010 13:03:11 +0000

I’ve had a few projects where I needed to update information on a site at a regular interval, and it’s always a better user experience if you do it asynchronously. I always like to come up with a functional example, so I’m going to write a quick MVC page that displays all the images in a directory. The catch is that I want add any pictures to the page that are added to this directory without having to refresh the page. Another thing I’d like to do is use the data capabilities in JQuery to store additional information about each image.

First I wanted to create a class to hold the additional data so that I can make a strongly typed view with it. This is what I came up with:

[Serializable]
public class UploadedImage
{
    public int Id { get; set; }
    public string ImageName { get; set; }
    public string ImagePath { get; set; }
    public int Width { get; set; }
    public int Height { get; set; }
}

After creating my class, I created my strongly typed view to accept a List. The next step was to add the controller method to display the view. In this method, I wanted to load the initial list of images present in the directory and pass them to the view.

public ActionResult Timer()
{
    var photos = new List();
    var dir = new DirectoryInfo(ConfigurationParser.GetAppSettingString("PhotoDirectory"));
    var counter = 1;
    foreach (var file in dir.GetFiles())
    {
        var img = Image.FromFile(file.FullName);
        var photo = new UploadedImage
                        {
                            Id = counter,
                            ImageName = file.Name,
                            ImagePath = string.Format("../../Content/Images/Photos/{0}", file.Name),
                            Height = img.Height,
                            Width = img.Width
                        };
        photos.Add(photo);
        counter ++;
    }

    ViewData.Model = photos;
    return View();
}

This is pretty self explanatory, I just loaded the photos from the directory, gathered some information about them, and assigned each an arbitrary ID. The last step was to put them all in a list and pass them to the view.

Since the focus of this exercise is JQuery, the bulk of our work is going to take place in the view. I’m not doing anything complicated to display the images. All I”m doing is using an unordered list to display all of the thumbnails, and creating a div that I will use to display additional information about the image in a pop-up when it is clicked.

JQuery Delegate Example

    
        <% foreach (var item in Model) { %>
        " src="<%=Html.Encode(item.ImagePath) %>" alt="" />
        <% } %>
    

    
    x

That leaves us with the client code. The first obstacle we have to overcome is that we need a way to monitor the photo directory to figure out when new images are added. I ended up using a JQuery plugin I found called doTimeout that works really well. This sets up the framework for the polling operation, to close the loop I created a web service to pass back the list of images in the directory.

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List LoadImages()
{
    var photos = new List();
    var dir = new DirectoryInfo(ConfigurationParser.GetAppSettingString("PhotoDirectory"));
    foreach (var file in dir.GetFiles())
    {
        var img = Image.FromFile(file.FullName);
        var photo = new UploadedImage
        {
            ImageName = file.Name,
            ImagePath = string.Format("../../Content/Images/Photos/{0}", file.Name),
            Height = img.Height,
            Width = img.Width
        };
        photos.Add(photo);
    }

    return photos;
}

This method is in my .asmx web service. The important thing to point out is that I specified that the response was going to be in JSON. I can just return my List type, and it will be automatically be put into JSON where my client code can access it.

Before I worry about setting up the timer, I want to be able to attach data from the controller to my JSON objects. My reasoning for this is because I don’t want to have to use unnecessary web service calls to retrieve this information if I already have it. The reason I want to collect this data is that I want to display it in the pop up when someone clicks on an image. To do this, I am going to use the jQuery.data() method. When I wrote this code, it felt a little clunky, so if anyone has an idea for a better way to accomplish this leave me a comment.

var images = new Array();

$(document).ready(function() {
    // This is messy, I wonder if there is a better way to do this?
    <% foreach (var item in Model) { %>
        images[images.length] = "<%= item.ImageName %>";
        $("#img<%= item.Id %>").data('info', {
                Id: <%= item.Id %>,
                Name: "<%= item.ImageName %>",
                Width: <%= item.Width %>,
                Height: <%= item.Height %>
        });
    <% } %>
});

In addition to setting my data information, I’m populating an array that I had set up to keep track of what images are already displayed. It’s easy to go off down a rabbit hole when you are coming up with an example, so rather than do it the right way and only bringing back images that were uploaded since the last time I checked, I’m just pulling them all back for simplicity’s sake and adding ones that aren’t there yet. The other thing I added that isn’t shown here is some code to display my pop up.

The next thing to do is to set up the loop and poll the directory for new images, and then display any images that were added.

// Load the photos every 10 seconds.
$.doTimeout('tmrPhotoSearch', 10000, function() {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "../DataService.asmx/LoadImages",
        data: "{}",
        dataType: "json",
        success: function(result) {
            ProcessImages(result.d);
        }
    });
    return true;
});

function ProcessImages(result)
{
    var max = 0;
    var data;
    $(".thumbnails a img").each(function() {
        data = $(this).data('info');
        if (data) {
            if (data.Id > max)
                max = data.Id
        }
    });
    max++;

    var item = '';
    var id = 0;
    $.each(result, function(key, value) { 

        if (jQuery.inArray(value.ImageName, images) == -1) {
            item = "";
            $(".thumbnails").append(item);

            images[images.length] = value.ImageName;

            id = "#img" + max;
            $(id).data('info', {
                    Id: max,
                    Name: value.ImageName,
                    Width: value.Width,
                    Height: value.Height
            }); 

            max++;
        }
    });
}

One thing about the web service call I should point out, be sure to include an empty data parameter if you don’t have any parameters. If you don’t, the content-length header won’t be generated and you could run into problems. Notice that my service is looking for a JSON result back, and on success it’s calling my ProcessImages method, passing in the web service response. The first part of my processing method is hokey, it’s just figuring out what the max ID is that already exists and adding 1 to it. I would definitely not do it this way for a real app, and I would certainly have more error handling built in. With JQuery, I’m able to loop through the results directly with the .each method since my JSON has already been translated. All I do is check each image, and add any that are not already present dynamically to the DOM at the end of the list with the append method. I also update my array to put the new image in there so it’s not added more than 1 time, and I add all the meta data using the .data method like before.

The last bit of logic is to set up my event for displaying the pop up when an image is clicked. I added this to my $(document).ready function to attach the click event. I’m also retrieving the information from the JQuery cache about the clicked image and showing it in the popup.

$(".thumbnails a img").click(function() {
    var data = $(this).data('info');
    var html = "" + data.Name + "

"
             + "ID: " + data.Id + "
"
             + "Height: " + data.Height + "
"
             + "Width: " + data.Width + "
";
    $("#imgName").html(html);
    loadPopup();
});

After putting a few sample images in my photo folder and running this, you can see that it grabs the 3 images that are there and shows them.

We can also see that clicking on one of these images successfully brings up our popup window with the attributes we put in the JQuery cache.

The next thing to do is make sure that the timer is running. The best way to do that in my opinion is with Firebug. Firebug is a tremendous tool, and a great way to learn JQuery quickly. Using the “Net” tab, I can watch my asynchronous requests being sent off to the web service.

Now I’m going to keep the page up and drop an image into the directory. You can see below that the image was added successfully to the page, but we have a problem.

When we click the new image, our pop up doesn’t work. Although it took a little while to get here, this is actually the point of my example. The problem is with our click event on the images. When the event was wired up, the 4th image didn’t exist yet, so it obviously wasn’t selected by the JQuery selector statement, therefore no event gets attached to it.

The solution to this problem is the JQuery delegate method. Basically what this is doing is attaching the event to a parent DOM element, so any future elements that fit the selector that you add automatically get the event attached. To get this to work, all we have to do is change our click event to look like this:

$(".thumbnails").delegate("a img", "click", function() {
    var data = $(this).data('info');
    var html = "" + data.Name + "

"
             + "ID: " + data.Id + "
"
             + "Height: " + data.Height + "
"
             + "Width: " + data.Width + "
";
    $("#imgName").html(html);
    loadPopup();
});

After this change, I removed the 4th image from the directory and ran the page again. This time when I added the 4th image and clicked it, the popup appeared like we expected it to.

There are a few things I’d like to point out before wrapping up. First, the delegate method is only available in JQuery 1.4.2 and later. I think the version of JQuery that came with my MVC install was 1.4.1, so keep this in mind if you have a problem. In fact, probably the best way to get JQuery is through a content delivery network. (I use the minified version specified here) The other thing that I’d like to point out is that the same capability is available in the JQuery .live method. This method was introduced in version 1.3 of JQuery. The difference is that the delegate method allows you to bind to a specific DOM element, where the live method binds to the root of the DOM tree. This makes the delegate method faster, since it doesn’t have to bubble up as far.

Making web service calls with JQuery

Jack Altiere — Tue, 06 Apr 2010 02:21:54 +0000

JQuery is an amazing Javascript library. If you haven’t used it yet, you are REALLY missing out. This article is going to talk about how you can use JQuery to make an AJAX call from an MVC application, and how you can receive JSON rather than XML from the web service.

First we’ll deal with the why. Why would we want to receive JSON rather than XML to our web service? To me, the answer to that starts with the fact that if we’re making an AJAX call, we’re going to do something with the results in client code. It makes sense to use a format that is inherently understood by Javascript, which is what the client code is going to be written in most of the time. The fact that we can send JSON data to our .NET web service allows us to pass objects back and forth from .NET and Javascript easily.

Our use case is going to be relatively simple, I want to be able to add a user to our database from an HTML form, and update the user interface when the task is done asynchronously. I have a sample database with a very simple user table set up for this example. I created a .dbml file with LINQ to SQL for my data layer:

I created an index view for my form, the code looks like this:


    Enter User Information

    
    First Name
    
    

    
    Last Name
    
    

    
    Email
    
    

    
    Phone

The div at the bottom is where I plan to show if my service call was successful or not. One thing I did here was use a tip I picked up by Dave Ward at Encosia.com and make the ID’s of my inputs match the property names on my user object. This makes life easier on us later. Then, to fix up the look and feel of the site a little, I just add a little CSS:

fieldset {
    border: 1px solid #226078;
    background: #62B1D0;
    width: 320px;
    padding: 2px;
}
fieldset legend {
    border: 1px solid #226078;
    font-family: Tahoma;
    font-size: 9pt;
    font-weight: bold;
    background: #0776A0;
    color: #FF8500;
    padding: 6px;
}

label {
    display: block;
    float: left;
    font-family: Tahoma;
    font-size: 8pt;
    font-weight: bold;
    color: #024C68;
    width: 150px;
}

label:after { content: ": " }

This makes my end UI look (slightly) more presentable. I know, you envy my crazy user interface skills.

The next thing to do is set up the JQuery code so that our button click even sends an asynchronous request to the web service.

In the above code, you will see why we named the textboxes the same as the user object properties. I used the JQuery each construct to loop through all the text boxes and populate the user object. This is a much cleaner way to populate the object than manually setting every property. The ajax call is pretty straight forward, I’m using the stringify method in the json2js library to turn my string into valid JSON, and lastly I’m wrapping my user object in a data transfer object to make the client code a little cleaner. (another tip from Dave Ward) On success of the asynchronous call, I’m parsing the result to determine whether the user was added successfully or not.

Since I used LINQ to SQL to generate my objects, I decided to make it easy on myself by adding the “add user” logic in a partial user class.

public partial class User
{
    public void Add()
    {
        var db = new BlogSamplesDataContext();
        db.Users.InsertOnSubmit(this);
        db.SubmitChanges();
    }
}

The last step is to create a web service called DataService.asmx with a web method called AddUser that takes a parameter called user.

[System.Web.Script.Services.ScriptService]
public class DataService : WebService
{
    [WebMethod]
    public bool AddUser(User user)
    {
        try
        {
            user.Add();
        }
        catch (Exception ex)
        {
            // Error logging can happen here.
            return false;
        }

        return true;
    }
}

Make sure you uncomment the line in the web service that allows the service to be called from scripts..for whatever reason I forget to do that a lot.

I was trying to walk the line between “simple enough to get my point across” and “complex enough to show value” for this example. The key is that you can pass full objects from client code to .NET web service code with the use of JSON, and you can make asynchronous calls to web methods fairly easily using JQuery.

Parsing POP email messages

Jack Altiere — Tue, 30 Mar 2010 02:33:15 +0000

I was recently tasked with coming up with a way to parse a pop email account and automatically save off the message and any attachments that came in the email. While it didn’t sound like too bad of a task, I know from my limited experience that parsing MIME content can be a pain in the rear. I thought it would be interesting to share what I came up with in a sample application.

First, I knew that I had no desire to reinvent the wheel and write my own MIME parser if I could find one that works. After some searching and some trial and error I ended up finding a .NET library that seems to work great from here. The full version of this library isn’t free, but the trial version is fully functional, it just rewrites the email subjects once in a while to tell you to buy the full version. (as a side note, I will probably end up buying this product, it worked exactly like I wanted it to)

Since I felt like showing this would go better if I had a sample app, I decided to write a little one page website that takes emails from an approved list of addresses, and posts any photo attachments in a little photo album. I decided I wanted a SQL Server backend, and that I would just use LINQ to SQL for data access. The plan is to just take the body of the email and make it the image caption and attach 1 image per email. It would also be nice to resize the image if it’s too big.

First, the backend. For the sake of simplicity I just created 2 tables…one to handle user validation and one to store the photos. After creating the LINQ to SQL classes for these two tables, my .dbml design view looked like this:

After that, I wanted to set up my mail parsing library. Like I mentioned above, I just wrapped a 3rd party utility, so my code for this isn’t too complex.

public class MailParser
{
    private readonly string _popServer;
    private readonly string _username;
    private readonly string _password;
    private readonly IMessageProcessor _messageProcessor;

    public MailParser(IMessageProcessor messageProcessor)
    {
        _popServer = ConfigurationParser.GetAppSettingString("MailServer");
        _username = ConfigurationParser.GetAppSettingString("MailUserName");
        _password = ConfigurationParser.GetAppSettingString("MailPassword");
        _messageProcessor = messageProcessor;
    }

    public void ProcessMessages()
    {
        var messages = new List();

        using (var pop3 = new Pop3())
        {
            pop3.Connect(_popServer);
            pop3.Login(_username, _password);

            foreach (var uid in pop3.GetAll())
            {
                // Add the email message to the list to be processed.
                var message = new MailBuilder().CreateFromEml(pop3.GetMessageByUID(uid));
                messages.Add(message);

                // Delete the message from the server.
                pop3.DeleteMessageByUID(uid);
            }
            pop3.Close(true);

            // We have snagged all of the messages from the server, now process them.
            foreach (var message in messages)
            {
                _messageProcessor.ProcessMessage(message);
            }
        }
    }

}

public interface IMessageProcessor
{
    void ProcessMessage(IMail message);
}

public class MessageProcessor : IMessageProcessor
{
    private readonly PhotoDBDataContext _db = new PhotoDBDataContext();

    public void ProcessMessage(IMail message)
    {
        var fromAddresses = message.From;
        var body = message.HtmlData ?? message.TextData;

        if (fromAddresses.Count == 0)
            return;

        // I only want to process emails from a list of valid email addresses.
        var address = (fromAddresses[0].Address.IsNullOrEmpty()) ? string.Empty : fromAddresses[0].Address;
        var user = ValidateUser(address);
        if (user == null)
            return;

        // If there are no attachments ignore the message.
        if (message.Attachments.Count == 0)
            return;

        // Process the attachments. (only supporting 1 attachment per email)
        var counter = 0;
        foreach (var att in message.Attachments)
        {
            if (counter > 0)
                break;

            // Make sure that the attachment is a valid image.
            if (!att.ContentType.MimeType.ToString().ToLower().Equals("image"))
                return;

            var photo = new Photo
                            {
                                Caption = body.Text,
                                DateUploaded = DateTime.Now,
                                UserID = user.UserID,
                                ImageData = att.Data,
                                ContentType = att.ContentType.ToString(),
                                FileName = att.FileName
                            };

            _db.Photos.InsertOnSubmit(photo);
            _db.SubmitChanges();

            counter ++;
        }
    }

    private User ValidateUser(string email)
    {
        var query = from u in _db.Users
                    where u.EmailAddress.Equals(email)
                    select u;

        return query.FirstOrDefault();
    }

}

The code should be fairly straight forward. I created a message processing interface, because it is conceivable that I would want to reuse this and processes messages differently. You may notice the ConfigurationParser references, that is just a class I wrote to wrap the access of configuration variables allowing me to load them strongly typed. All I am doing is looping over the messages on the POP server, loading them into a list to process, and deleting the original message from the server. I’ll throw out the standard disclaimer here and say that this is an example application! I would definitely consider persisting messages into some sort of a queue to process before deleting them from the mail server if this were a production application.

Using LINQ to SQL it’s a snap to validate the user and make sure we’re only posting pictures from trusted email addresses. (I know, we would have to think about how to protect this against spoofing if this were a real app) Notice how I’m also using the MIME type to make sure that we only accept image attachments. Lastly, I’m only processing the first attachment to make sure to only accept one image per email, I did this because I’m using the message body as the caption of the photo.

Now that images are being scraped from the email account and stored in the database, I thought I’d close the loop on this sample application and put a quick web page up to display the album. I created a new ASP.NET MVC 2 web application, and then went through the same steps as above to create my LINQ to SQL classes. The first thing I wanted to do was create a strongly typed view. The way I do this is to right-click in the HomeController.cs file and select Add View. You will get a dialog like this one:

All I did was name the view, select my LINQ to SQL generated Photo class, and choose List as the View content. This basically says that the view will have access to a collection of photos. It’s trivial to pull the list of photos out of the database with LINQ:

public ActionResult Index()
{
    var db = new PhotoDBDataContext();
    var photos = (from p in db.Photos
                  select p).ToList();

    ViewData.Model = photos;
    return View();
}

I wanted to do is to display an image straight from an MVC controller. I’m not going to post all the code I used to accomplish this, but the short version: I modified a guide I found here. One requirement that I still haven’t addressed is that I never resized the images. Since I took the images straight from the POP account and put them in the database, I have no idea how big they really are. Rather than go way off track and figure out how to do this, I used a method I read about here to resize my images from a byte array if needed. Now I wanted to come up with a clever way to be able to thumbnail images on the fly, so I changed the default route in the global.asax file to look like this:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default", // Route name
        "{controller}/{action}/{photoID}/{thumbnail}", // URL with parameters
        new { controller = "Home", action = "Index", photoID = UrlParameter.Optional, thumbnail = false } // Parameter defaults
    );

}

What this allows me to do is use a URL like mysite.com/Home/Images/1 to show the full image and mysite.com/Home/Images/1/true if I want to show the thumbnail of the same image. My controller method for the image creation looks like this:

public ActionResult Images(int photoID, bool thumbnail)
{
    var db = new PhotoDBDataContext();
    var photo = (from p in db.Photos
                 where p.PhotoID.Equals(photoID)
                 select p).SingleOrDefault();

    if (photo == null)
        throw new Exception("Photo not loaded");

    var bytes = (thumbnail)
                    ? ResizeFromStream(100, new MemoryStream(photo.ImageData.ToArray()), photo.FileName)
                    : photo.ImageData.ToArray();

    var image = bytes;
    var contentType = photo.ContentType;
    return this.Image(image, contentType);
}

The view ended up being trivial:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage>" %>


    Photo Album - Jaltiere.Com




    
        

        <% foreach (var item in Model) { %>

            
            
            <%= Html.Encode(item.Caption) %>
uploaded <%= Html.Encode(item.DateUploaded.ToShortDateString()) %>
            

        <% } %>

And with a little CSS magic…

body {
    text-align:center;
    font-family: tahoma, arial, sans-serif;
    font-size: 8pt;
}

#container {
    position:relative;
    width:770px;
    height:396px;
    margin:20px auto 0 auto;
    border:1px solid #aaa;
} 

ul {
    padding:0;
    margin:0;
    list-style-type:none;
}

li {
  display: inline;
  float: left;
  width: 101px;
  height: 101px;
  margin: 4px;
}

li a {
  display: block;
  width: 101px;
  height: 101px;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
}

li { height: 115px; }
li a span {
  font-size: 9px;
  position: relative;
  top: 103px;
  color: #666;
  display: block;
  text-align: center;
}
li a:hover span { color: red; }

You get a functional photo album:

This article kind of took off on me and turned out to be more MVC than POP mail parsing, but it was a fun little exercise. Things to take away:

I recommend the mail parsing library I used, I found it to be intuitive and easy to use.
LINQ to SQL makes data access easy. (coming from a guy with a big stored procedure background)
MVC is much more fun to work with than Webforms in my opinion.
I freely admit that I am definitely not a designer, so my web layout is not very good.