Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I have done something similar. Here is some of the code (apologies upfront for this being quite long, but I wanted to make sure you could re-create this on your side):</p> <p>View looks like this:</p> <pre><code>using Cascading.Models @model CascadingModel @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } &lt;h2&gt;Cascading Forms&lt;/h2&gt; &lt;table&gt; @using(Html.BeginForm("Index", "Home")) { &lt;tr&gt; &lt;td&gt;@Html.LabelFor(m=&gt;m.CategoryId)&lt;/td&gt; &lt;td&gt;@Html.DropDownListFor(m =&gt; m.CategoryId, new SelectList(Model.Categories, "Id", "Name"), string.Empty)&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;@Html.LabelFor(m=&gt;m.ProductId)&lt;/td&gt; &lt;td&gt;@Html.CascadingDropDownListFor(m =&gt; m.ProductId, new SelectList(Model.Products, "Id", "Name"), string.Empty, null, "CategoryId", "Home/CategorySelected")&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&lt;input type="submit" value="Go"/&gt;&lt;/td&gt; &lt;/tr&gt; } &lt;/table&gt; </code></pre> <p>the Model looks as follows:</p> <pre><code>public class CascadingModel { public int CategoryId { get; set; } public List&lt;Category&gt; Categories { get; set; } public int ProductId { get; set; } public List&lt;Product&gt; Products { get; set; } } </code></pre> <p>the real "clever" part of the system is the Html.CascadingDropDownListFor which looks as follows:</p> <pre><code>public static class MvcHtmlExtensions { public static MvcHtmlString CascadingDropDownListFor&lt;TModel, TProperty&gt;( this HtmlHelper&lt;TModel&gt; htmlHelper, Expression&lt;Func&lt;TModel, TProperty&gt;&gt; expression, IEnumerable&lt;SelectListItem&gt; selectList, string optionLabel, IDictionary&lt;string, Object&gt; htmlAttributes, string parentControlName, string childListUrl ) { var memberName = GetMemberInfo(expression).Member.Name; MvcHtmlString returnHtml = Html.SelectExtensions.DropDownListFor(htmlHelper, expression, selectList, optionLabel, htmlAttributes); var returnString = MvcHtmlString.Create(returnHtml.ToString() + @"&lt;script type=""text/javascript""&gt; $(document).ready(function () { $(""#&lt;&lt;parentControlName&gt;&gt;"").change(function () { var postData = { &lt;&lt;parentControlName&gt;&gt;: $(""#&lt;&lt;parentControlName&gt;&gt;"").val() }; $.post('&lt;&lt;childListUrl&gt;&gt;', postData, function (data) { var options = """"; $.each(data, function (index) { options += ""&lt;option value='"" + data[index].Id + ""'&gt;"" + data[index].Name + ""&lt;/option&gt;""; }); $(""#&lt;&lt;memberName&gt;&gt;"").html(options); }) .error(function (jqXHR, textStatus, errorThrown) { alert(jqXHR.responseText); }); }); }); &lt;/script&gt;" .Replace("&lt;&lt;parentControlName&gt;&gt;", parentControlName) .Replace("&lt;&lt;childListUrl&gt;&gt;", childListUrl) .Replace("&lt;&lt;memberName&gt;&gt;", memberName)); return returnString; } private static MemberExpression GetMemberInfo(Expression method) { LambdaExpression lambda = method as LambdaExpression; if (lambda == null) throw new ArgumentNullException("method"); MemberExpression memberExpr = null; if (lambda.Body.NodeType == ExpressionType.Convert) { memberExpr = ((UnaryExpression)lambda.Body).Operand as MemberExpression; } else if (lambda.Body.NodeType == ExpressionType.MemberAccess) { memberExpr = lambda.Body as MemberExpression; } if (memberExpr == null) throw new ArgumentException("method"); return memberExpr; } } </code></pre> <p>Controller Logic for those looking for it:</p> <pre><code>public ActionResult CategoriesAndProducts() { var viewModel = new CategoriesAndProductsViewModel(); viewModel.Categories = FetchCategoriesFromDataBase(); viewModel.Products = FetchProductsFromDataBase(); viewModel.CategoryId = viewModel.Categories[0].CategoryId; viewModel.ProductId = viewModel.Products.Where(p =&gt; p.CategoryId).FirstOrDefault().ProductId; return View(viewModel); } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload