Question

这是我的第一个ASP.NET MVC应用程序，我真的在努力解决一些问题，现在我有很大的问题，我已经在这里停留了5个多小时，我正在尝试过滤我的下拉列表从另一个下拉列表中选择，在我发布我的代码之前，我想说我已经关注了这篇文章：

How to filter the options of a drop down list using another drop down list

让我们开始吧：

无论其他字段如何，我都可以说两个下拉菜单，一个代表MAIN CATEGORY，另一个代表SUB CATEGORY，在MAIN CATEGORY选择中，SUB CATEGORY应该在下拉列表中加载，用户应该可以选择它。

我想创建一个视图，其中用户应该能够填写一些日期并将其发回服务器，但在将其发回之前，他需要正确选择日期MAINCATEG - ＆gt; SUBCATEG所以这就是我到目前为止所做的：

我的动作结果'创建'方法：

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调用的一种方法：

  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")
}

有趣的是，当我在我的方法public ActionResult GetSubgroupByMainGroup(Guid id)中设置断点时，它没有被命中，这意味着这个代码没有被执行，这是我的

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; }


    }

我可能在这里犯了一些错误，但我真的不知道在哪里和什么，因为我不熟悉javascript＆amp; jquery，我不知道还有另外一种方法：/

无论我想解决这个问题，如果你们中的某些人可以帮助我，我会非常感激！

谢谢你们干杯

使用另一个下拉列表来过滤下拉式ASP.NET MVC

0 个答案: