無法通過選擇價值DropDownListFor到JavaScript函數

Question

我simpel測試型號：

public class MovieModel { 

    public string SelectedCategorieID { get; set; } 

    public List<CategorieModel> Categories { get; set; } 

    public MovieModel() { 
     this.SelectedCategorieID = "0"; 
     this.Categories = new List<CategorieModel>() {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; } 
} 

我家的控制器操作指數：

public ActionResult Index() { 

     Models.MovieModel mm = new Models.MovieModel(); 

     return View(mm); 
    } 

我的強類型查看：

@model MvcDropDownList.Models.MovieModel 
@{ 
    ViewBag.Title = "Home Page"; 
} 
<script type="text/javascript"> 
    function categoryChosen(selectedCatID) { 
//  debugger; 
     var url = "Home/CategoryChosen?SelectedCategorieID=" + selectedCatID; 
     $.post(url, function (data) { 
      $("#minicart").html(data); 
     }); 
    } 
</script> 

@using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) { 

    <fieldset> 
     Movie Type 
     @Html.DropDownListFor(m => m.SelectedCategorieID, new SelectList(Model.Categories, "ID", "Name", Model.SelectedCategorieID), "---Select categorie---") 
     <p> 
      <input type="submit" value="Submit" /> 
     </p> 
    </fieldset> 

} 
<input type="button" value="Minicart test" onclick="categoryChosen('@Model.SelectedCategorieID');" /> 
<div id="minicart"> 
    @Html.Partial("Information") 
</div> 

請忽略第一個輸入，因爲我正在使用第二個輸入'Minicart測試'（HTML.Beginform在那裏稍後學習別的東西）。迷你車的東西來自另一個教程，我很抱歉。不要讓它讓你分心。

當按鈕被點擊categoryChosen jQuery是調用，它調用的動作：

[AcceptVerbs("POST")] 
    public ActionResult CategoryChosen(string SelectedCategorieID) { 

     ViewBag.messageString = SelectedCategorieID; 

     return PartialView("Information"); 

    } 

局部視圖的信息是這樣的：

@{ 
    ViewBag.Title = "Information"; 
} 

<h2>Information</h2> 
<h2>You selected: @ViewBag.messageString</h2> 

我的問題是，爲什麼是Model.SelectCategorieID爲零（Model.SelectCategorieID = 0），即使我更改了下拉列表中的值？我究竟做錯了什麼？非常感謝您提前回答。如果您需要任何信息或任何不清楚的地方，請告訴我。

Answer 1

我的問題是，爲什麼是Model.SelectCategorieID零 （Model.SelectCategorieID = 0），即使我改變了 下拉列表的價值？

那是因爲你已經在你的onclick處理硬編碼該值：

onclick="categoryChosen('@Model.SelectedCategorieID');" 

如果你想這樣做正確，你應該閱讀從下拉列表中選擇值：

onclick="categoryChosen(this);" 

和然後修改您的類別選擇功能：

<script type="text/javascript"> 
    function categoryChosen(ddl) { 
     // debugger; 
     var url = 'Home/CategoryChosen'; 
     $.post(url, { selectedCategorieID: $(ddl).val() }, function (data) { 
      $('#minicart').html(data); 
     }); 
    } 
</script> 

另外，我會建議你使用URL助手來生成要調用的url，而不是在你的javascript函數中對其進行硬編碼。最後但並非最不重要的，我會建議你不要這麼做，這樣你就可以把它放在一個單獨的JavaScript文件中，並停止混合標記和腳本。

因此，這裏是你的代碼看起來怎麼樣考慮到我的言論後：

@model MvcDropDownList.Models.MovieModel 
@{ 
    ViewBag.Title = "Home Page"; 
} 

@using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) 
{ 
    <fieldset> 
     Movie Type 
     @Html.DropDownListFor(
      m => m.SelectedCategorieID, 
      new SelectList(Model.Categories, "ID", "Name"), 
      "---Select categorie---", 
      new { 
       id = "categoryDdl" 
       data_url = Url.Action("CategoryChoosen", "Home") 
      } 
     ) 
     <p> 
      <input type="submit" value="Submit" /> 
     </p> 
    </fieldset> 

} 

<input type="button" value="Minicart test" id="minicart-button" /> 

<div id="minicart"> 
    @Html.Partial("Information") 
</div> 

，然後在單獨的JavaScript文件悄悄訂閱您的按鈕單擊處理和發送AJAX請求：

$(function() { 
    $('#minicart-button').click(function() { 
     // debugger; 
     var $categoryDdl = $('#categoryDdl'); 
     var selectedCategorieID = $categoryDdl.val(); 
     var url = $categoryDdl.data('url'); 
     $.post(url, { selectedCategorieID: selectedCategorieID }, function (data) { 
      $('#minicart').html(data); 
     }); 
    }); 
}); 

Answer 2

爲您的下拉列表提供ID：

@Html.DropDownListFor(m => m.SelectedCategorieID, new SelectList(Model.Categories, "ID", 
    "Name", Model.SelectedCategorieID), new {id = "myDropDownList"}) 

而JavaScript功能如下：

<script type="text/javascript"> 
    function categoryChosen() { 
    var cat = $("#myDropDownList").val(); 

    var url = "Home/CategoryChosen?SelectedCategorieID=" + cat; 
    $.post(url, function (data) { 
     $("#minicart").html(data); 
    }); 
    } 
</script> 

爲什麼你的代碼沒有工作？

onclick="categoryChosen('@Model.SelectedCategorieID') 

作爲

onclick="categoryChosen('0') 

產生由於SelectedCategorieID的值是0時產生它。