title: MVC 4 Changing a field based on DropDownListFor selection
body: <p>I have a form that has a dropdownlist that is made up of different course names and a textbox that will contain the number of the next course section based on the dropdown selection and its highest existing section number in the database. After a selection is made the javascript will get called, then call my controller method to figure out which section number it should be, and then fill the textbox. </p>
  
  <p>My dropdownlist: Controller</p>
  
  <pre><code>ViewBag.CourseList = new SelectList(db.CourseLists, "CourseTitle", "CourseTitle");
  </code></pre>
  
  <p>My dropdownlist: View</p>
  
  <pre><code>@Html.DropDownListFor(model =&gt; model.CourseTitle,
                  new SelectList(@ViewBag.CourseList, "Value", "Text"), " -- Select Course -- ", new { @id = "CourseTitle", onchange = "CourseChange()" })
  @Html.ValidationMessageFor(model =&gt; model.CourseTitle)
  </code></pre>
  
  <p>Textbox:</p>
  
  <pre><code>@Html.EditorFor(model =&gt; model.ClassNumber, new { @id = "ClassNumber" })
  @Html.ValidationMessageFor(model =&gt; model.ClassNumber)
  </code></pre>
  
  <p>Javascript functions:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    function CourseChange() {
        var courseTitle = $('#CourseTitle').val(); //Is always null
        $.getJSON("NextClassNumber", courseTitle, updateClassNumber);
    };
  
    updateClassNumber = function (data) {
        $('#ClassNumber').val(data);
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>When I make a change my method in my controller is called and passes back a value and sets my textbox, but the value for the selected item is coming through as null.  Any ideas as to why?</p>
  
  <p>::::EDIT::::</p>
  
  <pre><code>@model QIEducationWebApp.Models.Course
  
  @{
      ViewBag.Title = "Add New Course";
  }
  
  &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;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;   
  &lt;script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          $('#CourseTitle').on('change', function () {
              var courseTitle = $(this).val();
              $.ajax({
                  url: '@Url.RouteUrl(new{ action="NextClassNumber", controller="Course"})',
                  data: { courseTitle: courseTitle },
                  type: 'get'
              }).done(function (data) {
                  $('#ClassNumber').val(data);
              });
          });
      });
  
  &lt;/script&gt;
  
  &lt;h1 class="page-header"&gt;@ViewBag.Title&lt;/h1&gt;
  
  @using (Html.BeginForm())
  {
      @Html.ValidationSummary(true)
  
      &lt;table class="table"&gt;
          &lt;tr&gt;
              &lt;th class="table-row"&gt;
                  Course Title:
              &lt;/th&gt;
              &lt;td class="table-row"&gt;
                  @Html.DropDownListFor(model =&gt; model.CourseTitle1,
                      @ViewBag.CourseList as SelectList, " -- Select Course -- ", new { @class="form-control", @id="CourseTitle" })
                  @Html.ValidationMessageFor(model =&gt; model.CourseTitle)
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th class="table-row"&gt;
                  Class Number:
              &lt;/th&gt;
              &lt;td class="table-row"&gt;
                  @Html.EditorFor(model =&gt; model.ClassNumber, new { @id = "ClassNumber" })
                  @Html.ValidationMessageFor(model =&gt; model.ClassNumber)
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th class="table-row"&gt;
                  Course Type:
              &lt;/th&gt;
              &lt;td class="table-row"&gt;
                  @Html.DropDownList("CourseType", " -- Select Type -- ")
                  @Html.ValidationMessageFor(model =&gt; model.CourseType)
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th class="table-row"&gt;
                  Start &amp; End Date:
              &lt;/th&gt;
              &lt;td class="table-row"&gt;
                  @Html.EditorFor(model =&gt; model.CourseStartDate)
                  @Html.ValidationMessageFor(model =&gt; model.CourseStartDate)
              &lt;/td&gt;
              &lt;td class="table-row"&gt;
                  @Html.EditorFor(model =&gt; model.CourseEndDate)
                  @Html.ValidationMessageFor(model =&gt; model.CourseEndDate)
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;&lt;td class="table-row-blank"&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="table-row-button"&gt;
                  &lt;input class="button" type="submit" value="Create" /&gt;
                  &lt;input type="button" class="button" value="Cancel" 
                      onclick="location.href='@Url.Action("Index")'" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  }
  
  
  @section Scripts {
      @Scripts.Render("~/bundles/jqueryval")
  }
  </code></pre>