使用Razor下拉串列中的引數呼叫MVC控制器函式

從下拉串列中選擇某些內容時，我想在適當的 Razor 視圖中從 MVC 控制器類呼叫具有 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;
        }

這是來自Controller類的方法，其中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>

uj5u.com熱心網友回復：

您可以嘗試使用 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);
        }

uj5u.com熱心網友回復：

此源可能不起作用的原因之一是選擇標記需要您從 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>

標籤：C＃ asp.net-mvc asp.net 核心 剃刀

上一篇：在這個For回圈計數沒有增加

下一篇：RazorPages：內部帶有區域視圖的頁面。如何存盤部分視圖的資料？