CODEWITHSUNDEEP
c#jqueryasp.net-mvc
Smiley Rod
Smiley Rod

Reputation: 53

How can I display specific items on a table based on dropdownlistfor selection in MVC?

I am trying to display a table with all the cars that include the specifications selected on the dropdowns once a submit button is clicked. I am currently able to display a table from a partial view when I click the button but I am filtering my results and I am not sure how to do it.

This is my view

@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>

This is my partial View 

@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>

This is my controller

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);
 }

Please Help! Thank you in advance!

Upvotes: 0

Views: 39

Answers (1)

Enrique Olvera
Enrique Olvera

Reputation: 134

Well since you are making a GET request you can add more parameters to your 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);
}

But make sure to send your http request with the querystring key names are same as the parameter name expected in your backend, something like:

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

Upvotes: 1

Related Questions