title: Can't pass selected value DropDownListFor to javascript function
body: <p>My simpel test Model:</p>
  
  <pre><code>public class MovieModel {
  
      public string SelectedCategorieID { get; set; }
  
      public List&lt;CategorieModel&gt; Categories { get; set; }
  
      public MovieModel() {
          this.SelectedCategorieID = "0";
          this.Categories = new List&lt;CategorieModel&gt;() {new CategorieModel {ID = 1,
              Name = "Drama"},
          new CategorieModel {ID = 2,
              Name = "Scifi"}};
      }
  }
  
  public class CategorieModel {
      public int ID { get; set; }
      public string Name { get; set; }
  }
  </code></pre>
  
  <p>My Home controller action Index:</p>
  
  <pre><code>    public ActionResult Index() {
  
          Models.MovieModel mm = new Models.MovieModel();
  
          return View(mm);
      }
  </code></pre>
  
  <p>My strongly typed View:</p>
  
  <pre><code>@model MvcDropDownList.Models.MovieModel
  @{
      ViewBag.Title = "Home Page";
  }
  &lt;script type="text/javascript"&gt;
      function categoryChosen(selectedCatID) {
  //        debugger;
          var url = "Home/CategoryChosen?SelectedCategorieID=" + selectedCatID;
          $.post(url, function (data) {
              $("#minicart").html(data);
          });
      }
  &lt;/script&gt;
  
  @using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) {
  
      &lt;fieldset&gt;
          Movie Type
          @Html.DropDownListFor(m =&gt; m.SelectedCategorieID, new SelectList(Model.Categories, "ID", "Name", Model.SelectedCategorieID), "---Select categorie---")
          &lt;p&gt;
              &lt;input type="submit" value="Submit" /&gt;
          &lt;/p&gt;
      &lt;/fieldset&gt;
  
  }
  &lt;input type="button" value="Minicart test" onclick="categoryChosen('@Model.SelectedCategorieID');" /&gt;
  &lt;div id="minicart"&gt;
      @Html.Partial("Information")
  &lt;/div&gt;
  </code></pre>
  
  <p>Please ignore the first input, because I'm using the second input with 'Minicart test' on it (the HTML.Beginform is there to learn something else later). The mini cart stuff is from another tutorial, I apologize. Don't let it distract you please.</p>
  
  <p>When the button is clicked categoryChosen jQuery is called, which calls the action:</p>
  
  <pre><code>    [AcceptVerbs("POST")]
      public ActionResult CategoryChosen(string SelectedCategorieID) {
  
          ViewBag.messageString = SelectedCategorieID;
  
          return PartialView("Information");
  
      }
  </code></pre>
  
  <p>The partial view Information looks like this:</p>
  
  <pre><code>@{
      ViewBag.Title = "Information";
  }
  
  &lt;h2&gt;Information&lt;/h2&gt;
  &lt;h2&gt;You selected: @ViewBag.messageString&lt;/h2&gt;
  </code></pre>
  
  <p>My question is why is Model.SelectCategorieID zero (Model.SelectCategorieID = 0) even after I changed the value in the dropdownlist? What am I doing wrong? Thank you very much in advance for answering. If you need any information or anything in unclear, please let me know.</p>