无法通过选择价值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时产生它。