title: mvc ajax.beginform not working with partialview
body: <p>I have been trying to get cascading dropdowns working in asp.net mvc4 .... For now I am starting with ajax.beginform ... later I may go to straight jquery....</p>
  
  <p>My problem is that the first (track) ajax.beginform is called, it calls the controller and then this directs to the second partial (rail) ... but when the SelectRailPartial.cshtml rendors it does so a full view...it is not rendor with the div tag as a replacement.... I have tried the various values in ajaxControls to specify replacement, etc...they did not seem to make a difference...</p>
  
  <p>I suspect that my problem may be in the javascripts I am including....I have stripped it all back to a few I know I need to keep things simple....Can anyone spot what I am doing wrong?   Please....</p>
  
  <p><strong>In My (Mobile) Controller I have the following two methods:</strong></p>
  
  <pre><code> //this is my main form that I am looking at...
      public ActionResult LoadRailVehicle()
      {
          LoadRailVehicleInputModel model = new LoadRailVehicleInputModel();
          IRailService railService = new RailService();
          model.TrackList = railService.GetActiveRailTracks().ToList();
          return View(model);
      }
  
  
      [HttpPost]
      public ActionResult SelectTrack(string selectedTrack)
      {
          LoadRailVehicleInputModel model = new LoadRailVehicleInputModel();
          //kludge for now...
          model.RailCarList.Add("aaaa");         
          return PartialView("xSelectRailPartial", model);
      }
  </code></pre>
  
  <p><strong>My LoadRailVehicle.cshtml</strong></p>
  
  <pre><code>@using TBS.Etracs.Web.Main.Areas.Carrier.Models
  @model LoadRailVehicleInputModel
  
  @{
      ViewBag.Title = "Load Rail Vehicle";
  }
  
  &lt;scripts&gt;   
          &lt;script src="@Url.Content("~/Scripts/jquery-1.9.1.js")"                    type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"                type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="@Url.Content("~/Scripts/jquery-1.9.1.intellisense.js")"       type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="@Url.Content("~/Scripts/jquery-1.10.1.min.js")"               type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")"             type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/scripts&gt;
  
  &lt;table border="0"&gt;
      &lt;tr&gt;
          &lt;td&gt;Track&lt;/td&gt;
          &lt;td&gt; :   &lt;/td&gt;
          &lt;td&gt;&lt;div id="trackdiv"&gt;@Html.Partial("xSelectTrackPartial", Model)&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Rail&lt;/td&gt;
          &lt;td&gt; :  &lt;/td&gt;
          &lt;td&gt;&lt;div id="Raildiv"&gt;@Html.Partial("xSelectRailPartial", Model)&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>In xSelectTrackPartial.cshtml:</strong></p>
  
  <pre><code>@using TBS.Etracs.Web.Main.Areas.Carrier.Models
  @model LoadRailVehicleInputModel
  
  &lt;scripts&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery-1.10.1.min.js")"               type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")"             type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/scripts&gt;
  
  @using (Ajax.BeginForm("SelectTrack", "Mobile",
                      new AjaxOptions
                      {  UpdateTargetId   = "Raildiv" 
                                  @* This is a control in theLoadRailVehicle.cshtml *@
                        }))
  {
      @Html.DropDownListFor(p =&gt; p.SelectedTrack,
                            new SelectList(Model.TrackList),          
                            new { id       = "trackdropdown",
                                  name     = "trackdropdown",
                                  Class    = "dropdownstyle", 
                                  style    = "width: 100px" , 
                                  onchange = "this.form.submit();"})
  }  
  </code></pre>
  
  <p><strong>in xSelectRailPartial.cshtml</strong></p>
  
  <pre><code>@using TBS.Etracs.Web.Main.Areas.Carrier.Models
  @model LoadRailVehicleInputModel
  
  &lt;scripts&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery-1.10.1.min.js")"               type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")"             type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/scripts&gt;
  
  @if (Model.RailCarList != null &amp;&amp; Model.RailCarList.Count() &gt; 0)
  {
      @Html.DropDownListFor(p =&gt; p.SelectedRailCar,
                              new SelectList(Model.RailCarList),         
                              new { id       = "raildropdown",
                                    name     = "raildropdown",
                                    Class    = "dropdownstyle", 
                                    style    = "width: 100px" })
  }
  </code></pre>
  
  <p><strong>Here is my _layout.cshtml</strong> which I am getting via the _viewstart</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;@ViewBag.Title - Etracs&lt;/title&gt;
          &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
          &lt;meta name="viewport" content="width=device-width" /&gt;
        @*  @Styles.Render("~/Content/css")        *@
        @*  @Scripts.Render("~/bundles/modernizr") *@
        @*  @Scripts.Render("~/bundles/jquery")    *@
          &lt;script src="@Url.Content("~/Scripts/jquery-1.9.1.js")"                    type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"                type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="@Url.Content("~/Scripts/jquery-1.9.1.intellisense.js")"       type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="@Url.Content("~/Scripts/jquery-1.10.1.min.js")"               type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")"             type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
         @RenderSection("scripts", required: false) 
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;header&gt;
              &lt;div class="content-wrapper"&gt;
                  &lt;div class="float-right"&gt;
                      &lt;section id="login"&gt;
                          @Html.Partial("_LoginPartial")
                      &lt;/section&gt;
                  &lt;/div&gt;
              &lt;/div&gt;      
          &lt;/header&gt;
  
          &lt;div id="body"&gt;         
              &lt;section class="content-wrapper main-content clear-fix"&gt;
                  @RenderBody()
              &lt;/section&gt;
          &lt;/div&gt;
  
  
          @Html.Partial("_ViewSwitcher")
          &lt;footer&gt;
              &lt;div class="content-wrapper"&gt;
                  &lt;div class="float-left"&gt;
                      &lt;p&gt;&amp;copy; @DateTime.Now.Year - Turning Basin Services&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/footer&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>