请教三个 DropDownListFor 不刷新页面联动改变的实现。

scycau · 发表于 2014-7-8 16:53:11

请教注册页面中的国家，省，城市三个 DropDownListFor 不刷新联动改变的实现。

目前的程序没有任何联动，代码如下：
-------------------------
View中：
@Html.DropDownListFor(Model => Model.Country, (IEnumerable<SelectListItem>)ViewBag.Country, "*Country (选择国家)")
@Html.DropDownListFor(Model => Model.Country, (IEnumerable<SelectListItem>)ViewBag.Province, "*Province (选择省/区域)") @Html.DropDownListFor(Model => Model.Country, (IEnumerable<SelectListItem>)ViewBag.City, "*City (选择城市)")
-------------------------
Controller中：
public ActionResult Register()
      {
         List<T_User> list = new List<T_User>();
         List<T_User> li = Session["User"] as List<T_User>;
         IEnumerable<SelectListItem> ddlItemCountry = from o in db.Fetch<T_CityDate>("Select distinct Country from  [T_CityDate] ")
                                                select new SelectListItem
                                                {
                                                   //Value = o.ID.ToString(),
                                                   Text = o.Country
                                                };
         IEnumerable<SelectListItem> ddlItemProvince = from o in db.Fetch<T_CityDate>("Select distinct Country, Province from  [T_CityDate] ")
                                                select new SelectListItem
                                                {
                                                   //Value = o.ID.ToString(),
                                                   Text = o.Province
                                                };
         IEnumerable<SelectListItem> ddlItemCity = from o in db.Fetch<T_CityDate>("Select distinct Province, City from  [T_CityDate] ")
                                                select new SelectListItem
                                                {
                                                   //Value = o.ID.ToString(),
                                                   Text = o.City
                                                };
         ViewBag.Country = ddlItemCountry;
         ViewBag.Province = ddlItemProvince;
         ViewBag.City = ddlItemCity;

         return View();
         //return View();
      }

-------------------------
初学。所以请教改如何编写，才可以实现国家，省，城市三个选项中联动改变

清晓 · 发表于 2014-7-9 08:30:22

View中
@Html.DropDownListFor(r => r.md.Province, new SelectListItem[] { new SelectListItem() { Text = "请选择" } }, new { @id = "drpProvince" })
                        @Html.DropDownListFor(r => r.md.City, new SelectListItem[] { new SelectListItem() { Text = "请选择" } }, new { @id = "drpCity" })
                        @Html.DropDownListFor(r => r.md.District, new SelectListItem[] { new SelectListItem() { Text = "请选择" } }, new { @id = "drpDistrict" })

<script type="text/javascript">
      var p = '@(Model.md == null ? "0" : Model.md.Province)';
      var c = '@(Model.md == null ? "0" : Model.md.City)';
      var d = '@(Model.md == null ? "0" : Model.md.District)';
      function changer1(obj, i) {
         obj.get(0).options.length = 0; //清空
         $("<option></option>").text("请选择").appendTo(obj);
         $.ajax({
            type: 'GET',
            url: '/home/ajax/getcitys/' + i,
            dataType: 'json',
            success: function (data) {
                  var _data = data.Data.d;
                  $.each(_data, function (t, item) {
                     var temp = item.split("_");
                     $("<option></option>").val(temp[0]).text(temp[1]).appendTo(obj);
                  });
                  if (i == p) {
                     $("#drpCity").val(c);
                  }
                  else if (i == c) {
                     $("#drpDistrict ").val(d);
                  }

            }
         });
      }
      $(function () {
         //初始化
         $.ajax({
            type: 'get',
            dataType: 'json',
            url: '/home/ajax/getcitys/1',
            data: { pid: 0 },
            success: function (data) {
                  var _data = data.Data.d;
                  $.each(_data, function (j, item) {
                     var temp = item.split("_");
                     $("<option></option>").val(temp[0]).text(temp[1]).appendTo($("#drpProvince"));
                  });
                  $("#drpProvince").change(function () {
                     changer1($("#drpCity"), $(this).val());
                     if (p == "0") {
                        $("#drpDistrict").get(0).selectedIndex = 0;
                     }
                  });
                  $("#drpCity").change(function () {
                     changer1($("#drpDistrict"), $(this).val());
                  });
                  if (p != "0") {
                     $("#drpProvince ").val(p);
                     changer1($("#drpCity"), p);
                     if (c != "0") {
                        changer1($("#drpDistrict"), c);
                     }
                  }
            }
         });

         $("#btnSava").click(function () {
            if ($("#txtName").val().length < 1) {
                  alert("收件人不能为空");
                  return false;
            }
            if ($("#txtMobile").val().length < 1) {
                  alert("手机号不能为空");
                  $("#lfPassword").focus();
                  return false;
            }
            return true;
         });

      });
</script>
控制器中

public ActionResult Ajax(string method, string param, FlightContainer data)
      {
         object resultData = null;
         string resultKey = "";

         method = (method + "").ToLower();
         switch (method)
         {
            case "getcitys":
                  {
                     int depth;
                     var list = _webCacheService.getSystemAddresss(param + "", out depth);
                     resultData = new { k = (depth == 1 ? "p" : (depth == 2 ? "c" : "d")), n = depth < 3, d = list };
                     break;
                  }
            default:
                  break;
         }
         return Json(new BasicJsonMessage()
         {
            Result = resultData != null,
            Key = resultKey,
            Data = resultData
         }, JsonRequestBehavior.AllowGet);
      }

scycau · 发表于 2014-7-10 01:12:57

清晓发表于 2014-7-9 08:30
View中
@Html.DropDownListFor(r => r.md.Province, new SelectListItem[] { new SelectListItem() { Tex ...

可以在摆脱你说的详细一点吗？script 中的 Model.md 那里是表示的什么了？
我初学者，希望可以给我说的傻瓜一点。

PS：我的数据库表放在了一个Table中，国家，省，市，三列当中。

scycau · 发表于 2014-7-10 07:14:20

本帖最后由 scycau 于 2014-7-10 07:17 编辑

目前的情况是：
/Account/Register.cshtml 文件中View中：

@Html.DropDownListFor(Model => Model.Country, new SelectListItem[] { new SelectListItem() { Text = "*Country (选择国家)" } }, new { @id = "Contry" })

@Html.DropDownListFor(Model => Model.Province, new SelectListItem[] { new SelectListItem() { Text = "*Province (选择省/区域)" } }, new { @id = "Province" })

@Html.DropDownListFor(Model => Model.City, new SelectListItem[] { new SelectListItem() { Text = "*City (选择城市)" } }, new { @id = "City" })

script:
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
      $(document).ready(function () {
         //根据国家获取省
         $("#Country").change(function () {
            //清空省
            $("#Province").empty();
            //清空城市
            $("#City").empty();
            $.ajax({ url: "/Account/Register?action=Province&Country=" + $("#Country option:selected").attr("value"),
                  success: function (msg) {
                     var list = msg.split(',');
                     for (var index in list) {
                        var item = list[index];
                        $("#Province").append("<option value='" + item + "'>" + item + "</option>")
                     }
                  }
            });
         });
         //根据省获取城市
         $("#Province").change(function () {
            //清空城市
            $("#City").empty();
            $.ajax({
                  url: "/Account/Register?action=City&Province=" + $("#Province option:selected").attr("value"),
                  success: function (msg) {
                     var list = msg.split(',');
                     for (var index in list) {
                        var item = list[index];
                        $("#City").append("<option value='" + item + "'>" + item + "</option>")
                     }
                  }
            });
         });
      });
      //获取国家信息
      $.ajax({
         url: "/Account/Register?action=Country",
         success: function (msg) {
            var list = msg.split(',');
            for (var index in list) {
                  var item = list[index];
                  $("#Country").append("<option value='" + item + "'>" + item + "</option>")
            }
         }
      });
</script>

Contral 中：

  public ActionResult Register()
      {
         string action = Request["action"];
         if (!string.IsNullOrWhiteSpace(action))
         {
            //获取国家信息
            if (action == "Country")
            {
                  var sql = " SELECT DISTINCT Country from T_CityDate";
                  T_Address userlist = T_Address.SingleOrDefault(sql);
                  DataSet dt_country = SqlHelper.ExecuteDataSetText(sql, null);
                  List<string> list = new List<string>();
                  foreach (DataRow item in dt_country.Tables[0].Rows)
                  {
                     list.Add(item["Country"].ToString());
                  }
                  //将List转字以逗号分开的字符串
                  string strcountry = string.Join(",", list);
                  Response.Clear();
                  Response.Write(strcountry);
                  Response.End();
            }
            //获取省信息
            else if (action == "Province")
            {
                  string country = Request["Country"];
                  var sql = " SELECT DISTINCT Province from T_CityDate WHERE Country='" + country + "' ";
                  DataSet dt_Province = SqlHelper.ExecuteDataSetText(sql, null);
                  List<string> list = new List<string>();
                  foreach (DataRow item in dt_Province.Tables[0].Rows)
                  {
                     list.Add(item["Province"].ToString());
                  }
                  //将List转字以逗号分开的字符串
                  string strProvince = string.Join(",", list);
                  Response.Clear();
                  Response.Write(strProvince);
                  Response.End();
            }
            //获取城市信息
            else if (action == "City")
            {
                  string Province = Request["Province"];
                  var sql = "SELECT DISTINCT City from T_CityDate WHERE Province='" + Province + "'";
                  DataSet dt_City = SqlHelper.ExecuteDataSetText(sql, null);
                  List<string> list = new List<string>();
                  foreach (DataRow item in dt_City.Tables[0].Rows)
                  {
                     list.Add(item["City"].ToString());
                  }
                  //将List转字以逗号分开的字符串
                  string strCity = string.Join(",", list);
                  Response.Clear();
                  Response.Write(strCity);
                  Response.End();
            }
         }

         return View();
         //return View();
      }

清晓 · 发表于 2014-7-10 09:01:14

首先，你的数据库结构应该有错。数据库中应该有的字段是，name，id，parentId。你这里我没有看到parentId，那你怎么联动？怎么知道省下面有哪些市?所以数据库的列必须有关联。
数据库有关联之后，写一个方法，根据parentId查询数据。控制器调用这个方法，并返回json数据。
在View中写js如下
function changer1(obj, i) {
         obj.get(0).options.length = 0; //清空
         $("<option></option>").text("请选择").appendTo(obj);
         $.ajax({
            type: 'GET',
            url: '/home/ajax/getcitys/' + i,//这里改成你的根据parentId获取数据的方法
            dataType: 'json',
            success: function (data) {
                  var _data = data.Data.d;
                  $.each(_data, function (t, item) {
                     var temp = item.split("_");
                     $("<option></option>").val(temp[0]).text(temp[1]).appendTo(obj);
                  });
                  if (i == p) {
                     $("#drpCity").val(c);
                  }
                  else if (i == c) {
                     $("#drpDistrict ").val(d);
                  }

            }
         });
      }
      $(function () {
         //初始化
         $.ajax({
            type: 'get',
            dataType: 'json',
            url: '/home/ajax/getcitys/1',//这里改成你的根据parentId获取数据的方法
            data: { pid: 0 },
            success: function (data) {
                  var _data = data.Data.d;
                  $.each(_data, function (j, item) {
                     var temp = item.split("_");
                     $("<option></option>").val(temp[0]).text(temp[1]).appendTo($("#drpProvince"));
                  });
                  $("#drpProvince").change(function () {
                     changer1($("#drpCity"), $(this).val());
                     if (p == "0") {
                        $("#drpDistrict").get(0).selectedIndex = 0;
                     }
                  });
                  $("#drpCity").change(function () {
                     changer1($("#drpDistrict"), $(this).val());
                  });
                  if (p != "0") {
                     $("#drpProvince ").val(p);
                     changer1($("#drpCity"), p);
                     if (c != "0") {
                        changer1($("#drpDistrict"), c);
                     }
                  }
            }
         });

scycau · 发表于 2014-7-11 03:47:46

本帖最后由 scycau 于 2014-7-11 04:11 编辑

清晓发表于 2014-7-10 09:01
首先，你的数据库结构应该有错。数据库中应该有的字段是，name，id，parentId。你这里我没有看到parentId， ...

非常感谢你的帮助，我现在就差最后一点了，现在是读取不了选好后的选项的 ID 值
具体问题是：
3个DropDownListFor 的ID是：
id = "selectCountry"
id = "selectProvince"
id = "selectCity
然后script中：
$("#selectCountry").change(function () {
      $('#selectProvince').empty();
      var Countryid = $("#selectCountry").val();
      $.getJSON("/Account/GetProvince?id=" + Countryid,
               function (data) {
                  $.each(data, function (i, item) {
                     $('<option></option>').val(item.Value).text(item.Text).appendTo($('#selectProvince'));
                  });
               });
});

$("#selectProvince").change(function () {
      $('#selectCity').empty();
      var Pronviceid = $("#selectCountry").val();
      $.getJSON("/Account/GetCity?id=" + Pronviceid,
               function (data) {
                  $.each(data, function (i, item) {
                     $('<option></option>').val(item.Value).text(item.Text).appendTo($('#selectCity'));
                  });
               });
});
-----------------------------
然后，返回的ID怎么弄都是 0 ：
也就是不管怎么选择：
Countryid=0
Pronviceid=0
-----------------------------
别的测试的都挺顺利的，手动改成 Countryid=1，Pronviceid=0=2，都能成功相应的联动改变。
就是不知道，为啥返回的ID永远是0.改成：
var Countryid = $(this).val();
$.getJSON("/Account/GetProvince/" + Countryid,
也都不行

清晓 · 发表于 2014-7-11 13:44:06

你试一下先aler( $(this).val());再var Countryid = $(this).val();
$.getJSON("/Account/GetProvince/" + Countryid,
如果这样能获取到id的话，你的change事件就必须写在callback 里面。
原因是，你的数据还没有返回，但是js已经执行完了。

scycau · 发表于 2014-7-15 19:40:25

清晓发表于 2014-7-11 13:44
你试一下先aler( $(this).val());再var Countryid = $(this).val();
$.getJSON("/Account/GetProvince/" + ...

我一直找不到怎么吧把金币给你的地方~：（

		自动登录	找回密码
密码			马上注册

[其他] 请教三个 DropDownListFor 不刷新页面联动改变 的实现。

[其他] 请教三个 DropDownListFor 不刷新页面联动改变的实现。