Calling a MVC controller function with parameters in a Razor dropdown-CodePudding

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 >
        <center><img src="@("~/Images/" @Model.CurrentCarColorImage)" id="carImage" asp-append-version="true" style="padding-top:50px; padding-bottom:40px; width:65%; height:65%" /></center>
    </div>
}

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

CodePudding user response：

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

view:

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

<div >
    <div >
        <label asp-for="@Model.CarImg.ColorId" >Color</label>
        <select id="colorDropdown" onchange="GetCarImageBasedOnColor()" asp-for="@Model.CarImg.ColorId"  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);
        }

CodePudding user response：

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 >
<div >
    <label asp-for="@Model.CarImg.ColorId" >Color</label>
    <select asp-for="@Model.CarImg.ColorId" asp-items="@(ViewData["Groups"] as SelectList)">
        <option value="">Please select a color</option>
    </select>
</div>