StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
3744376
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
11
CommunityOwnedDate
CreationDate
2010-09-19T03:06:19.040
FavoriteCount
0
LastActivityDate
2010-09-19T06:16:11.767
LastEditDate
2010-09-19T06:16:11.767
LastEditorUserId
385172
OwnerUserId
385172
ParentId
3743803
PostTypeId
2
Score
9
ViewCount
0
LastEditorDisplayName
text
Body
Here's a nice way to do it : Suppose that we have two drop lists, country and city ,, the city drop down is disabled by default and when a country is selected the following happens : <pre><code>1. city drop down list gets enabled. 2. An AJAX call is made to an action method with the selected country and a list of cities is returned. 3. the city drop down list is populated with the JSON data sent back. </code></pre> Credits for the original code goes to <a href="http://www.kingwilder.com/" rel="nofollow noreferrer">King Wilder</a> from <a href="http://www.mvccentral.net/" rel="nofollow noreferrer">MVC Central</a>. This example is a simplified version that was extracted from his code in the <a href="http://www.mvccentral.net/Article/Details/3/Golf_Tracker_-_Pt_1_-_Overview" rel="nofollow noreferrer">Golf Tracker Series</a>. HTML <pre><code><select id="Country"> // a List of Countries Options Goes Here. </select></div> <select id="City" name="City" disabled="disabled"> // To be populated by an ajax call </select> </code></pre> <hr> JavaScript <pre><code>// Change event handler to the first drop down ( Country List ) $("#Country").change(function() { var countryVal = $(this).val(); var citySet = $("#City"); // Country need to be selected for City to be enabled and populated. if (countryVal.length > 0) { citySet.attr("disabled", false); adjustCityDropDown(); } else { citySet.attr("disabled", true); citySet.emptySelect(); } }); // Method used to populate the second drop down ( City List ) function adjustCityDropDown() { var countryVal = $("#Country").val(); var citySet = $("#City"); if (countryVal.length > 0) { // 1. Retrieve Cities that are in country ... // 2. OnSelect - enable city drop down list and retrieve data $.getJSON("/City/GetCities/" + countryVal , function(data) { // loadSelect - see Note 2 bellow citySet.loadSelect(data); }); } } </code></pre> <hr> Action Method <pre><code>[HttpGet] public ActionResult GetCities(string country) { Check.Require(!string.IsNullOrEmpty(country), "State is missing"); var query = // get the cities for the selected country. // Convert the results to a list of JsonSelectObjects to // be used easily later in the loadSelect Javascript method. List<JsonSelectObject> citiesList = new List<JsonSelectObject>(); foreach (var item in query) { citiesList.Add(new JsonSelectObject { value = item.ID.ToString(), caption = item.CityName }); } return Json(citiesList, JsonRequestBehavior.AllowGet); } </code></pre> <hr> Important Notes: 1. The <code>JsonSelectObject</code> help make things easier when converting the results to an option tag as it will be used in the javascript <code>loadSelect</code> method below. it's basically a class with the two properties value and caption : <pre><code>public class JsonSelectObject { public string value { get; set; } public string caption { get; set; } } </code></pre> 2. The function <code>loadSelect</code> is a helper method that takes a list of json objects originally of type<code>JsonSelectObject</code> , converts it to a list of options to be injected in calling drop down list. it's a cool trick from the "jQuery In Action" book as referenced in the original code, it's included in a <code>jquery.jqia.selects.js</code> file that you will need to reference. Here's the code in that js file : <pre><code>(function($) { $.fn.emptySelect = function() { return this.each(function() { if (this.tagName == 'SELECT') this.options.length = 0; }); } $.fn.loadSelect = function(optionsDataArray) { return this.emptySelect().each(function() { if (this.tagName == 'SELECT') { var selectElement = this; selectElement.add(new Option("[Select]", ""), null); $.each(optionsDataArray, function(index, optionData) { var option = new Option(optionData.caption, optionData.value); if ($.browser.msie) { selectElement.add(option); } else { selectElement.add(option, null); } }); } }); } })(jQuery); </code></pre> This method might be complex ,,, but at the end you will have a clean & compact code that you can use everywhere else. I hope this was helpful ,,, <hr> Update Using POST instead of GET in the AJAX call You can replace the <code>$.getJSON</code> call with the following code to make the ajax call using POST instead of GET. <pre><code>$.post("/City/GetCities/", { country: countryVal }, function(data) { citySet.loadSelect(data); }); </code></pre> also remember to change your Action method to accept POST requests by changing the [HttpGet] annotation with [HttpPost] and remove the <code>JsonRequestBehavior.AllowGet</code> when returning the result in the Action Method. Important Note Note that we are using the value of the selected item rather than the name. for example if the user selected the following option. <pre><code><option value="US">United States</option> </code></pre> then "US" is sent to the Action method and not "United States" Update 2: Accessing the Selected Values In The Controller suppose that you have the following two properties in your <code>Vehicle</code> viewmodel: <pre><code>public string Maker { get; set; } public string Model { get; set; } </code></pre> and you name your select elements with the same name as your ViewModel properties. <pre><code><select id="Maker" name="Maker"> // a List of Countries Options Goes Here. </select></div> <select id="Model" name="Model" disabled="disabled"> // To be populated by an ajax call </select> </code></pre> Then the selected values will be automatically Bound to your ViewModel and you can access them directly in you Action Method. This will work if the page is Strongly Typed to that ViewModel. <hr> Note: For the first list ( The Makes List ) you can create a MakersList of type SelectList in your ViewModel and use the HTML helper to automatically populate your Makers Drop Down with the list in your ViewModel. the code will look something like this : <pre><code><%= Html.DropDownListFor(model => model.Maker, Model.MakersList) %> </code></pre> In that case the generated name for this select will be also "Maker" (the name of the property in the ViewModel). I hope this is the answer you are looking for.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POPopulating Dropdownlist Using MVC2 Based On Another Dropdownlist (Cascading DropDownList)
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USManaf Abu.Rous
UserOwnerUserId
1. USManaf Abu.Rous
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.