C# json、ASP.NET MVC、创建级联下拉列表

我正在尝试创建级联下拉框， 第一个下拉框应填充电影标题 第二个下拉框应填充与电影标题关联的日期。 我建立了一对多的关系

以下是我使用数据库优先方法生成的模型：

public partial class MovieDetail
{     
    public MovieDetail()
    {
        this.MovieDates = new HashSet<MovieDate>();
    }

    public int Id { get; set; }
    public string Title { get; set; }
    public string Director { get; set; }
}

public partial class MovieDate
{
    public MovieDate()
    {
        this.Times = new HashSet<Time>();
    }

    public int MovieDateId { get; set; }
    public string Date { get; set; }
    public int MovieDetailsId { get; set; }

    public virtual MovieDetail MovieDetail { get; set; }
}

以下是我的看法：

@model MovieApp.Models.MovieDetail
@{
    ViewBag.Title = "Index";
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
}

@section scripts {
<script type="text/javascript">
    $(function () 
    {
        $.getJSON(" MovieWhatsOn/TitleList", function (data) {
            var items="<option>-----</option>";
            $.each(data,function(i,title){
                items+="<option value'" +title.Value +"'>" +title.text +"</option>";

            });

            $("#Titles").html(items);
        });

        $("Titles").change(function(){
            $.getJSON(" MovieWhatsOn/DateList" + $("#Titles > option:selected").attr("value"), function (data){
                var items="<option>-----</option>";
                $.each(data,function(i,date){
                    items+="<option value'" +date.Value +"'>" +date.text +"</option>";

                });

                $("#Dates").html(items);
            });
        });
    });
</script>
}
<h2>Index</h2>

@using (Html.BeginForm())
{
    <label for="Titles">Title</label>
    <select id="Titles" name="Titles"></select>
    <br /><br />
    <label for="Dates">Dates</label>
    <select id="Dates" name="Dates"></select>
    <br /><br />
    <input type="submit" value="submit" />

}

@model MovieApp.Models.MovieDetail
@{
ViewBag.Title=“Index”；
}
@节脚本{
$（函数（）
{
$.getJSON（“MovieWhatsOn/TitleList”，函数（数据）{
var items=“------”；
$。每个（数据、功能（i、标题）{
项目+=“”+title.text+“”；
});
$（“#Titles”）.html（项目）；
});
$（“标题”）.change（函数（）{
$.getJSON（“MovieWhatsOn/DateList”+$（“#Titles>option:selected”）.attr（“value”）、函数（数据）{
var items=“------”；
$。每个（数据、函数（i、日期）{
项目+=“”+date.text+“”；
});
$（“#日期”）.html（项目）；
});
});
});
}
指数
@使用（Html.BeginForm（））
{
标题



日期



}

当标题和日期未填充下拉列表时

我真的不确定我是不是做错了。我不熟悉JSON和MVC

---

非常感谢你的时间和努力！感谢您的时间。

浏览器端（通过firebug等）：ajaax正在开火吗？你有回报吗？应用程序端：单步执行的结果？您是否调试了带有断点的应用程序？有什么东西返回到浏览器吗？@MadMyche我早就准备好了，thanks@MadMyche所以我意识到我的ajax没有启动，但我不知道为什么？浏览器端（通过firebug等）：ajaax启动了吗？你有回报吗？应用程序端：单步执行的结果？您是否调试了带有断点的应用程序？有什么东西返回到浏览器吗？@MadMyche我早就准备好了，thanks@MadMyche所以我意识到我的ajax没有启动，但我不知道为什么？

@model MovieApp.Models.MovieDetail
@{
    ViewBag.Title = "Index";
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
}

@section scripts {
<script type="text/javascript">
    $(function () 
    {
        $.getJSON(" MovieWhatsOn/TitleList", function (data) {
            var items="<option>-----</option>";
            $.each(data,function(i,title){
                items+="<option value'" +title.Value +"'>" +title.text +"</option>";

            });

            $("#Titles").html(items);
        });

        $("Titles").change(function(){
            $.getJSON(" MovieWhatsOn/DateList" + $("#Titles > option:selected").attr("value"), function (data){
                var items="<option>-----</option>";
                $.each(data,function(i,date){
                    items+="<option value'" +date.Value +"'>" +date.text +"</option>";

                });

                $("#Dates").html(items);
            });
        });
    });
</script>
}
<h2>Index</h2>

@using (Html.BeginForm())
{
    <label for="Titles">Title</label>
    <select id="Titles" name="Titles"></select>
    <br /><br />
    <label for="Dates">Dates</label>
    <select id="Dates" name="Dates"></select>
    <br /><br />
    <input type="submit" value="submit" />

}