Asp.Net MVC 从 Dropdownlist 获取值到 PartialView

Question

在我的主页中，我有汽车的下拉列表。而且效果很好。
当我从下拉列表中选择一辆车时，我想在同一视图中从下拉列表中取回属于所选汽车的所有车型，比如说在下拉列表下。在同一视图中（在主视图中）包含所选汽车的汽车和型号的下拉列表。我尝试使用 PartialView，但在 PartielView 和 html 代码方面我不是很好 这是我获取CarModels的动作，我认为这一定是PartialView

[HttpGet]
public ActionResult GetCarModel(int? carId)
{
    List<CarModelVW> listOfCarModel;

    using (Db db = new Db())
    {
        listOfCarModel = db.CarModel.ToArray()
                        .Where(x => carId == null || carId == 0 || x.carId == carId)
                        .Select(x => new CarModelVW(x))
                        .ToList();

    }
    return View(listOfCarModel);
}

在我的主视图中使用 DropDownlist

<div class="form-group">
    <label class="control-label col-md-2" for="HasSidebar"> Car </label>
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.CarId, Model.Cars, "---Select car---", new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.CarId, "", new { @class = "text-danger" })
    </div>
</div>

在下拉列表下方，我想获取所选汽车的所有车型 但我想我必须用 Id 或 span 创建<div> </div> .. 但我不知道该怎么做。

这是我正在尝试使用的 javascript

$("#CarId").change(function () {        
    var carId = $(this).val();
    if (carId) {
        window.location = "/an/GetCarModel?carId=" + carId;
    }
    return false; 
});

如何在下拉列表视图下方获取此操作 GetCarModel？提前谢谢你。

Answer 1

就像 Roman 说的，你应该向控件发送一个 ajax 调用，而不是导航到 url。

首先，在下拉列表中添加一个 id。

其次，在 Onchange 函数中添加一个 ajax 调用来获取汽车：

var dropdownval = $("#//Id of dropdown").val();
var json = '{Id: ' + dropdownval + '}';

$.ajax({
    url:'@Url.Action("GetCarModel", "//The controller")',
    type:'POST',
    data: json,
    contentType:'Application/json',
    success:function(result){
        //Do whatever
    }
})

然后，您可以对传递回 ajax 调用的结果执行任何操作

Answer 2

如果您想在同一页面上查看结果，则需要使用 Ajax。

在你想显示结果的主视图中添加这个 div 标签：

<div id="carmodels"></div>

如下改变你的jquery函数：

$("#CarId").change(function () {
  var carId = $(this).val();
  if (carId) 
    {
        $.get("/an/GetCarModel?carId=" + carId, function(data){
        $("#carmodels").html(data);
        });
   }
});