根據兩個下拉菜單中的值填充並顯示html表

Question

我有兩個由JQuery和Ajax對象控制的級聯下拉框。 第一個確定第二個中的值。 然后，一旦在第二個中進行選擇，則兩個下拉列表中的值將用於在SQL表中查找記錄並在html表中顯示該記錄。

到目前為止，下拉列表可以正常工作，但是我很難從數據庫中獲取記錄，然后將其顯示在屏幕上。 我之前通過獲取數據庫值，將它們發送到Json對象中的視圖以及使用Ajax對象通過Jquery創建表來做到這一點。 但是，在這種情況下，我不介意頁面是否重新加載，並且希望使用更簡單的方法。

有什么簡單的方法可以將兩個下拉列表中的兩個值發送到控制器，使用這些值在sql表中查找記錄，然后將這些值從記錄發送回要顯示的視圖？ 另外，在第二個下拉框做出選擇之前，我不希望顯示任何內容。

這是我到目前為止的內容：

控制器方法：

List<Car> GetCars()
{
    using (var service = new Service())
    {
        return service.GetCars().OrderBy(x => x.CarName).Select(x => new Car
        {
            CarId = x.CarId,
            CarName = x.CarName
        }).ToList();
    }
}

List<Color> GetColors(int carId)
{
    using (var service = new Services())
    {
        return service.GetColors(carId).OrderBy(x => x.ColorName).Select(x => new Color
        {
            ColorId = x.ColorId,
            ColorName = x.ColorName
        }).ToList();
    }
}

[HttpPost]
public ActionResult CurrentSaus(int townCode, int fiscalYear)
{
    var colors = GetColors(carId);

    return Json(new SelectList(colors, "ColorId", "ColorName"));
}

jQuery方法：

$(document).ready(function () {
    $("#Car_CarId").change(function () {
        var carId = $(this).val();
        var carName = $(":selected", this).text();            

        // put the car name into a hidden field to be sent to the controller
        document.getElementById("Car_CarName").value = carName;

        getColors(carId);
    })
});

function getColors(carId) {
    if (carCode == "") {                     
        $("#Color_ColorId").empty().append('<option value="">-- select color --</option>');
    }
    else {
        $.ajax({
            url: "@Url.Action("Colors", "HotWheels")",
            data: { colorId: clrId },
        dataType: "json",
        type: "POST",
        error: function () {
            alert("An error occurred");
        },
        success: function (data) {
            var colors = "";
            var numberOfColors = data.length;
            if (numberOfColors > 1) {                    
                colors += '<option value="">-- select color --</option>';
            }
            else {
                var colorId = data[0].Value;
                var colorName = data[0].Text;
                document.getElementById("Color_ColorName").value = colorName;
            }

            $.each(data, function (i, color) {
                colors += '<option value="' + color.Value + '">' + color.Text + '</option>';
            });

            $("#Color_ColorId").empty().append(colors);
        }
    });
}

和一些HTML：

    @Html.HiddenFor(x => x.Car.CarName)
    @Html.HiddenFor(x => x.Color.ColorName)
    <table>
        <tr>
            <td> Select Car:</td>
            <td style="text-align:left">
                @Html.DropDownListFor(
                            x => x.Car.CarId,
                            new SelectList(Model.CarList, "CarId", "CarName"),
                            "-- select town --")
                <br />
                @Html.ValidationMessageFor(x => x.Car.CarId)
            </td>
        </tr>
        <tr>
            <td> Select Color:</td>
            <td colspan="4">
                @Html.DropDownListFor(
                            x => x.Color.ColorId,
                            new SelectList(Model.ColorList, "ColorId", "ColorName"),
                            "-- select color --")
                <br />
                @Html.ValidationMessageFor(x => x.Color.ColorId)
            </td>
        </tr>
    </table>
}

Answer 1

最簡單的方法是使用老式的FORM元素，然后將兩個下拉菜單的值發布到控制器中的某個動作上。 該操作將需要一個carId和一個colorId，並使用它們從數據庫中檢索記錄，然后將結果傳遞給您的“視圖”，在其中您將負責渲染/顯示結果。

當然使用此方法有一些警告：

• 用戶從第二個下拉菜單中選擇一個值后，整個頁面將刷新。
• 當用戶選擇第二個選項時，您將必須使用JavaScript來發布表單，或者至少啟用一個按鈕才能發布表單。
• 您將必須在控制器中跟蹤carId和colorId並查看

另一個選擇是使用AJAX POST（發送到服務器）carId和colorId，其中控制器中的和動作將使用這些參數在數據庫中查找記錄，然后返回帶有結果的JSON對象。 響應將由“成功”處理程序處理，在該處理程序中，您將小心解析JSON對象並將行添加到表中。

因此，如果您更喜歡在代碼的服務器端工作，請選擇第一個選項，但是，如果您更喜歡使用AJAX並在前端進行此操作，請使用后一個選項。