MVC Razor两级级联ListBox不会过滤

Question

I tried to implement the cascade example of http://www.devcurry.com/2013/01/aspnet-mvc-cascading-dropdown-list.html

But when running I don't get into success. I always get an error. I would appreciate someone to review my codes. I can't figure out where the error is.

Model

//LineMaintenance.cs
namespace SchneiderDMS.Models
{
using System;
using System.Collections.Generic;

public partial class LineMaintenance
{
    public int ID { get; set; }
    public Nullable<int> LineID { get; set; }
    public Nullable<System.DateTime> StartTime { get; set; }
    public Nullable<System.DateTime> AcknowlegeTime { get; set; }
    public Nullable<System.DateTime> EndTime { get; set; }
    public Nullable<int> TypeOfProblemID { get; set; }
    public Nullable<int> ProblemID { get; set; }
    public string ProblemDescription { get; set; }
    public virtual Line Line { get; set; }
    public virtual Problem Problem { get; set; }
    public virtual TypeOfProblem TypeOfProblem { get; set; }
}
}


//Problem.cs
namespace SchneiderDMS.Models
{
using System;
using System.Collections.Generic;

public partial class Problem
{
    public Problem()
    {
        this.LineMaintenances = new HashSet<LineMaintenance>();
    }

    public int ID { get; set; }
    public Nullable<int> TypeOfProblemID { get; set; }
    public string Name { get; set; }
    public virtual ICollection<LineMaintenance> LineMaintenances { get; set; }
    public virtual TypeOfProblem TypeOfProblem { get; set; }
}
}


//TypeOfProblem.cs
namespace SchneiderDMS.Models
{
using System;
using System.Collections.Generic;

public partial class TypeOfProblem
{
    public TypeOfProblem()
    {
        this.LineMaintenances = new HashSet<LineMaintenance>();
        this.Problems = new HashSet<Problem>();
    }

    public int ID { get; set; }
    public string Name { get; set; }
    public virtual ICollection<LineMaintenance> LineMaintenances { get; set; }
    public virtual ICollection<Problem> Problems { get; set; }
}
}

View - Create.cshtml

<div class="col-md-4">
   @Html.LabelFor(model => model.TypeOfProblemID, "TypeOfProblemID", htmlAttributes: new { @class = "control-label", @style = "margin-bottom:10px" })
   @Html.ListBox("TypeOfProblemID", null, htmlAttributes: new { @class = "form-control", @style = "height:150px" })
   @Html.ValidationMessageFor(model => model.TypeOfProblemID, "", new { @class = "text-danger" })
</div>
<div class="col-md-4">
   @Html.LabelFor(model => model.ProblemID, "ProblemID", htmlAttributes: new { @class = "control-label", @style = "margin-bottom:10px" })
   @Html.ListBox("ProblemID", null , htmlAttributes: new { @class = "form-control", @style = "height:150px" })
   @Html.ValidationMessageFor(model => model.ProblemID, "", new { @class = "text-danger" })
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryvalc")
<script> 
$(document).ready(function () 
{ 
    //Dropdownlist Selectedchange event 
    $("#TypeOfProblemID").change(function () 
    { 
        $("#ProblemID").empty(); 
        $.ajax({ 
            type:'POST', 
            url: '@Url.Action("SelectProblems")', 
            dataType: 'json', 
            data: { id: $("#TypeOfProblemID").val() }, 
            success: function (Problems) 
            { 
                // Problems contains the JSON formatted list 
                // of Problems passed from the controller 
                $.each(Problems, function (i, Problem) 
                { 
                    $("#ProblemID").append('<option value="' 
                     + Problem.ID + '">' 
                     + Problem.Name + '</option>'); 
                }); 
            }, 
            error: function (ex) 
            { 
                alert('Failed to retrieve Problems.' + ex); 
            } 
        }); 
        return false; 
    }) 
}); 
</script>
}

Controller - LineMaintenance.cs

    // GET: LineMaintenances/Create
    public ActionResult Create()
    {
        ViewBag.LineID = new SelectList(db.Lines, "ID", "Name");
        ViewBag.ProblemID = new SelectList(db.Problems, "ID", "Name");
        ViewBag.TypeOfProblemID = new SelectList(db.TypeOfProblems, "ID", "Name");
        return View();
    }

    //Returns Json Result
    public JsonResult SelectProblems(int id)
    {
        db.Configuration.ProxyCreationEnabled = false;
        IEnumerable<Problem> Problems = db.Problems.Where(p => p.TypeOfProblemID == id);
        return Json(Problems);
    }

    // POST: LineMaintenances/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> Create([Bind(Include = "ID,LineID,StartTime,AcknowlegeTime,EndTime,TypeOfProblemID,ProblemID,ProblemDescription")] LineMaintenance lineMaintenance)
    {
        if (ModelState.IsValid)
        {
            db.LineMaintenances.Add(lineMaintenance);
            await db.SaveChangesAsync();
            return RedirectToAction("Index");
        }

        ViewBag.LineID = new SelectList(db.Lines, "ID", "Name", lineMaintenance.LineID);
       // ViewBag.ProblemID = new SelectList(db.Problems, "ID", "Name", lineMaintenance.ProblemID);
        ViewBag.TypeOfProblemID = new SelectList(db.TypeOfProblems, "ID", "Name", lineMaintenance.TypeOfProblemID);
        return View(lineMaintenance);
    }

Answer 1

In ur code when ur returning json result modify it as follow

public JsonResult SelectProblems(int id)
{
    db.Configuration.ProxyCreationEnabled = false;
    IEnumerable<Problem> Problems = db.Problems.Where(p => p.TypeOfProblemID == id);
    return Json(Problems,JsonRequestBehavior.AllowGet);
}