根據兩個下拉菜單中的值填充和顯示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，並在前端使用後者。