mvc下拉更改不會觸發

Question

我嘗試在mvc頁面上使用3個下拉列表，如果我更改ddl 1 ddl 2中的值應該更改，並且ddl 2的更改應該更改ddl 3中的值。到目前爲止我有這個代碼....設置ddl 1的值，但如果我改變ddl的值1沒有任何事情發生。 ddl 2沒有得到任何值，「public JsonResult GetPapperByTypeId（int typeId）」根本沒有被觸發。

我在這裏錯過了什麼？

主視圖

      @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "myForm", name = "papper_search" })) 
          { 

              @Html.DropDownList("PrintType", ViewData["papperType"] as List<SelectListItem>, new { @class = "form-control" }) 
              <br /> 
              <br /> 
              @Html.DropDownList("Papper", new SelectList(string.Empty, "Value", "Text"), "Please select a paper", new { @class = "form-control" }) 

              <br /> 
              <br /> 
              @Html.DropDownList("PapperType", new SelectList(string.Empty, "Value", "Text"), "Please select a type", new { @class = "form-control" }) 

          } 





<script type="text/javascript" src="@Url.Content("~/js/jquery.min.js")"></script> 
<script type="text/jscript"> 
$(function() 
{ 
    $('#PrintType').change(function() 
    { 
     $.getJSON('/Home/GetPapperByTypeId/' + $('#PrintType').val(), function (data) 
     { 
      var items = '<option>Select Papper</option>'; 
      $.each(data, function (i, printtype) 
      { 
       items += "<option value='" + printtype.Value + "'>" + printtype.Text + "</option>"; 
      }); 
      $('#Papper').html(items); 
     }); 
    }); 

    $('#Papper').change(function() 
    { 
     $.getJSON('/Home/Citylist/' + $('#Papper').val(), function (data) 
     { 
      var items = '<option>Select PapperType</option>'; 
      $.each(data, function (i, pappertype) 
      { 
       items += "<option value='" + pappertype.Value + "'>" + pappertype.Text + "</option>"; 
      }); 
      $('#PapperType').html(items); 
     }); 
    }); 
}); 
</script> 

Home控制器

public ActionResult Index() 
    { 

     var li = new List<SelectListItem> 
     { 
      new SelectListItem {Text = "Select", Value = "0"}, 
      new SelectListItem {Text = "Plain paper", Value = "1"}, 
      new SelectListItem {Text = "Heavy paper", Value = "2"}, 
     }; 
     ViewData["papperType"] = li; 

    } 

    //Action result for ajax call 
    public JsonResult GetPapperByTypeId(int typeId) 
    { 
     var objallPappers = GetAllPappers().Where(m => m.TypeId == typeId).ToList(); 
     var obgpapper = new SelectList(objallPappers, "Id", "Name", 0); 
     return Json(obgpapper, JsonRequestBehavior.AllowGet); 
    } 


    public List<Papper> GetAllPappers() 
    { 
     var objPapper = new List<Papper> 
     { 
      new Papper {Id = 1, TypeId = 1, Name = "papper-1"}, 
      new Papper {Id = 2, TypeId = 2, Name = "papper-1"}, 
      new Papper {Id = 3, TypeId = 4, Name = "papper-1"}, 
      new Papper {Id = 4, TypeId = 1, Name = "papper-2"}, 
      new Papper {Id = 5, TypeId = 1, Name = "papper-3"}, 
      new Papper {Id = 6, TypeId = 4, Name = "papper-2"} 
     }; 
     return objPapper; 
    }    

Answer 1

問題：是在這行代碼

$.getJSON('/Home/GetPapperByTypeId/' + $('#PrintType').val(), function (data)

實際問題是這樣的/Home/GetPapperByTypeId/' + $('#PrintType').val()

這最終會像/Home/GetPapperByTypeId/SomeValue

解決方案的URL：你想要的網址是什麼能像/Home/GetPapperByTypeId/?typeId=SomeValue

注意TYPEID =添加到查詢字符串中。因爲你的控制器動作需要有名稱的參數typeId

public JsonResult GetPapperByTypeId(int typeId) 

因此，在您的jQuery改變語法

$.getJSON('/Home/GetPapperByTypeId/?typeId=' + $('#PrintType').val(), function (data) 

你在這行代碼有類似的問題。

$.getJSON('/Home/Citylist/' + $('#Papper').val(), function (data)也修復此問題。