JSON 未在 MVC 4 上触发事件

本文关键字：事件 未在 MVC JSON | 更新日期: 2023-09-27 18:34:15

我需要使用 JSON 在 2 下拉列表中进行级联，在我应用代码后，JSON 应该在我选择类别下拉列表后在子类别下拉列表中查询我的数据。但什么也没发生。

我在代码中做错了什么吗？

控制器： 

public ActionResult Create()
{     
   ViewBag.Category = ads.Categories.ToList();
   ViewBag.SubCategory = ads.SubCategories.ToList();    
   return View();
}
private IList<SubCategory> GetSubCategory(int id_category)
{            
   return ads.SubCategories.Where(m => m.id_category == id_category).ToList();
}
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadSubcategoryByCategory(string id_category)
{
   var SubCategoryList = this.GetSubCategory(Convert.ToInt32(id_category));
   var SubCategoryData = SubCategoryList.Select(m => new SelectListItem()
       {
           Text = m.name.ToString(),
           Value = m.id.ToString()
       });
   return Json(SubCategoryData, JsonRequestBehavior.AllowGet);
}

视图：

<script type="text/javascript">
    $(document).ready(function () {
        $("#ddlCategory").change(function () {
            var category_id = $(this).val();
            $.getJSON("../Ads/LoadSubcategoryByCategory", { id_category: category_id },
                    function (SubCategoryData) {
                        var select = $("#ddlSubCategory");
                        select.empty();
                        select.append($('<option/>', {
                            value: 0,
                            text: "-Select a SubCategory-"
                        }));
                        $.each(SubCategoryData, function (index, itemData) {
                              alert(SubCategoryData);
                            select.append($('<option/>', {
                                value: itemData.Value,
                                text: itemData.Text
                            }));
                        });
                    });
         });
</script>
        <div class="editor-label">
            Category :
        </div>
        <div class="drop-down"> 
         @Html.DropDownListFor(Model => Model.id_category, new SelectList(ViewBag.Category as System.Collections.IEnumerable, "id", "name"),
            "-Choose Category-", new { id = "ddlCategory" })     
        </div>
        <div class="editor-label">
            Subcategory :  
        </div>
        <div class="drop-down"> 
            @Html.DropDownListFor(Model => Model.id_subcategory, new SelectList(Enumerable.Empty<SelectListItem>(), "id", "name"),
         "-Choose SubCategory-", new { id = "ddlSubCategory" })   
        </div>

希望有人可以帮助我。

更新

在我的控制台中，火狐显示

[10:24:59.464] ReferenceError: $ is not defined @ http://localhost:63280/Ads/Create:29

[10:25:03.565] Use of getPreventDefault() is deprecated. Use defaultPrevented instead. @ http://localhost:63280/Scripts/jquery-1.7.1.js:3446

[10:25:08.284] Use of attributes' specified attribute is deprecated. It always returns true. @ http://localhost:63280/Scripts/jquery-1.7.1.js:2378

JSON 未在 MVC 4 上触发事件

在使用任何调试之前，不要使用相对 URL，例如 ../Ads/LoadSubcategoryByCategory 与任何事件。

最好

使用@Url.Action("someaction", "somecontroller")：

 $.getJSON("@Url.Action("LoadSubcategoryByCategory", "Ads")",
这对

我有用

$.getJSON("./LoadSubcategoryByCategory", .....

尝试使用它：

  select.appedn($("<option></option>").attr("value", itemData.Value).text(itemData.Text))

希望它对你有用。

现在可以工作了，我只是将代码移动到下面

@section脚本{ }

然后我添加

@Scripts.Render（"~/bundles/jquery"）

请参阅下面的示例。

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        $(document).ready(function () {          
            $('#cat').change(function () {
                var category_id = $('#cat').val();
                $.getJSON('@Url.Action("LoadSub", "Ads")',
            {
                id_category: category_id
            },
          function (SubCategoryData) {
              var select = $("#subCat");
              select.empty();
              select.append($('<option/>',
              {
                  value: 0,
                  text: "-Select a SubCategory-"
              }));
              $.each(SubCategoryData, function (index, itemData) {
                  select.append($('<option/>',
                  {
                      value: itemData.Value,
                      text: itemData.Text
                  }));
              });
          });
            });
        });
</script>    
}

注意：我已经将下拉ID从ddlCategory更改为cat，将ddlSubCategory更改为subCat

相关文章：