title: Cascading DropdownList with MVC5, Ajax, C# and MSSQL Server
body: <p>I'm quite new to MVC coming from windows forms and 3 tier architecture.</p>
  
  <p>I'm trying to figure out using cascading dropdownlists (DDL) populated from database.
  Im using MS SQL Server 2012, VS 2013</p>
  
  <p>Currently I'm work on user questionnaire which users can select from multiple answers from DDL. Depend on some selections I need to change answers (again DDL) on next question.</p>
  
  <p>Database:</p>
  
  <p>Table <code>DDLStacks</code>:</p>
  
  <pre><code>StackId | StackName
     1    | Berry
     2    | BerryColor
     3    ....
  </code></pre>
  
  <p>Table <code>DDLStackContents</code> (SCId Stack content id, indexing purpose)</p>
  
  <pre><code>SCId | StackId | GroupId | Key | Value
  --------------------------------------
  1 | 1 | Null | 1 | Grape
  2 | 1 | Null | 2 | Avocado
  3 | 1 | Null | 3 | Banana
  4 | 2 | Null | 1 | Yellow
  5 | 2 | Null | 2 | Green
  6 | 2 | 1 | 3 | Red
  7 | 2 | 1 | 4 | Orange
  8...
  </code></pre>
  
  <p>Procedure:</p>
  
  <pre><code>   CREATE PROCEDURE [dbo].[spDLLSelect]
          @p_StackName_in VARCHAR(20),
          @p_GroupId_in Int = null
      AS 
      BEGIN
          SELECT [Key],Value FROM DDLStackContents
          WHERE StackID IN (SELECT StackId FROM DDLStacks WHERE StackName = @p_StackName_in)
          AND (GroupId = @p_GroupId_in OR @p_GroupId_in IS null) 
          Order By [Key] 
      END
  </code></pre>
  
  <p>As you can see <code>DDLStacks</code> hold questions, <code>DDLStackContents</code> holds possible answers for that question. </p>
  
  <p>If there is a group we can select just the answers from that group otherwise all the answers for particular stack.</p>
  
  <p>Now then I have created an ADO.NET Entity Data model to access spDLLSelect.</p>
  
  <p>Now my fruit model is this</p>
  
  <pre><code>public class FruitModel
  {
      public IEnumerable&lt;SelectListItem&gt; BerryList { get; set; }
      public IEnumerable&lt;SelectListItem&gt; BerryColorList { get; set; }
  
      [Display(Name = "Berry")]
      public byte? Berry { get; set; }
  
      [Display(Name = "BerryColor")]
      public byte? BerryColor { get; set; }
  }
  </code></pre>
  
  <p>My controller is this, I need to select color depend on type of berry. Say if Avacado select all, if Banana just group 1.</p>
  
  <pre><code>public class HomeController : Controller
  {
      public ActionResult Index()
      {
          CherryEntities db = new CherryEntities();
          var model = new FruitModel();
          model.BerryList = new SelectList(db.spDLLSelect("Berry", null), "Key", "Value");
          //model.BerryColorList = new SelectList(db.spDLLSelect("BerryColor", null), "Key", "Value");
          //model.BerryColorList = new SelectList(db.spDLLSelect("BerryColor", 1), "Key", "Value");
          return View(model);
      }
  }   
  </code></pre>
  
  <p>Here's my view:</p>
  
  <pre><code>@using (Html.BeginForm("Register2", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
  {
  
  &lt;div class="form-group"&gt;
      @Html.LabelFor(m =&gt; m.Berry, new { @class = "col-md-2 control-label" })
      &lt;div class="col-md-10" &gt;
          @Html.DropDownListFor(m =&gt; m.Berry, Model.BerryList, "Please Select")
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      @Html.LabelFor(m =&gt; m.BerryColor, new { @class = "col-md-2 control-label" })
      &lt;div class="col-md-10"&gt;
          @Html.DropDownListFor(m =&gt; m.BerryColor, Model.BerryColorList, "Please Select")
      &lt;/div&gt;
  &lt;/div&gt;
  
  }
  </code></pre>
  
  <p>This is my basic coding, I have tried various methods to make this working, I'd like to see proper way of doing this with ajax STRONGLY Typed code.</p>
  
  <p>May be using partial views? any thoughts? </p>