Asp.Net MVC 从 Dropdownlist 获取值到 PartialView

Question

在我的主页中，我有汽车下拉列表。而且效果很好。
当我 select 来自 Dropdownlist 的一辆车时，我想在同一视图中从 Dropdownlist 取回属于 selected Car 的所有车型，比如说在 Dropdownlist 下。在同一视图（在主视图中）中包含 selected 汽车的汽车和模型的 DropDownlist。我尝试使用 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>

在下拉列表下方，我想获取 selected 汽车的所有车型但我想我必须用 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

如果您想在同一页面上查看结果，则需要使用 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);
        });
   }
});

Answer 2

正如 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 调用的结果执行任何操作

Asp.Net MVC 从 Dropdownlist 获取值到 PartialView

Asp.Net MVC Get value from Dropdownlist to PartialView

c#

asp.net-mvc

html.dropdownlistfor