Export to Excel with MVC

Tweet

I’m sure you’ve all had to export to Excel at one point or another. I created a small wrapper around the EPPlus library for MVC. Basically my wrapper contains a few helpers for common formatting, an ActionResult, and a column definition. Here’s what the end result looks like in the simplest form:

Basically this exports all the columns and records in the SampleInfo collection. So if you want to specify the columns you want, you can do this:

The ExcelColumnDefinition.Create<> is kinda ugly, so you could create a small helper method for readability like this:

Now the above example looks like this:

So this is what the ExcelColumnDefinition looks like:

Here’s the actual ActionResult:

So that’s it. If you have any questions, please feel free to comment below.

You can browse or download the source on GitHub. The sample project has examples.

Simple Way to Toggle on Hover with CSS

Tweet

Here’s a really simple way to toggle actions or more information to keep your pages clean.

View Demo

A Method for Populating a Dropdown List in ASP.NET MVC

Tweet

I’m asked quite a bit how to bind a dropdown list in ASP.NET MVC. So there are about 10,000 ways to do it, but here’s one.

First, we’ll create a simple interface to return a list of SelectListItem so we can use the built-in DropDownListFor() later on.

Then we can create a SelectListProviderAttribute to take in the Type of list provider we want. You can see in this example I'm instantiating the object with StructureMap...you could do this with Activator or something else.

Now we just implement an ISelectListProvider and add the attribute to our model like this:

Sample property on view model:

[SelectListProvider(typeof(CommunitySelectListProvider))]
[DisplayName("Community")]
public int CommunityId { get; set; }

Now we just call our new HtmlHelper in our view and we're done. So here's the helper:


And now we just call it from the view like this:

@Html.DropDownListFor(x => x.CommunityId)

I'm sure you all realized that I used some additional helpers in code samples above. So for the curious few, I uploaded the full sample project to github. Browse the source now

Dynamically Generate Form with jQuery and ASP.NET MVC

Tweet

Hopefully it’s obvious that you probably won’t need to do this very often, but when it’s needed, it’s nice to have available. I thought I’d share this little helper to dynamically create a form, append it to body, and submit it...without AJAX.

First I'll show you how I'm converting my view model to a parameter list and a query string. Basically I've created an extension method that loops through properties and checks if it's an IEnumerable or not. If it is, then I loop through the values of that property. Otherwise, I just add the value. This method does not work with complex types. Typically view models are flat, so this works well most of the time.

The ToQueryString method just calls the ToParameterList, adds a ? to the front and then just selects what it needs from the parameter list.

The jQuery is pretty straight forward. I get the body, create a form with an action, loop through my param list creating a hidden input for each param, append the form to the body, and then submit it.

As always, if you know of a different and/or better way, please let me know.

If you don't need to post, you can just use a get, you could do something like this:

You can download a sample project at GitHub.

Making Prettier Forms: Converting Checkboxes into Images

Tweet

A couple weekends ago I went to the Big Design Conference in Dallas (recap coming soon), and I always come back inspired to help the user’s experience with the applications I write. One of the things mentioned (several times) was making forms simpler. Basically, you don’t have to make the end-user feel like they’re filling out a form. There are ways to make it seem less intimidating. One way is to swap out the typically hard-to-click checkbox or radio button with an image. It gives the user a larger click area and it looks nice…at least in my opinion.

Basically, I’m helping a friend with a small project, and the image below is what I wanted to create.

If you buy Stephen Anderson's book "Seductive Interaction Design", you will see a similar form to the one above...primarily just the name and contact info stuff. By the way, I definitely recommend this book.

As you can see, the “Select Classification” is not your typical radio button setup. I googled for a bit if there was already a jQuery plugin to do this type of thing and came up empty. I’m sure you almighty readers know of one, but I couldn’t find it…so I made one.

So far I’ve tested it in Firefox, IE9, Chrome, and JAWS, and it works pretty good in all of them. The way I set it up to work is based on the input and label. So you’d have the most accessible standard markup with your preferred styles for the label, and that’s how you get the effect shown above. I think it’s probably better said with code:

So it looks like a pretty typical setup so far, right? You have an input with a label. To make it more accessible, you wrap it with a fieldset and give it a legend. The primary reason you’d do this is to give screen readers some context. If you don’t need to worry about that, you could just as easy wrap it all with a div. You’re going to want to wrap it so your jQuery selector is more precise. After you markup the form, you just add the following JavaScript.

Now you’re all wired up, and you just add in your styles to whichever stylesheet classes you specified. The default stylesheet class names I specified are:

• .Selected-Checkbox – this class is added to the label after it has been clicked
• .Checkbox-in-focus – this class is added to the label when the checkbox/radio button is in focus

If you’re not sure the plugin is working properly, you can put it in “testMode”, like this:

$('#classification_radio_wrapper label').checkMate({testMode: true });

If you need to override my default class names, you can do that too by specifying class or focusClass in the options. I might rename class to selectedClass in the near future.

Please leave a comment if you have any questions or feedback.

The source code is available on github at https://github.com/derans/checkMate

The demo is located on 1pg.it at http://1pg.it/v9etvtn5 (also on github as the example.htm file)

File Icons using CSS Selectors

Tweet

This post is for a friend that was asking how to easily show icons with different file extensions. What I’ve setup are some styles that can just be copied over to any stylesheet and used.

I converted the icons downloadable at famfamfam.com to base64 and placed them in the styles. Without further ado, here they are:

These are all the basic file types I could think of and obviously you could add more to the list. I also added the with-icon, but this could be easily removed so it applies to all your hrefs all the time. There are a couple “special” styles at the bottom of the list for email and http links that use the ~=, which means starts with. All the rest of the styles work off the $= selector, which means ends with. To give the same icon to multiple file types, you just separate the selector with a comma.

In order to use these styles, you just do this:

This ends up looking like this:

Testing for StructureMap Default Instances

Tweet

Have you ever received the good ole “No Default Instance defined for PluginFamily”? error while using StructureMap? I thought I’d share a quick test you can write to catch this error before you deploy the bug. This test is particularly useful when you mostly depend on the default conventions.

In the example provided, I’ll be verifying that I can get a default instance of all my controllers. So I’ve setup 5 controllers and 2 have constructors with some type of dependency.

Something like this:

So now I can setup my test, which looks like this:

If you’re not familiar with TestCaseSource, I blogged about it a few weeks ago on the Headspring blog, so you can read about it there. The test queries the assembly containing HomeController for all types that are a subclass of Controller and are not abstract. After it gets the type, it tries to get an instance of it from the object factory. If it fails, the test fails with what specifically it couldn’t return and which controller couldn’t be instantiated.

Here’s what the test looks like when they all pass:

Here’s what the tests look like when the two with dependencies fails:

Here’s a detailed view of one of the error messages:

Notice it says IAuthenticationService and it failed on the AccountController, so we know exactly where to start looking. The only other thing I probably need to mention is the TestBase, which contains the StructureMap initialization. You could simply register your StructureMap registry file there. Here’s what the example looks like:

If anyone has any suggestions on how to improve the test or if StructureMap already has a test built-in that I’m not familiar with, please share.

Generic L2S Repository

Tweet

I’m sure you’re all tired of me blogging about L2S, but I still like it. It’s just so simple and easy to use. Obviously with .net 4.0, the big issues with L2S seem to be resolved. Alongside l2sprof, LINQ to SQL can be very effective. Anyhow, I thought I’d share a simple generic repository I made.

Here's how you'd use the repository. Basically, you just pass in the DataContext you want to use and then call the method needed. As usual, please let me know if you see any improvements that can be made or if you have any questions.

Refactoring with LINQ

Tweet

So my little brother sent over the code below last week and asked me if there was a better way to do it. When I first read through it I was thinking…I can’t believe people still use the good ole to/from listbox style UI. I don’t remember the last time I had to write this code, but I’m pretty sure it was prior to LINQ.

So here’s what I came up with in my response using LINQ.

Basically I was able to get rid of all the for loops, sorting, adding items, and most importantly, the new version is more readable.

Create an ActionLink without Magic Strings

Updated: 3/7/2011

So it’s been a while. I have a new job working for Headspring in Austin, which is one of the reasons I haven’t blogged in a while. It’s tough moving and re-adjusting to a new area and job, but Austin is great and Headspring is terrific. I started blogging on the Headspring site too. I’m trying to alternate weeks for posting, so we’ll see how that goes. (also fyi, Headspring is hiring)

On to the good stuff, I started playing with an HtmlHelper extension to rid a project of magic strings for action links. It was definitely more tricky than I originally thought, but I have a first attempt ready to share. Here’s the code:

@(Html.ActionLinkFor<HomeController>(a=>a.Contact(Model), "Contact"
     , new Dictionary<string, object>{{"style","color: #f90;background:#000"}})) <br />

@(Html.ActionLinkFor<MainControllerController>(a=>a.Index(), "Main Home"))<br/>

@(Html.ActionLinkFor<HomeController>(a=>a.Index(), "Home")) <br />

@(Html.ActionLinkFor<HomeController>(a=>a.AnotherTest(new SampleModel{Id=5555
     , Name = "Just a test", Address = "123 Main"}), "Another Test"))<br/>

@(Html.ActionLinkFor<HomeController>(a=>a.TestYetAnother(new SampleModel{Id=12345678
     , Name = "Just another test yet"}), "Yet Another Test"))

The code above is what I wanted for the end result. The code below is what makes the code above work.

    public static class HtmlHelperExtensions
    {
        public static IHtmlString ActionLinkFor<TController>(this HtmlHelper htmlHelper
                 , Expression<Func<TController, object>> expression,
                 string displayText) where TController : Controller
        {
            return ActionLinkFor(htmlHelper, expression, displayText, null);
        }

        public static IHtmlString ActionLinkFor<TController>(this HtmlHelper htmlHelper
            , Expression<Func<TController, object>> expression, string displayText
            , IDictionary<string, object> htmlAttributes)
            where TController : Controller
        {
            var method = ((MethodCallExpression)expression.Body).Method;
            var actionName = method.Name;
            var parameters = method.GetParameters();
            var arguments = ((MethodCallExpression)expression.Body).Arguments;

            var routeValue = new RouteValueDictionary();
            for (int i = 0; i < parameters.Length; i++)
            {
                if (arguments[i] as MemberExpression != null)
                {
                    var memberExpression = (MemberExpression)arguments[i];
                    if (memberExpression.Expression as ConstantExpression == null)
                        AddRouteValuesForMemberExpression((MemberExpression)arguments[i]
                            , parameters[i].Name, routeValue);

                    if (memberExpression.Expression as ConstantExpression != null)
                        AddRouteValuesForConstantExpression(((MemberExpression)arguments[i])
                            , parameters[i].Name, routeValue);
                }
                if (arguments[i] as MemberInitExpression != null)
                    AddRouteValuesForMemberInitExpression((MemberInitExpression)arguments[i]
                        , routeValue);
                if (arguments[i] as MethodCallExpression != null)
                    AddRouteValuesForMethodCallExpression((MethodCallExpression)arguments[i]
                        , parameters[i].Name, routeValue);
            }

            var controller = typeof(TController).Name;
            var controllerName = controller.Remove(controller.LastIndexOf("Controller"));
            return htmlHelper.ActionLink(displayText, actionName, controllerName, routeValue, htmlAttributes);
        }

        private static void AddRouteValuesForMethodCallExpression(MethodCallExpression methodCallExpression
            , string parameterName, RouteValueDictionary routeValue)
        {
            if (methodCallExpression.Object != null)
            {
                var value = ((PropertyInfo)((MemberExpression)methodCallExpression.Object).Member)
                    .GetValue(((ConstantExpression)((MemberExpression)methodCallExpression.Object)
                    .Expression).Value, null);
                routeValue.Add(parameterName, value);
            }
        }

        private static void AddRouteValuesForMemberExpression(MemberExpression memberExpression
            , string parameterName, IDictionary<string, object> routeValue)
        {
            object model;
            if (((MemberExpression)memberExpression.Expression).Member is PropertyInfo)
                model = ((PropertyInfo)((MemberExpression)memberExpression.Expression).Member)
                    .GetValue(((ConstantExpression)((MemberExpression)memberExpression.Expression)
                    .Expression).Value, null);
            else
                model = ((FieldInfo)((MemberExpression)memberExpression.Expression).Member)
                    .GetValue(((ConstantExpression)((MemberExpression)memberExpression.Expression)
                    .Expression).Value);

            foreach (var p in model.GetType().GetProperties())
            {
                if (p.Name == memberExpression.Member.Name)
                {
                    var value = p.GetValue(model, null);
                    if (value != null && !routeValue.ContainsKey(p.Name))
                        routeValue.Add(parameterName, value.ToString());
                }
            }
        }

        private static void AddRouteValuesForConstantExpression(MemberExpression memberExpression
            , string parameterName, IDictionary<string, object> routeValue)
        {
            var properties = ((PropertyInfo)memberExpression.Member)
                .GetValue(((ConstantExpression)memberExpression.Expression).Value, null)
                .GetType()
                .GetProperties();

            foreach (var property in properties)
            {
                var value = property.GetValue(((PropertyInfo)memberExpression.Member)
                    .GetValue(((ConstantExpression)memberExpression.Expression).Value, null), null);

                if (value != null)
                    routeValue.Add(property.Name, value.ToString());
            }

            if (properties.Length == 0)
            {
                var value = ((PropertyInfo)memberExpression.Member)
                    .GetValue(((ConstantExpression)memberExpression.Expression).Value, null);

                if (value != null)
                    routeValue.Add(parameterName, value.ToString());
            }
        }

        private static void AddRouteValuesForMemberInitExpression(MemberInitExpression memberInitExpression
            , IDictionary<string, object> routeValue)
        {
            foreach (var p in memberInitExpression.Bindings.Cast<MemberAssignment>())
            {
                if (p.Expression is ConstantExpression)
                {
                    var value = ((ConstantExpression)p.Expression).Value;
                    var name = p.Member.Name;
                    if (value != null)
                        routeValue.Add(name, value.ToString());
                }
                if (p.Expression is UnaryExpression)
                {
                    throw new NotImplementedException("Not able to handle UnaryExpressions yet.");
                }
            }
        }
    }

Basically the way this thing works is off the Expression<Func<TController, object>> parameter being passed into the ActionLinkFor method. From the expression, you can determine the route values and action name…by doing a lot of manipulation. So, if you would, try this helper out and let me know of any bugs or improvements that can be made.

Refactoring MVC Routes

Some of my team members and myself are participating in the Houston AIR competition this weekend and we are building our project this week. Of course we’ll have to rebuild it from scratch on Saturday, but hopefully it’ll just be a bunch of re-typing and no surprises. Anyhow, one of my duties on the team is to configure MVC and the interfaces we’ll need and all that jazz. So when I went to setup the routes, I was surprised again at how flexible it all is to setup. Typically you can get by with the default route, but not in our case this time. Basically we wanted to have these routes:

/story/give
/story/{id}
/feature/{id}
/prayer/{id}
/{pagename}

By the way, our assigned charity is a church in Houston called the Household of Faith Church - South Acres. At first I had this: (which is TOTALLY RIDCULOUS, but I wanted to see them all)

routes.MapRoute(
"Home",
"",
new { controller = "Main", action = "Home" });

routes.MapRoute(
"GiveStory",
"give/story",
new { controller = "Main", action = "GiveStory" });

routes.MapRoute(
"Feature",
"feature/{id}",
new { controller = "Main", action = "Feature", id=UrlParameter.Optional });

routes.MapRoute(
"Prayer",
"Prayer/{id}",
new { controller = "Main", action = "Prayer", id = UrlParameter.Optional });

routes.MapRoute(
"Story",
"Story/{id}",
new { controller = "Main", action = "Story", id = UrlParameter.Optional });

routes.MapRoute(
"About",
"About",
new { controller = "Main", action = "About"});

routes.MapRoute(
"Directions",
"Directions",
new { controller = "Main", action = "Directions" });

routes.MapRoute(
"SiteMap",
"SiteMap",
new { controller = "Main", action = "SiteMap" });

routes.MapRoute(
"Help",
"Help",
new { controller = "Main", action = "Help" });

I typically setup my routes early on because I usually know what I want the URLs to be and it helps when naming my actions on the controllers. So obvioulsy we only have one controller because it’s not a large site and they all kinda go together, but what’s up with all the actions on the route configuration? Ridiculous right? So let’s get rid of all that mess like this:

routes.MapRoute(
"GiveStory",
"give/story",
new { controller = "Main", action = "GiveStory" });

routes.MapRoute(
"Feature",
"feature/{id}",
new { controller = "Main", action = "Feature", id=UrlParameter.Optional });

routes.MapRoute(
"Prayer",
"Prayer/{id}",
new { controller = "Main", action = "Prayer", id = UrlParameter.Optional });

routes.MapRoute(
"Story",
"Story/{id}",
new { controller = "Main", action = "Story", id = UrlParameter.Optional });

routes.MapRoute(
"Page",
"{viewname}",
new { controller = "Main", action = "GetStatic", viewname = "Home" });

Simple enough right? So I created an action called GetStatic that just accepts the view name for that page. The action looks like this:

public ViewResult GetStatic(string viewname)
{
return View(viewname);
}

Now let’s address the other redundant mess I have here…the {feature/prayer/story}/{id} route. Basically we’re going to do that and add a constraint to the route like this:

routes.MapRoute(
"GiveStory",
"give/story",
new { controller = "Main", action = "GiveStory" });

routes.MapRoute(
"WebSectionRoute",
"{WebType}/{Id}",
new { Controller = "Main", action = "GetWebSection", Id = UrlParameter.Optional }, new {WebType = "Story|Feature|Prayer"});

routes.MapRoute(
"Page",
"{viewname}",
new { controller = "Main", action = "GetStatic", viewname = "Home" });

So what this says is if the WebType contains story/feature/prayer then use this route otherwise keep on going. I can’t express enough the importance of the route order here. It’s an easy thing to miss and I’ve caught the missed order a few times for other developers and myself. Make sur eyou put them in the order they need to be in and not in some random order. Well that’s it. Route configuration refactored and now it doesn’t have any redundant routes.

Thanks for reading!

How to easily turn your L2S objects into interfaces

I know it’s been a while since I posted an actual post, but I think this one will be fun. So let’s get to it…
In one of our recent code reviews, we found several methods that looked almost identical. All of these methods were just for lookup tables that populated a dropdown. So…this is what we did:
We had a repository with something like GetDepartmentList and GetStatusList that looked something like this:

public class SampleRepository : ISampleRepository
    {
        public IList<LookupDepartment> GetDepartmentList()
        {
            using (var dc = new LookupSampleDataContext())
                return dc.LookupDepartments
                                 .Where(x => !x.IsDeleted)
                                 .OrderBy(x=>x.Name)
                                 .ToList();
        }

        public IList<LookupStatus> GetStatusList()
        {
            using (var dc = new LookupSampleDataContext())
                return dc.LookupStatus
                                 .Where(x => !x.IsDeleted)
                                 .OrderBy(x=>x.Status)
                                 .ToList();
        }
    }

Note: we do not return L2S objects typically, but to make this example simple, I’m going to pretend that we do.
The first thing we did was changed the type returned by both methods to return ILookupObject instead of the L2S objects…like this:

public class SampleRepository : ISampleRepository
    {
        public IList<ILookupObject> GetDepartmentList()
        {
            using (var dc = new LookupSampleDataContext())
                return dc.LookupDepartments
                                 .Where(x => !x.IsDeleted)
                                 .OrderBy(x=>x.Name)
                                 .Cast<ILookupObject>()
                                 .ToList();
        }

        public IList<ILookupObject> GetStatusList()
        {
            using (var dc = new LookupSampleDataContext())
                return dc.LookupStatus
                                 .Where(x => !x.IsDeleted)
                                 .OrderBy(x=>x.Status)
                                 .Cast<ILookupObject>()
                                 .ToList();
        }
    }

Obviously this cast isn’t going to work so we need to finagle our dbml. It’s easy to extend the L2S objects without modifying the dbml. I actually prefer never to touch the dbml itself unless absolutely necessary because I like to Ctrl+A, del, drag everything back over whenever I want :)
So to extend the classes, we just need to do this:

public partial class LookupDepartment : ILookupObject
    {
        public string DisplayName { get { return Name; } }
    }

    public partial class LookupStatus : ILookupObject
    {
        public string DisplayName { get { return Status;} }
    }

Done.
Now we need to revisit our SampleRepository and extract out all the redundant code so we have something like this:

private static IList<ILookupObject> GetList<T>(Expression<Func<T, object>> orderby) where T : class, ILookupObject
        {
            using (var dc = new LookupSampleDataContext())
                return dc.GetTable<T>()
                                 .Where(x => !x.IsDeleted)
                                 .OrderBy(orderby)
                                 .Cast<ILookupObject>()
                                 .ToList();
        }

All we’ve done is made a generic GetList method that takes in the orderby. You could easily make this not dependent on the datacontext too, but to keep this post simple, we won’t do that now. As you can see, this looks almost exactly like our original method with the exception of dc.GetTable<T>(), which is built-in to the datacontext class. All we need to do is pass it the type so it knows from which table to pull data. It’s actually a pet peeve of mine for a lookup type dropdown to not be ordered, so I’m forcing the orderby method and not giving another option.
The repository looks like this now:

public class RefactoredSampleRepository : ISampleRepository
    {
        private static IList<ILookupObject> GetList<T>(Expression<Func<T, object>> orderby) where T : class, ILookupObject
        {
            using (var dc = new LookupSampleDataContext())
                return dc.GetTable<T>()
                         .Where(x => !x.IsDeleted)
                         .OrderBy(orderby)
                         .Cast<ILookupObject>()
                         .ToList();
        }

        public IList<ILookupObject> GetDepartmentList()
        {
            return GetList<LookupDepartment>(x=>x.Name);
        }

        public IList<ILookupObject> GetStatusList()
        {
            return GetList<LookupStatus>(x=>x.Status);
        }
    }

Nice and pretty…I don’t like the orderby expression here, but I think it’s the best option for now. There is another way, but it jacks up L2S for inserts and updates. So, if you KNOW your not going to ever update or insert a new record for a lookup, then you could do this:

public partial class LookupStatus : ILookupObject
    {
        [Column(Name="Status")]
        public string DisplayName { get; set; }
    }

What this does is maps the DisplayName to the Status column so you could just do .OrderBy(x=>x.DisplayName) instead of passing in the orderby. The reason you have to map the column is because you’ll get a “SQL has no supported translation…” error. You could also just rename the property Status to DisplayName in the dbml file itself.
Also, it’s not recommended that you use multiple datacontexts according to l2sprof, but to make this simple, I did.
So now we can easily bind this to a dropdown via another helper method like this:

public static class extensions
    {
        public static void BindDropDownTo(this DropDownList ddl, IList<ILookupObject> data)
        {
            ddl.DataSource = data;
            ddl.DataTextField = "DisplayName";
            ddl.DataValueField = "ID";
            ddl.DataBind();
        }
    }

So in the UI, we just do this: (if using webforms)

ddlStatus.BindDropDownTo(rep.GetStatusList());

If you’re using MVC, you could create an htmlhelper to do something similar.
Alright, I think that’s it. Please post if you have better methods or have any questions.
Thanks for reading!