如何在asp.net mvc中创建级联下拉列表

时间:2018-02-20 08:40:40

标签: c# asp.net-mvc razor

1.这是我的控制者:

using System; using System.Collections.Generic; using System.Linq;
using System.Web; using System.Web.Mvc; using
WebApplication7.Models;

namespace WebApplication7.Controllers {
    public class DefaultController : Controller
    {
        tarazouEntities db = new tarazouEntities();
        // GET: Default
        public ActionResult Index()
        {
            List<Province> lstpro = new List<Province>();
            ViewBag.Province = new SelectList(db.Provinces, "Id", "Name");

            return View();
        }
        public ActionResult City(int id)
        {
            return Json(db.Cities.Where(x => x.ProvinceId == id), JsonRequestBehavior.AllowGet);
        }
    }

}

这是我的观点:

   @{
        ViewBag.Title = "Index"; } <br /> <div class="form-group">
        @Html.DropDownList("province", (SelectList)ViewBag.Province, " Select your Province", new { @class = "form-control",
    initilize_dropdown = "/default/City", drop = "#city" }) </div> <div
    class="form-group">
        <select class="form-control" id="city"></select> </div> @section scripts {
        <script>
            $('[initilize-dropdown]').change(function () {
                var id = $(this).val();
                var model = $(this).attr('initilize-dropdown');
                var fill_dropdown = $(this).attr('drop');
                $(fill_dropdown).empty();
                $.get(model, { 'id': id }, function (data) {
                    $.each(data, function (index, value) {
                        $(fill_dropdown).append(new Option(value.Name, value.Id));
                    });
                });
            });
        </script>
 }

当我选择省,城市未开放时,城市列表为空

1 个答案:

答案 0 :(得分:0)

在下拉更改事件中,向控制器操作发送ajax请求。 使用下拉列表检索并绑定数据

$.getJSON('action','controller',null, function (data){ 
   $.each(data, function(){
      $('#dplcities').append("<option value="+data.id+">+ data.CityName +"
       </option>")
    });
});