Michael Baird

ASP.net MVC and JQuery Cascading Dropdown list

mike.nospam@nospam.michaeljbaird.com (mbaird) — Mon, 13 Apr 2009 13:32:00 -0600

Imagine that you have an E-Commerce site and you would like the user to drill down into the attributes of a product to help the user find exactly what they need. You display a dropdown list of product colors. Each time a user selects a new color, a dropdown list displaying products available in that color is populated. In this demo, I've created a small application demonstrating on how to use ASP.net MVC 1.0 framework and JQuery to complete the task.

1-Data Models

First, for demonstration purposes and easy download, I created two Model Data sources without the use of SQL. Colors and Products:

Models/Colors.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JQueryJsonSelectDemo.Models
{
  public class Color
  {
    public string ColorName { get; set; }
    public string ColorCode { get; set; }
    public int ColorId { get; set; }

    public static IQueryable<Color> GetColorDataList()
    {
      return new List<Color>()   
      {  
         new Color { ColorName = "Blue", ColorCode = "BL", ColorId = 1},  
         new Color { ColorName = "Red", ColorCode = "RD", ColorId = 2},  
         new Color { ColorName = "Grey", ColorCode = "GY", ColorId = 3},  
         new Color { ColorName = "Black", ColorCode = "BK", ColorId = 4},  
         new Color { ColorName = "Green", ColorCode = "GN", ColorId = 5},  
         new Color { ColorName = "Olive", ColorCode = "OL", ColorId = 6},  
         new Color { ColorName = "Orange", ColorCode = "O", ColorId = 7},  
         new Color { ColorName = "Pink", ColorCode = "PK", ColorId = 8},  
         new Color { ColorName = "Violet", ColorCode = "V", ColorId = 9},  
         new Color { ColorName = "Yellow", ColorCode = "YW", ColorId = 10}  
      }
      .AsQueryable<Color>();
    }
  }
}

Models/Product.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JQueryJsonSelectDemo.Models
{
  public class Product
  {
    public string ProductName { get; set; }
    public int ColorId { get; set; }
    public int ProductId { get; set; }

    public static IQueryable<Product> GetProductDataList()
    {
      return new List<Product>()   
      {  
         new Product { ProductName = "Cup", ColorId = 2, ProductId = 1},  
         new Product { ProductName = "MP3 Player", ColorId = 4, ProductId = 2},  
         new Product { ProductName = "52\" LCD TV", ColorId = 5, ProductId = 3},  
         new Product { ProductName = "Fork", ColorId = 6, ProductId = 4},  
         new Product { ProductName = "Spoon", ColorId = 10, ProductId = 5},  
         new Product { ProductName = "Shirt", ColorId = 6, ProductId = 6},  
         new Product { ProductName = "Pant", ColorId = 4, ProductId = 7},  
         new Product { ProductName = "Shoes", ColorId = 2, ProductId = 8},  
         new Product { ProductName = "Sun Glasses", ColorId = 1, ProductId = 9},  
         new Product { ProductName = "Pen", ColorId = 2, ProductId = 10}  
      }
      .AsQueryable<Product>();
    }
  }
}

2-The Controller

Next, I created a class (IndexFormViewModel) to pass the Colors as a SelectList Collection to the strongly-typed view. And also create an Action FindProductsByColorID that returns a JsonResult that will be used by the JQuery code in the view to populate the cascading dropdown list.

Controllers/HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using JQueryJsonSelectDemo.Models;

namespace JQueryJsonSelectDemo.Controllers
{

  public class IndexFormViewModel
  {

    // Properties
    public SelectList Colors { get; private set; }

    // Constructor
    public IndexFormViewModel()
    {
      var colors = from c in Color.GetColorDataList()
                   select c;
      Colors = new SelectList(colors, "ColorId", "ColorName");
    }
  }

  [HandleError]
  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      ViewData["Message"] = "ASP.net MVC JQuery Cascading Select Demo!";
      return View(new IndexFormViewModel());
    }

    public ActionResult About()
    {
      return View();
    }

    public JsonResult FindProductsByColorID(int colorid)
    {
      // Simulate Loading Data "wait" 
      System.Threading.Thread.Sleep(1500);

      // return Json result using LINQ to SQL
      return new JsonResult
      {
        Data = (from p in Product.GetProductDataList()
                where p.ColorId == colorid
                select p).ToArray<Product>()
      };
    }
  }
}

3-Routing for the Ajax to call.

I create a route that I can call using the JQuery Ajax code.

Global.asax

      routes.MapRoute(
          "FindProducts",
          "FindProducts/{colorid}",
          new { controller = "Home", action = "FindProductsByColorID", colorid = "" }
      );

4-The View

Finally, The view which contains the JQuery code to make an Ajax request to my Home Controller Action (FindProductsByColorID) which returns a Json Result. If data is returned from the Action, the Products dropdown will be removed from being disabled and the options will be populated by the array from the JsonResult.

Views/Home/Index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<JQueryJsonSelectDemo.Controllers.IndexFormViewModel>" %>
<%@ Import Namespace="JQueryJsonSelectDemo.Models" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">Home Page</asp:Content>
<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
  $(function() {
    $("select#Colors").change(function() {
      var color = $("#Colors > option:selected").attr("value");

      $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: "FindProducts/" + color,
        data: "{}",
        dataType: "json",
        success: function(data) {
          $('#ProductsDiv > div').remove(); // remove any existing Products
          if (data.length > 0) {
            var options = '';
            for (p in data) {
              var product = data[p];
              options += "<option value='" + product.ProductId + "'>" + product.ProductName + "</option>";
            }
            $("#Products").removeAttr('disabled').html(options);

          } else {
            $("#Products").attr('disabled', true).html('');
            $("#ProductsDiv").append('<div>(None Found)</div>');
          }
        }
      });
    });
  });
</script>

</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
  <h2><%= Html.Encode(ViewData["Message"]) %></h2>
  
  <p>
    <label class="formlabel" for="Colors">Colors:</label>
    <%=Html.DropDownList("Colors", Model.Colors)%>
  </p>
  <p>
    <div id="ProductsDiv"></div>
  </p>
  <p>
    <label class="formlabel" for="Products">Products:</label>
    <select id="Products" disabled></select>
  </p>
</asp:Content>

Download the Source Code

My Toolbox

mike.nospam@nospam.michaeljbaird.com (mbaird) — Wed, 22 Oct 2008 12:42:00 -0600

I develop for both front end and backend ASP.net web applications and I find myself using a slew of applications on a daily basis. Also, I have hobbies of game map creation using Source SDK Tools, Video Editing, and 3D modeling. Everytime I format my PC at home, I write out a laundry list of applications that I need to install.

General Software

7-Zip - Open Source file archiver that handles Packing & unpacking: 7z, ZIP, GZIP, BZIP2 and TAR; Unpacking only: RAR, CAB, ISO, ARJ, LZH, CHM, MSI, WIM, Z, CPIO, RPM, DEB and NSIS
Camtasia Studio - Easily record your screen to create training, demo, and presentation video.
FireFox - Best browser on the planet.
Live Mesh - Keeps some files and folders in sync on multiple computers.
Métamorphose - Open Source to mass rename files and folders.
Notepad++ - Free source code editor.
Office - I do not use Office too often as I have my email going through gmail, but I still find myself using Outlook to at least sync my IMAP account.
Virtual CloneDrive - Free virtual drive software.
Windows Live Writer - Write and save blog posts. Intergrates nicely with BlogEngine.net.
Xobni - Best Outlook plug-in to search and give stats about your inbox.
Yahoo Messenger - The only IM I need to stay in touch with friends and family.
Zune - Yes, I own a Zune.

Graphic Design/Game Development/3D Modeling

Adobe Photoshop - Best image editor to date.
Adobe Illustrator - Sometimes I need clean vector graphics.
Pixologic ZBrush - Powerful 3D software to help sculpt detail into 3D geometry for games and film.
Softimage XSI - 3D software for games, television and film.
Valve Source SDK Tools - Game Developer toolkit to make and mod Valve Source games and Source Engine based games.

Development Software

Adobe Dreamweaver - I make most of my CSS designs in Dreamweaver.
Adobe Flash - Making rotating banners...etc. with actionscript.
Adobe Flex - Software to help create Flash based Rich Internet Applications.
Aptana Studio - A nice Open Source IDE for Javascript.
VistaDB - The lightweight alternative to SQL Server.
Visual Studio 2008 - Of course you know about this program.
WinMerge - A nice Open Source comparison tool.

Games

Call of Duty 4 - One of the nicest looking FPS to date.
Counter Strike:Source - Oldie but goodie FPS Terroist vs Counter-Terrorist.
Day of Defeat:Source - Similiar to CS:S but based on WWII.
Team Fortress 2 - Change of the 'real-life' look FPS.
Unreal Tournament 3 - Arcade FPS.

BlogEngine.net Custom Widget Properties

mike.nospam@nospam.michaeljbaird.com (mbaird) — Wed, 17 Sep 2008 09:42:00 -0600

For the theme on my site, I wanted to add individual styles to certain widgets to differentiate them from one and another and break up the monotonous look. In order to do that, I added a property to the Widget called CSSClass that appends a name to the existing class: widget so you can add different styles in your css to change the look of certain widgets.

So instead of class="widget", you could have class="widget_green" or class="widget_red"

App_GlobalResources/

Add name: cssClass value: CSS Class

App_Code/Controls/

//Add this to properties at top of WidgetBase.cs
private string _CSSClass;
/// 
/// Gets or sets the style of the widget. It is mandatory for all widgets to set the Style.
/// 
/// The style of the widget.
public string CSSClass
{
get { return _CSSClass; }
set { _CSSClass = value; }
}
//Added CssClass to widget class attribute to "protected override void Render(HtmlTextWriter writer)" and some custom title class and bottom class for my postit note widget styles
protected override void Render(HtmlTextWriter writer)
{
if (string.IsNullOrEmpty(Name))
throw new NullReferenceException("Name must be set on a widget");
StringBuilder sb = new StringBuilder();
sb.Append("

");
if (Thread.CurrentPrincipal.IsInRole(BlogSettings.Instance.AdministratorRole))
{
sb.Append("X");
if (IsEditable)
sb.Append("" + Resources.labels.edit + "");
}
if (ShowTitle)
{
sb.Append("

" + Title + "

");
}
else
{
sb.Append(" ");
}
sb.Append("

");
writer.Write(sb.ToString());
base.Render(writer);
writer.Write("

");
writer.Write("");
writer.Write("

");
}

//Add to WidgetEditBase.cs Properties
private string _CSSClass;
/// 
/// Gets or sets the CSS class of the widget. It is mandatory for all widgets to set the CSS Class.
/// 
/// The CSS class of the widget.
public string CSSClass
{
get { return _CSSClass; }
set { _CSSClass = value; }
}
[/code]
[code=c#;WidgetZone.cs]
//Add to WidgetZone.cs "protected override void OnLoad(EventArgs e)"
control.CSSClass = widget.Attributes["cssclass"].InnerText;
[/code]
admin/
[code=csharp;WidgetEditor.aspx]
//Add to WidgetEditor.aspx below ""




<%=Resources.labels.cssClass %>   
[/code]
[code=c#;WidgetEditor.cs]
//Add to WidgetEditor.cs in "private void btnSave_Click(object sender, EventArgs e)"
if (node.Attributes["cssclass"].InnerText != txtCSSClass.Text.Trim())
{
node.Attributes["cssclass"].InnerText = txtCSSClass.Text.Trim();
isChanged = true;
}
//Add to "private void SaveNewWidget(WidgetBase widget)"
XmlAttribute cssclass = doc.CreateAttribute("cssclass");
cssclass.InnerText = "";
node.Attributes.Append(cssclass);
//Change to "private void InitEditor(string type, string id)"
private void InitEditor(string type, string id)
{
XmlDocument doc = GetXmlDocument();
XmlNode node = doc.SelectSingleNode("//widget[@id=\"" + id + "\"]");
string fileName = Utils.RelativeWebRoot + "widgets/" + type + "/edit.ascx";
if (File.Exists(Server.MapPath(fileName)))
{
WidgetEditBase edit = (WidgetEditBase)LoadControl(fileName);
edit.WidgetID = new Guid(node.Attributes["id"].InnerText);
edit.Title = node.Attributes["title"].InnerText;
edit.ID = "widget";
edit.ShowTitle = bool.Parse(node.Attributes["showTitle"].InnerText);
edit.CSSClass = node.Attributes["cssclass"].InnerText;
phEdit.Controls.Add(edit);
}
if (!Page.IsPostBack)
{
cbShowTitle.Checked = bool.Parse(node.Attributes["showTitle"].InnerText);
txtTitle.Text = node.Attributes["title"].InnerText;
txtTitle.Focus();
txtCSSClass.Text = node.Attributes["cssclass"].InnerText;
btnSave.Text = Resources.labels.save;
}
btnSave.Click += new EventHandler(btnSave_Click);
}
[/code]
[code=js;widget.js]
//Change to "function editWidget(name, id)" for additional 50px from 500 to 550 height because of extra Property
var size = { 'height': 550, 'width': 750 };

CSS Example

/***********************************************
** WIDGETS
***********************************************/
/*GLOBAL*/
.widget,
.widget_green,
.widget_red,
.widget_blue{
width: 240px;
margin-bottom: 20px;
padding: 0;
display: block;
}
.widget ul,
.widget_green ul,
.widget_red ul,
.widget_blue ul{
list-style: none;
padding: 0;
margin: 0;
}
.widget li,
.widget_green li,
.widget_red li,
.widget_blue li{
margin: 0 0 0 15px;
}
.widget .content,
.widget_green .content,
.widget_red .content,
.widget_blue .content{
padding: 15px 10px 15px 10px;
}
.widget-bottom,
.widget_green-bottom,
.widget_red-bottom,
.widget_blue-bottom{
width: 240px;
height: 5px;
}
.widget .edit,
.widget_green .edit,
.widget_red .edit,
.widget_blue .edit{
float: right;
margin: 0 5px 0 0;
}
.widget .delete,
.widget_green .delete,
.widget_red .delete,
.widget_blue .delete{
float: right;
}
/*YELLOW*/
.widget{background: url(css/images/grunged_widget_yellow.png) 0 top no-repeat scroll;}
.widget-bottom{background: url(css/images/grunged_widget_yellow.png) 0 bottom no-repeat scroll;}
/*GREEN*/
.widget_green{ background: url(css/images/grunged_widget_green.png) 0 top no-repeat scroll; }
.widget_green-bottom{background: url(css/images/grunged_widget_green.png) 0 bottom no-repeat scroll;}
/*RED*/
.widget_red{background: url(css/images/grunged_widget_red.png) 0 top no-repeat scroll;}
.widget_red-bottom{background: url(css/images/grunged_widget_red.png) 0 bottom no-repeat scroll;}
/*BLUE*/
.widget_blue{background: url(css/images/grunged_widget_blue.png) 0 top no-repeat scroll;}
.widget_blue-bottom{background: url(css/images/grunged_widget_blue.png) 0 bottom no-repeat scroll;}
/*TITLES*/
div.widget_title{
width: 180px;
height: 30px;
margin: 10px 0 0 5px;
padding: 0;
display: block;
}
div.widget_title h4{display: none;}
.administration .widget_title{background: url(css/images/grunged_widget_title.png) 0px 0px no-repeat scroll;}
.blogroll .widget_title{background: url(css/images/grunged_widget_title.png) 0px -30px no-repeat scroll;}
.calendar .widget_title{background: url(css/images/grunged_widget_title.png) 0px -60px no-repeat scroll;}
.categorylist .widget_title{background: url(css/images/grunged_widget_title.png) 0px -90px no-repeat scroll;}
.linklist .widget_title{background: url(css/images/grunged_widget_title.png) 0px -120px no-repeat scroll;}
.monthlist .widget_title{background: url(css/images/grunged_widget_title.png) 0px -150px no-repeat scroll;}
.mostcomments .widget_title{background: url(css/images/grunged_widget_title.png) 0px -180px no-repeat scroll;}
.newsletter .widget_title{background: url(css/images/grunged_widget_title.png) 0px -210px no-repeat scroll;}
.pagelist .widget_title{background: url(css/images/grunged_widget_title.png) 0px -240px no-repeat scroll;}
.recentcomments .widget_title{background: url(css/images/grunged_widget_title.png) 0px -270px no-repeat scroll;}
.recentposts .widget_title{background: url(css/images/grunged_widget_title.png) 0px -300px no-repeat scroll;}
.search .widget_title{background: url(css/images/grunged_widget_title.png) 0px -330px no-repeat scroll;}
.tagcloud .widget_title{background: url(css/images/grunged_widget_title.png) 0px -360px no-repeat scroll;}
.twitter .widget_title{background: url(css/images/grunged_widget_title.png) 0px -390px no-repeat scroll;}

MichaelJBaird.com and BlogEngine.net

mike.nospam@nospam.michaeljbaird.com (mbaird) — Fri, 05 Sep 2008 20:07:00 -0600

Well I finally got my website up and running. After a couple of years using Joomla and a Apache/MySQL environment, I switched to ASP.NET, VistaDB Express, C# using the .NET open source application BlogEngine.net.

As a developer, I was happy to learn that BlogEngine.net was completely open source so I could modify the code to suit my needs for my site. Also, it is very easy to either implement an existing blog theme or make your own, which is what I did with my site. I’ve looked at quite a lot of .Net blog software including some expensive paid versions and I have to say BlogEngine.Net is the best and easiest to set up that I have seen so far. If you are looking for a .NET based blog solution, I would highly recommend it.

I will be providing my experiences and knowledge with BlogEngine.net and as well with other things in the future.