At some point when building an application you will need some sort of state persistence, especially when using things like tabs. How you do this? Simple use cookies,  if you are using jquery in your project there is a little plugin available to set them.

I am using this one, http://plugins.jquery.com/project/Cookie the links are actually broken but you can find what you need to get you started here: http://www.electrictoolbox.com/jquery-cookies/

What is the gotcha? I recommend setting the path to “/” Why? believe it or not the paths are case sensitive, this means if you don’t a path it will set it for you based on the current path.

Whys is this bad? Well say you had a path /car/create but the user typed in /Car/Create, yep you guessed it there will be two cookies if the path doesn’t match exactly then you wont get the right value back.

Some users have reported that the cookie doesn’t expire, you might want to give this a go if that happens.

$.cookie(‘cookiename’, null, { path: ‘/’, expires: -10 })

Advertisements

Creating DropDownLists using WebForms is easy enough, for those who are venturing into the the world of MVC this may not be as straight forward.

I’ll be using the classic scenario of Cars and their related makes and models.

CarController.cs

public class CarFormViewModel
{
    MakeModelRepository makeModelRepository = 
    new MakeModelRepository();

    private string _carMake = "";

    public Car Car { get; private set; }
    public SelectList CarMakes { get; private set; }
    public SelectList CarModels { get; private set; }
    public string CarMake
    {
        get { return _carMake; }
        set { _carMake = value; }
    }

    // Constructor
    public CarFormViewModel(Car car)
    {
        Car = car;
        CarMakes = new SelectList(makeModelRepository.
        GetCarMakes(), "Value", "Text");

        if (car.CarMakeModelId > 0)
            CarMake = car.CarMakeModel.CarMake;

        CarModels = new SelectList(makeModelRepository.
        GetCarModels(CarMake), "Value", "Text", Car.CarMakeModelId);
    }
}

Something to be aware of is the use of valueSelected when defining your SelectList, make sure your view items e.g. DropDownList names match your database field names. I found the selected value was not being set correctly when editing a records.

CarForm.aspx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl
<Vehicles.Controllers.CarFormViewModel>" %>

<script type="text/javascript">
    $(function() {
        $("#CarMake").change(function() {
        var carMake = $("#CarMake > option:selected").attr("value");
        var urlAction = "<%= Url.Action("FindCarModels", "Car") %>";
        $.getJSON(urlAction, { carMake: carMake }, function(data) {
                $("#CarMakeModelId").addItems(data);
            });
        });
    });
</script>

<%= Html.ValidationSummary("Edit was unsuccessful. Please correct 
the errors and try again.") %>
<% using (Html.BeginForm())
   {%>
<fieldset>
    <legend>Car</legend>
    <p>
        <label for="CarMake">
            Make:</label>
        <%= Html.DropDownList("CarMake", Model.CarMakes) %>
        <%= Html.ValidationMessage("CarMake", "*") %>
    </p>
    <p>
        <label for="CarMakeModelId">
            Model:</label>
        <%= Html.DropDownList("CarMakeModelId", Model.CarModels) %>
        <%= Html.ValidationMessage("CarMakeModelId", "*") %>
    </p>
    <p>
        <input type="submit" value="Save" />
    </p>
</fieldset>
<% } %>
<div>
    <%=Html.ActionLink("Back to List", "Index") %>
</div>

Make sure to change the inherits property to reference your new ViewModel. Note the use of the Url.Action helper, this little snippet helps you creates the correct path to your controller action without the use of those dots e.g. …/<controller>/<action>/

jHelper.js

Borrowed from Steve Michelotti.

$.fn.clearSelect = function() {
    return this.each(function() {
        if (this.tagName == 'SELECT')
            this.options.length = 0;
    });
}

$.fn.addItems = function(data) {
    return this.clearSelect().each(function() {
        if (this.tagName == 'SELECT') {
            var dropdownList = this;
            $.each(data, function(index, optionData) {
            var option = new Option(optionData.Text,
                         optionData.Value);

            if ($.browser.msie) {
                dropdownList.add(option);
            }
            else {
                dropdownList.add(option, null);
            }
            });
        }
    });
}

Little helper that clears and adds items to DropDownLists.

Something I found frustrating is when in debug mode a script reference would work find but when running using IIS the script would not load correctly. What you had to do was use those good old dots to get it loading correctly. My tip is to use the ResovleUrl helper.

<script src="<%= ResolveUrl("~/Scripts/jquery-1.3.1.js") %>" 
type="text/javascript"></script>

<script src="<%= ResolveUrl("~/Scripts/jHelper.js") %>" 
type="text/javascript"></script>

There are some workarounds I’ve seen that don’t break intellisense but look a bit messy. I figure I’ve lived without it for this long.

Apologies for not being able to attach the source code, if there is anything that is unclear or you have any questions feel free to email me.


After using TextMate to do some Ruby on Rails development I got used to and enjoyed working on a darker themed editor, I’ve probably come late to the party but you can achieve the effect in Visual Studio by changing your settings.

Enjoy coding more at the same time saving the planet (only if you choose a dark background), I chose Rob Conery’s TextMate theme.

Scott Hanselman has compiled a good collection of themes check it out.

vs_themed


Well not really, after using divs to layout my web pages for some time now I decided to try the 960 CSS Framework. It’s a welcome change from doing a load of floats.

I recommend reading Stefan Vervoort’s post on divitodesign to get started, there are also some good examples provided in the downloadable zip.

This is purely a layout framework which helps you separate your content into columns of 60px, I know of other CSS frameworks that do a lot more.

What CSS frameworks do you know of and/or use?


Clever use of tree layout to showcase their products, tree allow us to see where we are and where we’ve been. I like the fact that the tree is quite minimal allowing the products to be your main focus. It’s so tempting to use flash, I’m glad they didn’t.

I have to admit that I was a big fan of flash based web sites but recently have gone off them speed being one of them, don’t get me wrong flash does have it’s benefits but should be used sparingly.

An idea would be to utilise this concept to represent employees in an organisation, something I will definitely be using in my next app.

Take a look and have a play eva solo