I just started to look at WebMatrix and am wondering if there's a good tutorial somewhere that shows how to implement in WebMatrix the cascading dropdownlists? I've used this element in the AJAX Control Toolkit, but haven't figured out how to do so in WebMatrix.
Can anyone suggest a tutorial for this?
Here's a proof of concept I did using the Customers table from the Northwind database.
Default.cshtml
@{
Layout = "~/_SiteLayout.cshtml";
var db = Database.Open("Northwind");
var source = db.Query("SELECT DISTINCT Country FROM Customers");
List<SelectListItem> items = new List<SelectListItem>();
foreach (var item in source)
{
items.Add(new SelectListItem { Text = item.Country });
}
}
<form>
@Html.DropDownList("Country", items)
<select id="Customer" name="Customer">
<option>Select Country First</option>
</select>
</form>
<script type="text/javascript">
$(function () {
$("#Country").change(function () {
var selectedCountry = $(this).val();
$.getJSON('Customers.cshtml', { country: selectedCountry }, function (customers) {
var customerSelect = $('#Customer');
customerSelect.empty();
$.each(customers, function (index, customer) {
customerSelect.append(
$('<option/>')
.attr('value', customer.CustomerID)
.text(customer.CompanyName)
);
});
});
});
});
</script>
Customers.cshtml
@{
var db = Database.Open("Northwind");
var source = db.Query("SELECT CustomerID, CompanyName FROM Customers WHERE Country = @0", Request["country"]);
Json.Write(source, Response.Output);
}
Also make sure you include a reference to jQuery in your _SiteLayout.cshtml.
Please mark as answered if this helped.
Marked as answer by Mikesdotnetting on Feb 22, 2013 04:27 AM
Hello Mike, I implemented your example in my webapplication. Is there a way to populate the lists from values in a database, not from the cs-file - I didn't find any examples of that.
Here is an example of getting the values for your second (dependent) drop-down from the database.
In my case, the user selects their state of residence and then the county drop-down list is populated with the counties from their state.
@{
var db = Database.Open("SampleDB");
var source = db.Query("SELECT CountyName FROM tbCountyList WHERE StateAbbrev = @0", Request["StateMarriage"]);
Json.Write(source, Response.Output);
}
SidC
Member
44 Points
141 Posts
How to Develop Cascading DropDownLists in WebMatrix?
Apr 22, 2011 05:45 PM|LINK
Hi All,
I just started to look at WebMatrix and am wondering if there's a good tutorial somewhere that shows how to implement in WebMatrix the cascading dropdownlists? I've used this element in the AJAX Control Toolkit, but haven't figured out how to do so in WebMatrix. Can anyone suggest a tutorial for this?
Thanks,
Sid
sid@webdbapps.net
Mikesdotnett...
All-Star
154830 Points
19854 Posts
Moderator
MVP
Re: How to Develop Cascading DropDownLists in WebMatrix?
Apr 23, 2011 07:36 PM|LINK
Someone did a really good article on this. Oh yes - that was me
http://www.mikesdotnetting.com/Article/166/Razor-Cascading-Select-Lists-and-jQuery-Templates-A-New-Twist
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
chohmann
Star
9385 Points
1644 Posts
Re: How to Develop Cascading DropDownLists in WebMatrix?
Apr 30, 2011 03:18 AM|LINK
Here's a proof of concept I did using the Customers table from the Northwind database.
Default.cshtml
@{ Layout = "~/_SiteLayout.cshtml"; var db = Database.Open("Northwind"); var source = db.Query("SELECT DISTINCT Country FROM Customers"); List<SelectListItem> items = new List<SelectListItem>(); foreach (var item in source) { items.Add(new SelectListItem { Text = item.Country }); } } <form> @Html.DropDownList("Country", items) <select id="Customer" name="Customer"> <option>Select Country First</option> </select> </form> <script type="text/javascript"> $(function () { $("#Country").change(function () { var selectedCountry = $(this).val(); $.getJSON('Customers.cshtml', { country: selectedCountry }, function (customers) { var customerSelect = $('#Customer'); customerSelect.empty(); $.each(customers, function (index, customer) { customerSelect.append( $('<option/>') .attr('value', customer.CustomerID) .text(customer.CompanyName) ); }); }); }); }); </script>Customers.cshtml
@{ var db = Database.Open("Northwind"); var source = db.Query("SELECT CustomerID, CompanyName FROM Customers WHERE Country = @0", Request["country"]); Json.Write(source, Response.Output); }Also make sure you include a reference to jQuery in your _SiteLayout.cshtml.
being_mp
Member
42 Points
26 Posts
Re: How to Develop Cascading DropDownLists in WebMatrix?
Feb 22, 2012 07:39 PM|LINK
Hello Mike, I implemented your example in my webapplication. Is there a way to populate the lists from values in a database, not from the cs-file - I didn't find any examples of that.
jmbishop
Member
99 Points
34 Posts
Re: How to Develop Cascading DropDownLists in WebMatrix?
Feb 23, 2012 02:58 PM|LINK
Here is an example of getting the values for your second (dependent) drop-down from the database.
In my case, the user selects their state of residence and then the county drop-down list is populated with the counties from their state.
@{ var db = Database.Open("SampleDB"); var source = db.Query("SELECT CountyName FROM tbCountyList WHERE StateAbbrev = @0", Request["StateMarriage"]); Json.Write(source, Response.Output); }This is just like chohmann's example above.
Hope that helps.
wavemaster
Participant
1279 Points
1125 Posts
Re: How to Develop Cascading DropDownLists in WebMatrix?
Feb 22, 2013 12:33 AM|LINK
DELETE