mvc 相关联的下拉列表 cascading dropdownlist

Coutry数据

namespace JQueryJsonSelectDemo.Models
{
  public class Country
  {
    public string CountryName { get; set; }
    public string CountryCode { get; set; }
    public int CountryId { get; set; }

    public static IQueryable<Country> GetCountryDataList()
    {
      return new List<Country>()   
      {  
         new Country { CountryName = "中国", CountryCode = "CN", CountryId = 1},  
         new Country { CountryName = "美国", CountryCode = "US", CountryId = 2} 
      }
      .AsQueryable<Country>();
    }
  }
}

Province数据

 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JQueryJsonSelectDemo.Models
{
  public class Province
  {
      public string ProvinceName { get; set; }
    public int CountryId { get; set; }
    public int ProvinceId { get; set; }

    public static IQueryable<Province> GetProductDataList()
    {
      return new List<Province>()   
      {  
         new Province { ProvinceName = "Cup", CountryId = 2, ProvinceId = 1},  
         new Province { ProvinceName = "MP3 Player", CountryId = 2, ProvinceId = 2},  
         new Province { ProvinceName = "52\" LCD TV", CountryId = 1, ProvinceId = 3},  
         new Province { ProvinceName = "Fork", CountryId = 2, ProvinceId = 4},  
         new Province { ProvinceName = "Spoon", CountryId = 1, ProvinceId = 5},  
         new Province { ProvinceName = "Shirt", CountryId = 2, ProvinceId = 6},  
         new Province { ProvinceName = "保定", CountryId = 1, ProvinceId = 7},  
         new Province { ProvinceName = "Shoes", CountryId = 2, ProvinceId = 8},  
         new Province { ProvinceName = "河北", CountryId = 1, ProvinceId = 9},  
         new Province { ProvinceName = "Pen", CountryId = 2, ProvinceId = 10}  
      }
      .AsQueryable<Province>();
    }
  }
}

 

View页面

 

<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
  $(document).ready(function() {
    $("select#Countries").change(function() {
      var Country = $("#Countries > option:selected").attr("value");

      $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: "FindProvinces/" + Country,
        data: "{}",
        dataType: "json",
        success: function(data) {
          $('#ProvincesDiv > div').remove(); // remove any existing Provinces
          if (data.length > 0) {
            var options = '';
            for (p in data) {
              var province = data[p];
              options += "<option value='" + province.ProvinceId + "'>" + province.ProvinceName + "</option>";
            }
            $("#Provinces").removeAttr('disabled').html(options);

          } else {
            $("#Provinces").attr('disabled', true).html('');
            $("#ProvincesDiv").append('<div>(None Found)</div>');
          }
        }
      });
    });
  });
</script>

</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
  <h2><%= Html.Encode(ViewData["Message"]) %></h2>
  
  <p>
    <% using (Html.BeginForm())
       {%>
    <label for="Countries">Countries:</label>
    <%=Html.DropDownList("Countries", Model.Countries)%>
  </p>
  <p>
    <div id="ProvincesDiv"></div>
  </p>
  <p>
    <label for="Provinces">Provinces:</label>
    <select id="Provinces"></select>
  </p>
  <p>
  <input class="button" type="submit" value="添   加" />
  </p>
  <%} %>
</asp:Content>

 Controller

 

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Index(FormCollection formCollection)
    {
        var c = Request.Form["Countries"].ToString(); //可以获得数据
        var p = Request.Form["Provinces"].ToString(); //无法获得p的数据，这是为什么呢？

        return View();
    }

 

问题就是通过ajax获得的province的数据为什么post不到contrller中？是我的做法有错吗？