如何简单的ID（jQuery的AJAX）发布到行动方法asp.net的MVC

Question

我有我写的打击代码的分类下拉列表，在它的onchange事件：

function onChange() { 
$.ajax(
{ 
url: '/Home/GetProducts/', 
type: 'POST', 
data: JSON.stringify({ID:$("#Category").val()}), 
//contentType:"application/json; charset=utf-8", 
dataType: "json", 
success: function (data){ 
var jsonres = ""; 
$.each(data, function (i, variant) { 
jsonres += '<option value="' + variant.ID + '">' + variant.Name+ '</option>'; 
}); 
$("#product").html(jsonres); 
} 
, error: function() { alert('Error'); } 
}); 
} 

和我的行动方法是：

[HttpPost] 
public ActionResult GetProducts(int? ID) 
{ 
     var res = _teacherUow.GetProducts(ID.GetValueOrDefault()).Select(x => new { x.ID, x.Name }).ToList(); 
     return Json(new { Result = true, data = res }, JsonRequestBehavior.AllowGet); 
} 

我的视图代码：

@Html.DropDownList("Category", new SelectList(ViewBag.Category, "ID", "Name"), new { id = "Category", onchange = "onChange()" }) 
     <select data-val="true" id="product" name="product"> 
     </select> 

现在我有三个问题

1中的操作方法参数接收空

JSON结果是：

{"Result":true,"data":[{"ID":1,"Name":"xxx"},{"ID":3,"Name":"yyyy"}]} 

2-但价值和产品的文本下拉是“未定义”

列表成员 3-使用html helper为产品字段创建空的下拉列表（用于通过Ajax请求填充数据成员） 任何人都可以请帮助我吗？

Answer 1

问题1：变化

data: JSON.stringify({ID:$("#Category").val()}), 

到

data: { ID: $("#Category").val()}, 

问题2：您正在返回包含2个属性Result和data一个对象，以便在成功回调应该是

$.each(data.data, function (i, variant) { 

但是，您不使用Result财产，它似乎毫无意义无论如何，所以你可以只使用

[HttpGet] // Change this (its a get not a post!) 
public ActionResult GetProducts(int? ID) // assume this was a typo 
{ 
    var res = _teacherUow.GetProducts(ID.GetValueOrDefault()).Select(x => new { x.ID, x.Name }); // no need to call ToList() 
    return Json(res, JsonRequestBehavior.AllowGet); 
} 

，并在脚本中使用你原来的代码只是改变type: 'POST',到type: 'GET',

问题3：创建一个绑定到财产Project使用一个空的下拉

@Html.DropDownFor(m => m.Project, new SelectList(IEnumerable.Empty<T>)) 

或分配IEnumerable.Empty<T>到视图袋财产

注意我建议对您的脚本进行以下更改

$('#Category').change(function() { // remove the `onChange` attribute in the helper 
    $('#Project').empty(); // ensure any existing options removed 
    $.getJSON('@Url.Action("GetProducts", "Home")', { ID: $(this).val() }, function (data) { 
    $.each(data, function(index, item) { 
     var option = $('<option></option>').val(item.ID).text(item.Name); 
     $('#Project').append(option); 
    }); 
    }); 
});