MVC2 与 JQuery 的 Ajax 实现局部刷新的问题

目标：两个DropDownList 控件，DDL1，DDL2。实现DDL1 选择后，根据选定值到数据库查询数据，返回并绑定到DDL2。

实现：JQuery中的$.Ajax方法以及MVC中的PartialView控件

具体：

首先MVC视图上的数据，都通过一个数据模型进行格式化存储

namespace ES.DataModels{    public class ListSearchModels    {        /// <summary>        /// 客户ID        /// </summary>                public int CustomerID { get; set; }        /// <summary>        /// 主叫电话号码        /// </summary>        public string PhoneNumber { get; set; }              /// <summary>        /// 客户下拉选择器的 SelectListItem        /// </summary>        public List<SelectListItem> CustomerSelectList { get; set; }        /// <summary>        /// 电话号码下拉选择器        /// </summary>        public List<SelectListItem> PhoneSelectList { get; set; }    }    }

在主视图定义以下两个DDL控件，分别是：

客户列表的下拉控件

<%: Html.DropDownListFor(x => x.CustomerID, this.Model.CustomerSelectList, "-请选择公司-")%> 

客户电话号码的下拉控件（PartialView）

<% Html.RenderPartial("GetPhoneNumberList"); %>

并且绑定一个OnChange事件到客户列表

<script language="javascript" type="text/javascript">         $(document).ready(function () {             $("#CustomerID").change(function () {                 GetPhoneNumber('<%=Url.Action("GetPhoneNumberList","Data") %>');             });         });</script>

在这里有个问题，本来是可以直接在 Html.DropDownListFor上进行绑定，如：

<%: Html.DropDownListFor(x => x.CustomerID, this.Model.CustomerSelectList, "-请选择公司-", new { onChange(Parameter)})%>

但因为要将<%=Url.Action("<%=Url.Action("GetPhoneNumberList","Data") %>作为参数传递给JS，而<%=Url.A..%>跟外部的<%: Html.D...%>产生冲突，所以只好用JQuery加载绑定

定义<% Html.RenderPartial("GetPhoneNumberList"); %>这个用户控件的Action：

 

#region GetPhoneNumberList：根据客户下拉框选择项读取该用户号码 | Eason.L / 2011.08.21        /// <summary>        /// 根据客户下拉框选择项读取该用户号码        /// </summary>        /// <param name="CustomerID"></param>        /// <returns></returns>        public PartialViewResult GetPhoneNumberList(string CustomerID)        {            // 自定义的数据库操作类            CustomerDataControl CustomerDataDAL = new CustomerDataControl();            // 根据客户ID查询该客户的所有电话号码            List<string> CustomerNumbers = CustomerDataDAL.GetCustomerNumberList(Convert.ToInt32(CustomerID));            // 新建一个 SelectListItem List 来进行转换            List<SelectListItem> TempSelectListItem = new List<SelectListItem>();            ListSearchModels PartialModels = new ListSearchModels();            if (CustomerNumbers != null)            {                PartialModels.PhoneNumber = "PhoneNumberList";                foreach (var item in CustomerNumbers)                {                    TempSelectListItem.Add(new SelectListItem { Value = item.ToString(), Text = item.ToString() });                }                PartialModels.PhoneSelectList = TempSelectListItem; // 数据填入页面的数据模型对应的List            }            // 返回PartialView            return PartialView("GetPhoneNumberList", PartialModels);        }#endregion

 根据这个Action，生成一个用户控件GetPhoneNumberList.ascx，其实只有一个下拉控件，跟对应字段绑定

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ES.DataModels.ListSearchModels>" %><%=Html.DropDownListFor(x=>x.PhoneNumber,this.Model.PhoneSelectList) %>

MVC部分功能完成，接下来用JQuery实现Ajax调用：

function GetPhoneNumber(action) {    var SelectCustomerID = $("#CustomerID").val();      $.ajax({        url: action,        type: "POST",        data: { "CustomerID": SelectCustomerID },        dataType: "html",        success: function (data) {            $("#PhoneNumber").html(data);        }    });}

（这里存在一个问题尚未解决，就是采用$("#PhoneNumber").html(data);  更新页面的时候，IE浏览器是无效的，查了资料，说是IE对这个方法不支持所导致的，但即使改为document.getElementby("PhoneNumber").innerhtml = data;这样的JavaScript原生代码也还是不行，如果有解决方案的盆友，请指导一下，谢谢。）

这里要注意的地方是：action 和 dataType  两个参数

action就是要异步调用的页面或MVC中的某个Action，我们是通过<%=Url.Action("&lt;%=Url.Action("GetPhoneNumberList") %>将完整的GetPhoneNumberList这个Action的路径传进来。

dataType使用的是html，否则success部分的回调无法执行。

如果GetPhoneNumberList这个Action用的不是PartialViewResult的类型，而是采用JsonResult类型回传Json数据的话，那么这里的dataType要用"json"

最后，要注意的是，如果返回的 CustomerSelectList 为空的话，程序是会报错的，这里要进行一些相关的处理。其他的……至此，工作完成