在 Razor 下拉列表中使用参数调用 MVC 控制器函数

Question

我想在适当的 Razor 视图中从 MVC 控制器 class 调用一个带有 2 个 int 参数的函数，当从下拉列表中选择某些内容时。基本上，下拉菜单选择颜色的 ID (colorId)，而 Razor 视图已经知道汽车的 ID (carId)。这些是我需要作为参数的变量。

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

这是来自Controllerclass的方法，这里全局声明了confogCar，是Controller和View所基于的Model。我正在寻找的是调用此方法，以便可以根据 2 个 ID 更改属性 CurrentCarColorImage。

这是 Razor 视图代码。


@if (Model.car.Image != null)
{
    <div class="mt-4">
        <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 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

您可以尝试使用 ajax 从动作中获取新的 CurrentCarColorImage，这里有一个演示：

查看：

@if (Model.car.Image != null)
{
    <div class="mt-4">
        <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 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>
}

操作：

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

Answer 2

此来源可能不起作用的原因之一是 select 标记需要您从 FirstOrDefault 使用的数据列表。

我做的是这样的:

首先，在您的服务中创建一个这样的方法来获取基于颜色的汽车图像：

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

在 Razor 源代码中：

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

现在 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>

在 Razor 下拉列表中使用参数调用 MVC 控制器函数

Calling a MVC controller function with parameters in a Razor dropdown

c#

asp.net-mvc

razor

asp.net-core