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

【问题标题】：cascading dropdowns are not working in asp.net mvc4(razor)级联下拉菜单在 asp.net mvc4(razor) 中不起作用
【发布时间】：2013-10-11 04:36:52
【问题描述】：

我采用实体模型。我需要根据第一个下拉列表绑定第二个下拉列表。我可以将第一个下拉选择的值传递给控制器操作，但我无法在第二个下拉列表中显示值。这是我的观点代码，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();

    }
}

【问题讨论】：

你有调用 ajax 吗？如果是，那么什么是成功的？你用console.log(data)检查过吗？
我们试图让警报保持成功但它没有触发（我的意思是它不会成功方法）。在浏览器控制台中，我收到此错误“POST localhost:15229/COGP/GetProductFamily 500 (Internal Server Error)”。

标签： jquery asp.net-mvc-4 razor razor-2

【解决方案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

【讨论】：