根据两个下拉菜单中的值填充和显示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

的最简单的方法是使用o ld时尚FORM元素并将两个下拉列表的值发布到控制器中的一个动作。该操作会期望carId和colorId，并使用它们从数据库中检索记录，然后将结果传递给“视图”，以便在其中处理渲染/显示结果。

使用这种方法当然有一些需要注意：用户选择来自 第二下拉的值后

• 整个页面将刷新。
• 如果用户选择第二个选项，或者至少启用一个按钮，表单可以POST，则必须使用JavaScript 发布表单。
• 你将不得不跟踪carId和 colorId在你的控制器和视图

另一种方法是使用AJAX POST（发送到服务器）的carId和colorId地方和行动控制器将负责使用这些参数在数据库中查找记录，然后返回带有结果的JSON对象。响应将由'成功'处理程序处理，您将小心解析JSON对象并将行添加到表中。

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