Asp.Net MVC從Dropdownlist獲取價值到PartialView

Question

在我的主頁面中，我有汽車下拉列表。 它工作正常。
當我從Dropdownlist中選擇一輛車時，我想在同一視圖中從Dropdownlist中取回屬於所選車輛的所有車型，請在Dropdownlist下面說。 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>

在下面的Dropdownlist中我想獲得所有車型的所有汽車模型但是我認為我必須用Id或span創建<div> </div>但我不知道該怎么做。

這是javascript我試圖使用

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

如何在Dropdownlist視圖下面獲取此操作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調用的結果執行任何操作