Friday, February 4, 2011

Styles for IE 6/7 Select in MVC validation CSS

IE 6 and 7 use the in-built OS for select lists, which don't behave when using the standard styles for MVC validation:

.input-validation-error { border: 1px solid red; }

Your textboxes will receive a red outline but your select lists will not. The best way I have seen to achieve a generic cross-browser style definition is to add more css styles to handle select lists with a light-red shaded background:

select.input-validation-error { background-color:#FFA5A5; }
.input-validation-error option { background-color:white; }


Now select boxes will be marked in all browser types, and error conditions on select lists have improved visibility.

Thursday, February 3, 2011

Change ASP.NET MVC Validaton To Display Icon Instead Of Error Message Span

While developing my first MVC application I found, after extensive googling, no solution for the common validation feedback technique of using error icons. ie. Instead of your validation text appearing next to your form element, an error icon appears and hovering the mouse over the icon shows the error message.

This is often used in conjunction with a validation summary, which contains all the descriptive text, and then the various fields on the form are marked invalid with a small error icon for added visibility. Such a thing is easy to do with ASP.NET webforms validators, allowing you to specify whatever markup you wish in the validation message. But in MVC the client-side behaviour is locked away in the javascript validation libraries. ValidationExtensions can allow you to create different types of validators, and even manipulate the validator container (a span), but you are still subject to client-side behaviour where a second span, containing the validation message, is dynamically generated and set inside the validator container span.

Fortunately, if you are using the MicrosoftMvcJQueryValidation javascript library, a two line change can modify this behaviour. Search for the code snippet below (expanded from MicrosoftMvcJQueryValidation.min.js) and add the lines in bold:

errorPlacement: function (error, element) {
var messageSpan = fieldToMessageMappings[element.attr
("name")];
$(messageSpan).empty();
$(messageSpan).removeClass("field-validation-valid");
$(messageSpan).addClass("field-validation-error");
error.removeClass("input-validation-error");
error.attr("_for_validation_message", messageSpan);
    //Change - replace span contents with error icon and 
alternate text
var errorMessage = error.html();
error.html('<img src="/Images/Icons/Error.gif"
alt="' + errorMessage + '"
title="' + errorMessage + '"
width="16"
height="16" />'
);
    error.appendTo(messageSpan);
},

This replaces the span's text contents with an error icon of your choice with appropriate alternate text.

I hope this code helps, I'll be pursuing the MVC team to bake this functionality into the framework so it can be easily configured, as of MVC 3 it doesn't appear to be implemented.

Friday, January 21, 2011

Generic Enum to List converter (C#)

Sometimes it is necessary to take enumerations and bind them to some kind of UI control requiring a list. There are various ways to do this, but after some research nobody had included a solution that has the numeric index of the enumeration. The code below shows this implementation, which involves a class of type EnumItem (to store invidivual enum values) and a static conversion function EnumToList, which does the work :

///
/// Generic EnumItem class for Enum item representation.
///

public class EnumItem
{
///
/// The enum index, it is a 1-based index.
///

/// The enum index value (1-based).
public int Index { get; set; }

public string Name { get; set; }
public object Value { get; set; }
}

///
/// Converts an Enum to a List of type EnumItem.
///

/// The type of enum to convert.
/// List of type EnumItem.
public static List EnumToList()
{
//Validate T is an enum
Type enumType = typeof(T);
if (enumType.BaseType != typeof(Enum))
{
throw new ArgumentException("T must be of type System.Enum");
}

var valueArray = (T[])(Enum.GetValues(typeof(T)).Cast());
var nameArray = Enum.GetNames(typeof(T)).ToArray();
List enumItemList = new List();
for (int i = 0; i < valueArray.Length; i++)
{
string name = nameArray[i];
T value = valueArray[i];
enumItemList.Add(new EnumItem { Index = i + 1, Name = name, Value = value });
}
return enumItemList;
}


By calling List myList = EnumToList() you will receive a 3-column list containing the 1-based index, the enum name, and the enum value.

Wednesday, April 9, 2008

App_Code folder in Web Application Projects

I've stumbled across an interesting glitch with Web Application Projects with (at least) Visual Studio 2008.
It seems that classes added to an /App_Code folder are not picked up by Intellisense. If you create the class outside the /App_Code folder, and then move it back in afterwards, Intellisense then picks it up. Go figure.
I don't know or care where the culprit lines of code exist that cause this situation, but a simple solution which I've seen other discussion forums recommend is: don't use an /App_Code folder in a web application project.
A secondary reason to the Intellisense issue would be to avoid confusion for developers, who may see an /App_Code folder and mistakingly think they are using a Web Site project model.

-Jase

Thursday, February 7, 2008

First Post!

Welcome to my blog about all things work related! It's been a while in the making. I've often wondered why other technology professionals blog about work, since they

  1. most likely won't make any money from it

  2. don't really know who is going to read it and

  3. spend loads of time making high quality informative posts that could be time better spent... I don't know... sleeping.


Do they do it for geek fame? The greater good? Maybe a bit of both. I'm going to start doing it for the benefit of my work mates and others subscribed to my google reader shared items.

I won't be posting regularly on any schedule to this blog, only when something comes up that I think is pertinent to share with my work mates.

I welcome any comments, feel free to voice disagreement (respectfully) about what I write, and hopefully, maybe something I write about will be useful to some nameless developer out there searching for answers.

-Jason