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

我有两个由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>
}