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

You can try to use ajax to get new CurrentCarColorImage from action,here is a demo:

view:

@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()" asp-for="@Model.CarImg.ColorId" class="form-control" asp-items="@Model.Colors">
            <option value="">Please select a color</option>
        </select>
    </div>
</div>

js:

@section Scripts{ 
    <script>
        function GetCarImageBasedOnColor() {
            $.ajax({
                type: "GET",
                url: "GetCarImageBasedOnColor",
                data: { carId: @Model.car.Id, colorId: $("#colorDropdown").val() },
                success: function (data) {
                    var newSrc = $("#carImage").attr("src").split("Images")[0] + "Images/" + data;
                    $("#carImage").attr("src", newSrc);
                }

            });
        }
    </script>
} 

action:

public JsonResult 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();
            return new JsonResult(image.Image);
        }