2015-01-11 46 views
0

由於兩個星期,我試圖創建一個包含3個下拉列表的ASP.NET MVC 4應用程序。 這些是國家,州和城市。 我繼this article使用Json和Jquery在Asp.net MVC4級聯下拉列表不填充

這些數據庫列表的詳細信息,我從databas叫

連接字符串:

<connectionStrings> 
    <add name="CACD_Con" connectionString="metadata=res://*/Models.Project_Name.csdl|res://*/Models.Project_Name.ssdl|res://*/Models.Project_Name.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=192.168.0.000;initial catalog=CACD;persist security info=True;user id=000;password=000000000;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" /> 
</connectionStrings> 

控制器類:

public class CacadingController : Controller 
{ 
    private ProjectContext db = new ProjectContext(); 

    public ActionResult Index() 
    { 
     ViewBag.CountryId = new SelectList(db.Countrys, "CountryId", "CountryName"); 
     return View(); 
    } 

    public JsonResult StateList(int Id) 
    { 
     var state = from s in db.States 
         where s.CountryId == Id 
         select s; 
     return Json(new SelectList(state.ToArray(), "StateId", "StateName"), JsonRequestBehavior.AllowGet); 
    } 

    public JsonResult Citylist(int id) 
    { 
     var city = from c in db.Citys 
        where c.StateId == id 
        select c; 
     return Json(new SelectList(city.ToArray(), "CityId", "CityName"), JsonRequestBehavior.AllowGet); 
    } 

    public IList<State> Getstate(int CountryId) 
    { 
     return db.States.Where(m => m.CountryId == CountryId).ToList(); 
    } 

    [AcceptVerbs(HttpVerbs.Get)] 
    public JsonResult LoadClassesByCountryId(string CountryName) 
    { 
     var stateList = this.Getstate(Convert.ToInt32(CountryName)); 
     var stateData = stateList.Select(m => new SelectListItem() 
     { 
      Text = m.StateName, 
      Value = m.CountryId.ToString(), 
     }); 
     return Json(stateData, JsonRequestBehavior.AllowGet); 
    } 

} 

模型類:

public partial class ProjectContext : DbContext 
    { 
     public ProjectContext() 
      : base("CACD") 
     { 
     } 

     public DbSet<Country> Countrys { get; set; } 
     public DbSet<State> States { get; set; } 
     public DbSet<City> Citys { get; set; } 

     } 

    public class Country 
    { 
     [Key] 
     public int CountryId { get; set; } 
     public string CountryName { get; set; } 

     public virtual ICollection<State> States { get; set; } 
    } 


    public class State 
    { 
     [Key] 
     public int StateId { get; set; } 
     public string StateName { get; set; } 
     [ForeignKey("Country")] 
     public int CountryId { get; set; } 

     public virtual Country Country { get; set; } 
     public virtual ICollection<City> Citys { get; set; } 
    } 

    public class City 
    { 
     [Key] 
     public int CityId { get; set; } 
     public string CityName { get; set; } 
     [ForeignKey("State")] 
     public int StateId { get; set; } 

     public virtual State State { get; set; } 
    } 

查看文件(CSHTML)

@model Project_Name.Models.ProjectContext 

@using (Html.BeginForm()) 
{ 
@Html.DropDownList("Country", ViewBag.CountryId as SelectList, "Select a Country", new { id="Country" })<br /> 
    <select id="State" name="state"></select><br /> 
    <select id="city" name="City"></select><br /> 
} 

@Scripts.Render("~/bundles/jquery") 
<script type="text/jscript"> 
    $(function() { 
     $('#Country').change(function() { 
      $.getJSON('/Cascading/StateList/' + $('#Country').val(), function (data) { 
       var items = '<option>Select a State</option>'; 
       $.each(data, function (i, state) { 
        items += "<option value='" + state.Value + "'>" + state.Text + "</option>"; 
       }); 
       $('#State').html(items); 
      }); 
     }); 

     $('#State').change(function() { 
      $.getJSON('/Cascading/Citylist/' + $('#State').val(), function (data) { 
       var items = '<option>Select a City</option>'; 
       $.each(data, function (i, city) { 
        items += "<option value='" + city.Value + "'>" + city.Text + "</option>"; 
       }); 
       $('#city').html(items); 
      }); 
     }); 
    }); 
</script> 

但是下拉不能顯示任何在數據庫中的數據,很感激,如果你能告訴我正確的路徑

+0

請告訴我不工作?第一個下拉列表(國家)正在填充? –

+0

沒有任何上述dropdwon不填充任何東西 – kez

+0

然後,你需要調試你的代碼 - 是否'db.Countrys'返回任何有效的數據? (並且你不需要'@model AFFEMS2_HEC.Models.ProjectContext'在視圖中 - 這不是你的模型!) –

回答

1
where cityList is list containing city model 

var result = from item in cityList 
           select new 
           { 
            value = item.CityId, 
            text = item.Name 
           }; 
        return Json(result, JsonRequestBehavior.AllowGet); 

and in script add 
$('#State').change(function() { 
      $.getJSON('/Cascading/Citylist/' + $('#State').val(), function (data) { 
       var items = []; 
       items.push("<option>Select City</option>"); 
       $.each(data, function() { 
        items.push("<option value=" + this.value + ">" + this.text + "</option>"); 
       }); 
       $(city).html(items.join(' ')); 
      }); 
     }); 

do same for state 
1

我使用的第一個對我的項目但犯規節省數據庫中的信息..拯救國家我做了這個觀點:

@Html.DropDownListFor(model => model.CountryId, ViewBag.CountryId as SelectList, "Select a Country", new { id = "Country", @class = "form-control" })<br /> 

但接下來的犯規節省,但如果我改變它像上面次Ë腳本不起作用
任何幫助......

**<select id="StateId" name="state" class="form-control"></select><br /> 
<select id="CityId" name="City" class="form-control"></select><br />** 

腳本 **

@section Scripts { 
     @Scripts.Render("~/bundles/jqueryval") 
     <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
     <script type="text/jscript"> 
     $(function() { 
      $('#Country').change(function() { 
       $.getJSON('/AddressBooks/StateList/' + $('#Country').val(), function (data) { 
        var items = '<option>Select a State</option>'; 
        $.each(data, function (i, state) { 
         items += "<option value='" + state.Value + "'>" + state.Text + "</option>"; 
        }); 
        $('#StateId').html(items); 
        $('#CityId').html(null); 
       }); 
      }); 

      $('#StateId').change(function() { 
       $.getJSON('/AddressBooks/Citylist/' + $('#StateId').val(), function (data) { 
        var items = '<option>Select a City</option>'; 
        $.each(data, function (i, city) { 
         items += "<option value='" + city.Value + "'>" + city.Text + "</option>"; 
        }); 
        $('#CityId').html(items); 
       }); 
      }); 
     }); 
     </script> 

**

在控制器

public ActionResult Create() 
     { 

      ViewBag.CustomerId = new SelectList(db.Customers, "Id", "FullName"); 
      ViewBag.CountryId= new SelectList(db.Countries, "CountryId", "CountryName"); 
      return View(); 
     } 
     public JsonResult StateList(int Id) 
     { 
      var state = from s in db.States 
         where s.CountryId == Id 
         select s; 

      return Json(new SelectList(state.ToArray(), "StateId", "StateName"), JsonRequestBehavior.AllowGet); 
     } 

     public JsonResult Citylist(int id) 
     { 
      var city = from c in db.Cities 
         where c.StateId == id 
         select c; 

      return Json(new SelectList(city.ToArray(), "CityId", "CityName"), JsonRequestBehavior.AllowGet); 
     } 

     public IList<State> Getstate(int CountryId) 
     { 
      return db.States.Where(m => m.CountryId == CountryId).ToList(); 
     } 
     [AcceptVerbs(HttpVerbs.Get)] 
     public JsonResult LoadClassesByCountryId(string CountryName) 
     { 
      var stateList = this.Getstate(Convert.ToInt32(CountryName)); 
      var stateData = stateList.Select(m => new SelectListItem() 
      { 
       Text = m.StateName, 
       Value = m.CountryId.ToString(), 
      }); 
      return Json(stateData, JsonRequestBehavior.AllowGet); 
     } 
0

我解決問題

@Html.DropDownList("CountryId", null, htmlAttributes: new { id = "Country", @class = "form-control" }) 

@Html.DropDownListFor(model => model.StateId, new SelectList(Enumerable.Empty<selectlistitem>(), "StateId", "StateName"), "Select State", new { id = "StateId", @class = "form-control" }) 

@Html.DropDownListFor(model => model.CityId, new SelectList(Enumerable.Empty<selectlistitem>(), "CityId", "CityName"),"Select city",new { id = "CityId", @class = "form-control" }) 

的Json

@section Scripts { 
@Scripts.Render("~/bundles/jqueryval") 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script type="text/jscript"> 
$(function() { 
$('#Country').change(function() { 
$('#StateId').html(null) 
$('#CityId').html(null); 
$.getJSON('/AddressBooks/StateList/' + $('#Country').val(), function (data)  { 
$.each(data, function (i, state) { 
$("#StateId").append(
"<option value="" + state.Value + "">" + state.Text + "</option>") 
}); 
}); 
}); 

$('#StateId').change(function() { 
$('#CityId').html(null); 
$.getJSON('/AddressBooks/Citylist/' + $('#StateId').val(), function (data) { 
$.each(data, function (i, city) { 
$("#CityId").append(
"<option value="" + city.Value + "">" + city.Text + "</option>"); 

}); 
}); 
}); 
}); 
</script> 
}