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 为空的话，程序是会报错的，这里要进行一些相关的处理。其他的……至此，工作完成