C# 通过ajax向控制器发布的模型为空
我试图通过Ajax向控制器发送2个ID,如下所示,但是模型是空的 我的视图模型非常简单,如下所示:C# 通过ajax向控制器发布的模型为空,c#,asp.net,ajax,model-view-controller,C#,Asp.net,Ajax,Model View Controller,我试图通过Ajax向控制器发送2个ID,如下所示,但是模型是空的 我的视图模型非常简单,如下所示: public class CityAreaBindingModel { public int CityID { get; set; } public int AreaID { get; set; } } 视图:两个下拉列表,有助于选择城市和地区 <select class="form-control" id="CityID" name="CityID">
public class CityAreaBindingModel
{
public int CityID { get; set; }
public int AreaID { get; set; }
}
视图:两个下拉列表,有助于选择城市和地区
<select class="form-control" id="CityID" name="CityID">
@{
foreach (var city in ViewData["Cities"] as List<SamsungTools.Models.City>)
{
<option value="@city.ID" @(city.ID == 1 ? "selected" : "")>@city.Title</option>
}
}
</select>
<select class="form-control" id="AreaID" name="AreaID">
@{
foreach (var area in ViewData["Areas"] as List<SamsungTools.Models.Area>)
{
<option value="@area.ID" @(area.ID == 1 ? "selected" : "")>@area.Title</option>
}
}
</select>
在控制器中,从ajax传递视图模型:
[HttpPost]
public JsonResult GetSaleCentersByLocation(CityAreaBindingModel model)
{
GeneralStore gs = new GeneralStore();
var saleCentersByCity = gs.GetSaleCentersByCity(model.CityID);
var result = new JsonResult();
result.Data = saleCentersByCity;
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return result;
}
问题是该模型在控制器中根本为空。我在Ajax中更改了头的字段,但以任何其他方式,我都会得到错误415、非法调用、服务器错误500。。。
使用上述Ajax选项,数据将发送到控制器,但模型为空
有什么解决方案吗?您的代码有一些问题:不正确的ajax调用格式,没有对数据进行字符串化,可能是您的url路由不正确。 以下是您的需求代码。我模拟了一些函数
public class CityAreaBindingModel
{
public int CityID { get; set; }
public int AreaID { get; set; }
}
public class City
{
public int ID { get; set; }
public string Title { get; set; }
}
public class Area
{
public int ID { get; set; }
public string Title { get; set; }
}
public class SaleController : Controller
{
public ActionResult GetSaleCentersByLocation()
{
ViewData["Cities"] = new List<City>
{
new City {ID = 1, Title = "Hanoi"},
new City {ID = 2, Title = "SaiGon"}
};
ViewData["Areas"] = new List<Area>
{
new Area {ID = 1, Title = "Area1"},
new Area {ID = 2, Title = "Area2"}
};
return View();
}
[HttpPost]
public JsonResult GetSaleCentersByLocation(CityAreaBindingModel model)
{
GeneralStore gs = new GeneralStore();
var saleCentersByCity = gs.GetSaleCentersByCity(model.CityID);
var result = new JsonResult();
result.Data = saleCentersByCity;
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return result;
}
}
public class GeneralStore
{
public object GetSaleCentersByCity(int modelCityId)
{
return new { Id = 1, Name = "Test"};
}
}
控制器GetSaleCentersByLocation.cshtml的视图
@using WebApplication1.Controllers
<select class="form-control" id="CityID" name="CityID">
@{
foreach (var city in ViewData["Cities"] as List<City>)
{
<option value="@city.ID" @(city.ID == 1 ? "selected" : "")>@city.Title</option>
}
}
</select>
<select class="form-control" id="AreaID" name="AreaID">
@{
foreach (var area in ViewData["Areas"] as List<Area>)
{
<option value="@area.ID" @(area.ID == 1 ? "selected" : "")>@area.Title</option>
}
}
</select>
<button onclick="test();">Post data</button>
<script>
function test() {
var cId = $('#CityID').val();
var aId = $('#AreaID').val();
var data = {
CityID: cId,
AreaID : aId
};
$.ajax({
type: 'POST',
contentType: "application/json",
dataType: 'JSON',
url: 'GetSaleCentersByLocation',
data: JSON.stringify(data),
processData: false,
success: function (result) {
alert(data);
}
});
}
</script>
我认为问题在于js代码中的数据结构,请尝试以下代码:
var cId = $('#CityID').val();
var aId = $('#AreaID').val();
var jsonObject = {"CityID": cId , "AreaID": aId };
var data = JSON.stringify(jsonObject);
$.ajax({
'Content-Type': 'application/json'
type: 'POST',
url: '/api/GetData/GetSaleCentersByLocation',
contentType: "application/json",
data: data
success: function (result) {
console.log(result);
}
});
var cId = $('#CityID').val();
var aId = $('#AreaID').val();
var jsonObject = {"CityID": cId , "AreaID": aId };
var data = JSON.stringify(jsonObject);
$.ajax({
'Content-Type': 'application/json'
type: 'POST',
url: '/api/GetData/GetSaleCentersByLocation',
contentType: "application/json",
data: data
success: function (result) {
console.log(result);
}
});