MVC 联动 dropdowlist

来源：互联网发布：免费云数据库mysql 编辑：程序博客网时间：2024/05/01 12:27

前台：

@using (Html.BeginForm("AddressPost", "Address", FormMethod.Post, new { name = "frmAddressMgr", id = "frmAddressMgr" }))
{
<div>
收货地址   您已创建?个收货地址，最多可创建5个
<div>
    
</div>
<div>
    
      添加收货地址
      <hr/>
      <table>
          <tr>
              <td>收货人:</td><td>@Html.TextBox("Receiver", Model.Receiver, new { @class="validate[required]"})<font color="red">*</font></td>
          </tr>
          <tr>
              <td>地区:</td><td>@Html.DropDownList("provincesDDlItems")<font color="red">*</font> <select id="ddlCity" /></td>
          </tr>
          <tr>
              <td>详细地址:</td><td>@Html.TextBox("DetailAddress",Model.DetailAddress,new { @class="validate[required]"})<font color="red">*</font></td>
          </tr>
          <tr>
              <td>手机:</td><td>@Html.TextBox("Phone",Model.Phone)</td> <td>座机:</td><td>@Html.TextBox("LandLineAreaCode",Model.LandLineAreaCode)</td><td>-</td><td>@Html.TextBox("LandLine",Model.LandLine)手机和座机至少填写一个</td>
          </tr>
           <tr>
              <td>电子邮箱:</td><td>@Html.TextBox("DetailAddress",Model.DetailAddress,new { @class="validate[required,custom[email]]"})<font color="red">*</font>用于接收订单状态信息</td>
          </tr>
      </table>
      <div>
          <input type="button" id="btnAdd" value="添加这个地址" />
      </div>
</div>
</div>
<script type="text/javascript">
        $(function () {
            $("#frmAddressMgr").validationEngine();

            $("#btnAdd").click(function () {
                $('#frmAddressMgr').submit();
            });
        });

        $("#provincesDDlItems").change(function () {
            var provinceSelected = $("#provincesDDlItems").val();
            $("#ddlCity").get(0).options.length = 0;
            //$.post("/Address/GetCitys/" + provinceSelected, { 'province': provinceSelected }, function (data) {
            //    alert("getJson!");
            //    $.each(data, function (i, item) {
            //        $("<option></option>").val(item["CityID"]).text(item["CityName"]).appendTo($("#provincesDDlItems"));
            //    });
            //}); （以后千万不要用这种方式，这种方式永远看不到错误信息！）

            $.ajax({
                type: 'POST',
                url: '/Address/GetCitys/' + provinceSelected,
                data : { 'provinceId': provinceSelected },
                success: function (data) {
                    debugger;
                    $.each(data, function (i, item) {
                        $("<option></option>").val(item["CityID"]).text(item["CityName"]).appendTo($("#ddlCity"));
                    });
                },
                error: function (data) {
                    alert(data.responseText);
                }

});

</script>
}

后台代码：

public ActionResult GetCitys() {
            if (Request.IsAjaxRequest())
            {
                IList<Hashtable> citysList = this.userAddressBO.GetCitys<Hashtable>(int.Parse(Request.Form["provinceId"]));
                return Json(citysList);
            }
            else {
                return View("");
            }
        }

错误场景 public ActionResult GetCitys(int provinceId)

一个参数，导致前台ajax提交没有任何反应！以后一定要多加一个error回调监测，才是专业的表现。

0 0