jquery - 级联下拉菜单在 asp.net mvc4(razor) 中不起作用

Question

我已经采用实体模型。我需要根据第一个下拉列表绑定第二个下拉列表。我可以将第一个下拉选择的值传递给控制器​​操作，但我无法在第二个下拉列表中显示值。这是我的视图代码，COGPHome .cshtml

<script type="text/javascript">
$(document).ready(function () {
    $('#productDetails').change(function () {
        //var productId = document.getElementById('ProductDetails');
        var productId = $(this).val();
        var prod = { ProductId: productId };
        $.ajax({
            url: '/COGP/GetProductFamily',
            type: 'POST',
            data: prod,
            success: function (data) {                   

            }
        });
    });
})

<h2>@ViewBag.Title</h2>
<div id="dvfilter">
<table align="center">
    <tr>
        <td>
            @Html.Label("Product:")
        </td>
        <td>
            @Html.DropDownList("productDetails", "---select---")
        </td>
        <td>
            @Html.Label("ProductFamily:")
        </td>
        <td>               
            @Html.DropDownList("productFamily", "---select---")                
        </td>
    </tr>
</table>

这是控制器代码

public class COGPController : Controller
{
    COGPEntities objEnt = new COGPEntities();
    public ActionResult COGPHome()
    {
        List<refProduct> objListproducts = new List<refProduct>();
        objListproducts = (from c in objEnt.refProducts select c).ToList();

        ViewData["productDetails"] = new SelectList(objListproducts, "ProductId", "Product");
        ViewData["productFamily"] = new SelectList(string.Empty);

        return View();
    }

    public ActionResult GetProductFamily(int productId)
    {   
        List<refProductFamily> objListfamily = new List<refProductFamily>();
        objListfamily = (from f in objEnt.refProductFamilies select f).ToList();            
        ViewData["productFamily"] = new SelectList(objListfamily, "ProductFamilyId", "ProductFamily");            
        return View();

    }
}

Answer 1

尝试这个： Script

 <script type="text/javascript">
     $(document).ready(function () {
     $("#ProductName").change(function () {
     firstDDLValue = $("#ProductName").val();
      $.post("@Url.Action("ItemList", "Admin")", {fstValue: firstDDLValue }, function (result) {
       var select = $("#ItemId");
        select.empty();
        select.append($('<option/>', {value: '0', text: '--Select--' }));
        $.each(result, function (index, Data) {
       select.append($('<option/>', {
       value: Data.Value,
        text: Data.Text
          }));
         });
        });
       });
     });
     </script>

控制器

 public JsonResult ItemList(string fstValue)
{
 PurchaseStock PS = new PurchaseStock();
  int ProductId = 0;
  if (fstValue != "")
  ProductId = Convert.ToInt32(fstValue);
  var result = PS.GetItemForDrop(Convert.ToInt32(ProductId));
  IList<SelectListItem> Data = new List<SelectListItem>();
  for (int i = 0; i < result.Count; i++)
   {
    Data.Add(new SelectListItem()
    {
      Text = result[i].Text,
      Value = result[i].Value,
    });
  }
 return Json(Data, JsonRequestBehavior.AllowGet);
}

在视图中：

<select id="ProductName" name="ProductName" class="dropdownlist"> </select>//First Dropdown list
<select id="ItemId" name="ItemId" class="dropdownlist">//SecondDropdown