Javascript 用另一个下拉列表ASP.NET MVC筛选下拉列表

这是我的第一个ASP.NET MVC应用程序，我真的在与一些东西作斗争，现在我有一个大问题，我在这里呆了5个多小时。准备好了，我正试图用另一个下拉列表中的选择筛选我的下拉列表，在我发布代码之前，我想说我已经遵循了以下帖子：

让我们开始：

不管其他字段如何，我有两个下拉列表，一个代表主类别，另一个代表子类别，在主类别选择中，子类别应该加载在下拉列表中，用户应该能够选择它

我想创建一个视图，用户应该能够在其中填写一些日期并将其发回服务器，但在发回之前，他需要选择日期正确维护->子类别，所以这就是我目前的做法：

我的操作结果“创建”方法：

public ActionResult Create()
{

// I did not wrote other stuffs because they are not important in my question and code will be clearer.

//First I'm filling MAIN CATEGORY dropdown with data from my database
    List<Groups> articleGroups = GroupController.GetActiveMainGroups();
    // Attach list on ViewBag, because this view Bag will be used to populate main dropdown
    ViewBag.articleGroups = articleGroups;


    //Here is second list which should populate second dropdown, right now I get all subgroups from database, because it didn't let me
    //run my application if list was empty (probably I don't need this in future because I will filter second dropdown by selecting something from dropdown above)
    List<SubGroups> subGroups = GroupController.GetAllSubGroups();
    // Attach list on ViewBag, it will be used for generating dropdown list.
    ViewBag.subGroups = subGroups;

    return View(model);
}

:

我可能在这里犯了一些错误，但我真的不知道在哪里和什么地方，因为我不熟悉javascript和jquery，我不知道还有其他方法可以做到这一点：/

不管我想怎么做，如果你们中有人能帮助我，我将非常感激

谢谢各位

---

干杯

没有人为此干杯吗/假设脚本不在外部文件中，则显示的代码应点击

getSubsubbyMainGroup

方法。浏览器控制台中出现了哪些错误？但是请注意，成功回调中的代码不正确，因为您返回的

子组

集合不包含属性

值

和

文本

（它们似乎包含属性

子组ID

和

子组名称

）另请参阅实现级联dropdownlists。没有人知道这一点吗/假设脚本不在外部文件中，则显示的代码应点击

getSubsubbyMainGroup

方法。浏览器控制台中出现了哪些错误？但是请注意，成功回调中的代码不正确，因为您返回的

子组

集合不包含属性

值

和

文本

（它们似乎包含属性

子组ID

和

子组名称

）另请参阅以了解如何实现级联下拉列表。

  public ActionResult GetSubgroupByMainGroup(Guid id)
  {
     List<SubGroups> subGroups = GroupController.GetAllSubGroupsByMainGroup(id);
     return Json(subGroups, JsonRequestBehavior.AllowGet);
  }

@model MyProject.Web.Models.ArticleNewViewModel
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
@using MyProject.Model
@{
    ViewBag.Title = "Add new Article";
}

<h3>Adding new article to database</h3>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true)


        <div class="form-group">
            @Html.LabelFor(model => model.MainGroupID, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.MainGroupID, new SelectList(ViewBag.articleGroups , "MainGroupID", "Group.Name"))
                @Html.ValidationMessageFor(model => model.MainGroupID)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SubGroupID, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.SubGroupID, new SelectList(ViewBag.subGroups , "SubGroupID", "SubGroup.Name"))
                @Html.ValidationMessageFor(model => model.SubGroupID)
            </div>
        </div>


    //I don't understand this code really, because I have so little experience with javascript&jquery
    <script type="text/javascript">
    $(function () {
        $("#MainGroupID").change(function () {
            var val = $(this).val();
            var subItems="";
            $.getJSON("@Url.Action("GetSubgroupByMainGroup", "Article")", {id:val} ,function (data) {
              $.each(data,function(index,item){
                subItems+="<option value='"+item.Value+"'>"+item.Text+"</option>"
              });
              $("#SubGroupID").html(subItems)
            });
        });
    });
</script>

}

<div>
    @Html.ActionLink("Go back", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

ArticleNewViewModel

public class ArticleNewViewModel
    {
        [Required]
        [Display(Name = "Article code")]
        public string Code { get; set; }

        [Required]
        [Display(Name = "Article Title")]
        public string Title { get; set; }


   //Here is ID's which should represent value from MAIN and value from SUBGROUP
        [Required]
        [Display(Name = "Main group")]
        public Guid MainGroupID { get; set; }

        [Required]
        [Display(Name = "Sub Group")]
        public Guid SubGroupID { get; set; }


    }