层叠下拉列表，第一个下拉列表被填充，第二个没有

Question

我有两个下拉列表。并希望让他们级联。这是viewModel：

public class FaqOverviewModel
{
    public int Id { get; set; }
    public string EmailBericht { get; set; }
    public string Naam { get; set; }
    public string AfzenderNaam { get; set; }
    public string TelefoonNr { get; set; }


    [ForeignKey("FaqCategorie")]
    public int FaqCategorie_Id { get; set; }

    public FaqOverviewModel()
    {

        Categorie = new List<FaqCategorie>();
        SubCategorie = new List<FaqSubCategorie>();
    }

    public FaqOverviewModel(IEnumerable<FaqCategorie> categories)
    {
        this.Categorie = categories;
        //this.SubCategorie = subcategorie;
    }



    #region FAQCategorie
    private readonly IEnumerable<FaqCategorie> Categorie;
    private readonly IEnumerable<FaqSubCategorie> SubCategorie;
    //private IOrderedQueryable<FaqCategorie> categories;
    private IEnumerable<SelectListItem> subCategorie;


    public int? SelectedCategoriedFaqId { get; set; }
    public int? SelectedSubCategorieFaqId { get; set; }
    public IEnumerable<SelectListItem> FAQCategorieItems
    {
        get
        {
            return new SelectList(Categorie, "Id", "Naam");
        }
    }


    #endregion

    #region subcategorie


    #endregion



}

和控制器：

 public class FAQController : Controller
{

    //FaqService faqService;
    FaqCategorieService faqCategorieService;
    FaqCategorieSubService faqCategorieSubService;

    public FAQController(FaqCategorieService faqCategorieService, FaqCategorieSubService faqCategoriesubservice)
    {
        this.faqCategorieService = faqCategorieService;
        this.faqCategorieSubService = faqCategoriesubservice;

    }
    // GET: FAQ
    // [HttpGet]
    public ActionResult Index()
    {
        var categories = faqCategorieService.GetAll().OrderBy(x => x.Naam);
        // var subCategorie = faqCategorieSubService.GetAll().OrderBy(sub => sub.Naam);

        //var subCategorie = faqCategorieSubService.GetAll().Where(s => s.Id == s.FaqCategorie_Id).ToList()
        //    .Select(c => new SelectListItem() { Value = c.Id.ToString(), Text = c.Naam });


        FaqOverviewModel model = new FaqOverviewModel(categories);
        return View(model);

    }


    public JsonResult SubCategorie(int Categorieid)
    {

        var subCategorie = faqCategorieSubService.GetAll().Where(s => s.Id == Categorieid).ToList()
           .Select(c => new SelectListItem() { Value = c.Id.ToString(), Text = c.Naam });

        //var Subcategorie = faqCategorieSubService.GetAll().Where(s => s.Id == Categorieid).ToList()          
        //    .Select(c => new SelectListItem)(){   = c.Id.ToString(), Text = c.Naam });

        return this.Json(subCategorie, JsonRequestBehavior.AllowGet);

    }
}

观点：

@using (Html.BeginForm())
{

    @*@Html.DropDownList("Id", ViewBag.Id as SelectList, "Select a Category", new { id = "FaqCategorie_Id" })<br />
        <select id="FaqSubCategorie" name="FaqSubCategorie"></select><br />*@




    <p>
        <span class="fixedLabelWidth">@Html.LabelFor(model => model.SelectedCategoriedFaqId, "Categorie:")</span>
        @Html.DropDownListFor(x => x.SelectedCategoriedFaqId, Model.FAQCategorieItems)
        <select name="Id" id="Id"></select>


    </p>


    @*<p>
            <span class="fixedLabelWidth">@Html.LabelFor(model => model.SelectedSubCategorieFaqId, "onderwerp:")</span>
            @Html.DropDownListFor(x => x.SelectedSubCategorieFaqId, Model.FaqCategorieSubItems)

        </p>*@



    <p>
        <span class="fixedLabelWidth">@Html.LabelFor(model => model.EmailBericht, "Bericht:")</span>
        @Html.TextAreaFor(x => x.EmailBericht)
    </p>

    <p>
        <span class="fixedLabelWidth">@Html.LabelFor(model => model.AfzenderNaam, "Afzender:")</span>
        @Html.TextBoxFor(x => x.AfzenderNaam)
    </p>

    <p>
        <span class="fixedLabelWidth">@Html.LabelFor(model => model.TelefoonNr, "Tel:")</span>
        @Html.TextBoxFor(x => x.TelefoonNr)
    </p>


}

@section scripts
{
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/Form")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Bundles/Q")
    @Scripts.Render("~/Bundles/moment")
    @Scripts.Render("~/bundles/Utils")



    @Scripts.Render("~/bundles/Jquery-ui")


    <script type="text/javascript">

        $(document).ready(function () {
            $("#Id").change(function () {
                var strStateID = "";
                strCategorieID = $(this)[0].value; // get the selected categorie id
                var url = Medicijnverstrekking.baseUrl + "/FAQ/SubCategorie/" + strCategorieID;
                // call controller's action
                $.getJSON(url, null, function (data) {
                    // do something once the data is retrieved
                    $("#Id").empty();
                    $.each(data, function (index, optionData) {
                        $("#Id").append("<option value='"
                             + optionData.Id
                             + "'>" + optionData.Naam
                             + "</option>");
                    });
                });
            })
            .change();   // value});
        });

    </script>


}

第一个下拉列表已填写。但第二个下拉列表是空的。还有Json： public JsonResult SubCategorie（int Categorieid）没有命中，当我在那里放一个断点

谢谢