Как я могу отобразить определенные c элементов в таблице на основе раскрывающегося списка для выбора в MVC?

Question

Я пытаюсь отобразить таблицу со всеми автомобилями, в которых указаны технические характеристики, выбранные в раскрывающихся списках после нажатия кнопки «Отправить». В настоящее время я могу отображать таблицу частично, когда нажимаю кнопку, но я фильтрую свои результаты и не уверен, как это сделать.

Это мой взгляд

@model IgnitionHub2._0.Models.Car
@{
    ViewBag.Title = "Car Search Page";
}

<h2>Cars</h2>
<div class="center-div">
    <div class="form-inline" , id="ddlCars">
        @Html.DropDownListFor(model => model.CarID, new SelectList(Model.CarList, "CarID", "Model.Name"), "Select Car", new { @class = "form-control" })
        @Html.DropDownListFor(model => model.Model.MakeID, new SelectList(Model.MakeList, "MakeID", "Name"), "Select Make", new { @class = "form-control" })
        @Html.DropDownListFor(model => model.ModelID, new SelectList(Model.ModelList, "ModelID", "Name"), "Select Model", new { @class = "form-control" })
        <button id="search">Search</button>
    </div>
</div>
<div id="searchResults">

</div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>


<script>
    var url = '@Url.Action("DisplaySearchResults", "Car")';
$('#search').click(function() {
  var modelID = $('#CarID').val();
  $('#searchResults').load(url, { searchText: modelID });
})
</script>

Это мой частичный взгляд

@model IEnumerable<IgnitionHub2._0.Models.Car>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Year)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Color)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Mileage)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.BodyType)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Drive)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Available)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CarLot.LotName)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Year)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Color)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Mileage)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.BodyType)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Drive)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Available)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Model.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CarLot.LotName)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.CarID }) |
            @Html.ActionLink("Details", "Details", new { id=item.CarID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.CarID })
        </td>
    </tr>
}

</table>

Это мой контроллер

public ActionResult Index()
{

    var cars = db.Cars.Include(c => c.Model).Include(c => c.CarLot);
    var makeList = db.Makes.ToList();
    var modelList = db.Models.ToList();
    var ViewModel = new Car
    {
    CarList = cars,
    MakeList = makeList,
    ModelList= modelList
    };

    return View(ViewModel);
}

public ActionResult _Index()
{
    var cars = new List<Car>(); 
    return PartialView(cars);
}
public ActionResult DisplaySearchResults(string searchText)
{
    var model = db.Cars.Include(c => c.Model.Make).ToList();// build list based on parameter searchText
    return PartialView("_Index", model);
 }

Пожалуйста, помогите! Заранее спасибо!

Answer 1

Хорошо, так как вы делаете запрос GET, вы можете добавить больше параметров к вашему DisplaySearchResults.

public ActionResult DisplaySearchResults(string CarID, string MakeID, string ModelID)
{
  var model = db.Cars.Where(c => c.Model.Make == MakeID && c.Model == ModelID && 
   c.CarID == CarID).ToList();

  return PartialView("_Index", model);
}

Но убедитесь, что ваш http-запрос с именами ключей строки запроса совпадает с именем параметра, ожидаемым в ваш бэкэнд, что-то вроде:

var modelID = $('#CarID').val();
var makeID = $('#CarID').val();
var modelID = $('#CarID').val();
$('#searchResults').load(url, { CarID: carID, MakeID: makeID, ModelID: modelID });