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元素并将两个下拉列表的值POST到控制器中的操作。该操作需要carId和colorId，并使用它们从数据库中检索记录，然后将结果传递给您的“视图”，您将负责渲染/显示结果。

当然使用这种方法有一些注意事项：

用户从中选择一个值后，整个页面将刷新第二次下降。
您必须使用JavaScript发布表单当用户选择第二个选项时，或者至少启用一个按钮表格可以张贴。
你必须跟踪carId和控制器和视图中的colorId

另一种选择是使用AJAX POST（发送到服务器）carId和colorId控制器中的操作和操作将使用这些参数来查找数据库中的记录，然后返回带有结果的JSON对象。响应将由“成功”处理程序处理，您将在其中处理解析JSON对象并向表中添加行。

因此，如果您觉得在代码的服务器端工作更舒服，请选择第一个选项，但是如果您更喜欢使用AJAX并在前端执行此操作，请使用后者。

根据两个下拉菜单中的值填充并显示html表

1 个答案: