Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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