MVC jquery Cascading dropdowns or selectlist

This is one of those requirements that can so easily be over looked during initial requirement gathering.  Back in the day cascading or dependant selects were extremely cumbersome.  We could barely talk to the client once the server let go of the page.  Now with mvc and jquery we can create these amazing applications that have beautiful flow no page refreshes and just puts the magic back in IT.  

Well I got hit with the cascading dropdown or select requirement.  Which as you start to try to find information on this particular subject you will see we have not come unified naming convention.  We all know what a select is and we all know what a dropdown is.  It is painfully difficult to find info on something that can be named two things.  With a ton of research (ok not a ton) I was able to create a dependant dropdown using mvc and jquery.

 Here is how I did it

 put a dropdown on the page

<td><%= Html.DropDownList(“versionList”)%></td>

I populate mine based on the first product in the product dropdown

ViewData[“versionList”] = new SelectList(versionlist, “fldVersionID”, “fldVersionName”);

Well that’s great.  Easy as can be.  Well that is only going to fill it on the initial load.  This dropdown is dependant on another dropdown.

so we have to write jquerry to talk to the dropdown we want to drive our version values

//this line adds an onchange function to the products dropdown

$(“select#fldProductID”).change(function () {

//this line removes the values from the version dropdown

$(‘#versionList’).children().remove().end();

//this is the value getting passed to us from the products dropdown

var version = this.value;

//this is the json that calls the control to give us back the new options for our version dropdown

$.getJSON(‘testplan/ProductListVersion/’ + version, function (data) {

//declare a variable to store our options

var items = “”;

//loop through the data returned

$.each(data, function (index, optionData) {

//concatenate them into a nice options list

items += “<option value='” + optionData.valueOf + “‘>” + optionData.Text + “</option>”;

});

//append them to the verison dropdown

$(‘#versionList’).html(items);

})

})

Now for the control that sends back the json

 public ActionResult ProductListVersion(int id)

{

tblVersionsInfoSearchList versionlist = tblVersionsInfoSearchList.GettblVersionsInfoSearchList(id);

ViewData[“versionList”] = new SelectList(versionlist, “fldVersionID”, “fldVersionName”);

return Json(ViewData[“versionList”], JsonRequestBehavior.AllowGet);

}

I complained and complained that I could not find a good example of what I was trying to do..now that I have tried to write my simple solution.  I find it is not a simple as I thought.

Well hope this helps anyone else who might come across this often over looked PITA requirement and are able to get it done faster.

About dorothyjarry

Super Dots
This entry was posted in Coding/Development, Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s