Calling a MVC controller function with parameters in a Razor dropdown

Question

I want to call a function with 2 int parameters from an MVC Controller class in it's appropriate Razor view, when selecting something from a dropdown. Basically the dropdown selects the Id of a color(colorId), and the Razor view alreadt knows the Id of a car(carId). These are the variables I need as a parameter.

public void GetCarImageBasedOnColor(int carId, int colorId)
        {
            CarImage image = (from c in _context.CarImage
                              where c.CarId == carId && c.ColorId == colorId
                              select new CarImage
                              {
                                  Image = c.Image
                              }).FirstOrDefault();
            configCar.CurrentCarColorImage = image.Image;
        }

This is the method from the Controller class, where confogCar is declared globally, and it is the Model on which the Controller and the View are based on. What I am looking for is calling this method so that the property CurrentCarColorImage can be changed based on the 2 Id's.

This is the Razor view code.

@if (Model.car.Image != null)
{
    <div class="mt-4">
        <center><img src="@("~/Images/"[email protected])" id="carImage" asp-append-version="true" style="padding-top:50px; padding-bottom:40px; width:65%; height:65%" /></center>
    </div>
}

<div class="row">
    <div class="col-md-4">
        <label asp-for="@Model.CarImg.ColorId" class="control-label">Color</label>
        <select id="colorDropdown" onchange="GetCarImageBasedOnColor(@Model.car.Id, @Model.CarImg.ColorId)" asp-for="@Model.CarImg.ColorId" class="form-control" asp-items="@Model.Colors">
            <option value="">Please select a color</option>
        </select>
    </div>
</div>

Answer 1

One of the reasons this source might not work is that the select tag requires a list of data that you used from FirstOrDefault.

What I did is as follows :

First, create a method in your service like this to get a car image based on color :

 public List<SelectListItem> GetCarImageBasedOnColor(int carId, int colorId)
    {
        return _context.CarImage.Where(c=>c.CarId == carId && c.ColorId == colorId).Select(g => new CarImage()
        {
            Text = g.Image,
            Value = g.id.ToString()
        }).ToList();
    }

In Razor source :

public void OnGet(int carId , int colorId)
    {
        var groups= GetCarImageBasedOnColor(carId ,colorId);
        ViewData["Groups"] = new SelectList(groups, "Value", "Text");
    }

Now in html :

<div class="row">
<div class="col-md-4">
    <label asp-for="@Model.CarImg.ColorId" class="control-label">Color</label>
    <select asp-for="@Model.CarImg.ColorId" asp-items="@(ViewData["Groups"] as SelectList)">
        <option value="">Please select a color</option>
    </select>
</div>