WebForm使用JQuery实现DropDownList无刷新联动

目录(?)[-]

原来用的微软封装的Ajax控件UpdatePannel和ScriptManager去实现无刷新联动，但一直出现意料之外的现象导致不正常联动。单独的做demo就没事，放到系统中就出问题，经过调试之后仍然不解。条条大路通罗马，还不信能被憋死了。众所周知，JQuery封装了Ajax，调用起来比原生的Ajax要好用的多，实现异步刷新当然也更一些了，虽然功能简单，直接看代码：

1. JS代码：

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"> <script type="text/javascript" language="javascript">
$(function () {
//利用dropdownlist的change事件
$("#hbKeyWordsType").change(function () {
//获取关键字类型
var keyType = $("#hbKeyWordsType").val();
$.ajax({
url: "WxKeywords_WxMessageFunOperation.aspx/hbKeyWordsType_SelectedIndexChanged", //调用后台方法：页面/方法名
type: "post",
data: "{typeCode:" + keyType + "}", //给后台传递数据，参数名必须跟方法的参数名一致
contentType: "application/json;charset=uft-8",
success: function (dataJson) {
$("#hbKeysName").empty(); //清除关键字下拉框中原来存在的数据
var strNames = eval(dataJson.d); //必须加.d，否则无法解析。不太清除原因，通过调试发现存在，但代码中智能提示中却没有d
for (var i = 0; i < strNames.length; i++) {
$("#hbKeysName").append($("<option value='" + strNames[i].Code + "'>" + strNames[i].Keywords + "</option>")); //这个添加关键字
}
},
Error: function () {
alert("服务器错误，请联系管理员!");
}
});
});
});
</script>
</span></span>

2. 页面相关控件（用的是平台封装的控件，普通DropDownList也可以）

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><td class="fieldtitle">
关键字类型
</td>
<td class="fieldvalue">
<SOA:HBDropDownList runat="server" ID="hbKeyWordsType" />
</td>
<td class="fieldtitle">
关键字名称
</td>
<td class="fieldvalue">
<SOA:HBDropDownList runat="server" ID="hbKeysName" />
</td></span></span>

3. 后台C#代码

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"> [WebMethod] //用于前台Jquery的调用
public static string hbKeyWordsType_SelectedIndexChanged(string typeCode)
{
//根据选取的关键字类型和公共号编码查找关键字实体集合
string accountCode = WxMessageAdapter.Instance.GetCurrentWxAccountCode();
int keyWordsType =int.Parse(typeCode);
WxKeywordsCollection wxKeyColl = WxKeywords_WxMessageAdapter.Instance.LoadByAccAndKeyType(accountCode, keyWordsType);
//使用封装好的JSON序列化的方法返回Json串
string reutnJson=JSONSerializerExecute.Serialize(wxKeyColl);
return reutnJson;
}
</span></span>

注意事项：

1. 前台页面： ①url:"本页面名称/方法名称"; ②必须添加contentType:"application/json;charset=utf-8"; ③dataJson.d通过.d属性来取服务端返回的数据
2. 后台方法： ①方法由[WebMethod]修饰; ②方法必须是公共且静态的方法; ③方法里的参数名称必须与脚本里data的参数名一样，顺序可以不一样

之前dataJson没有添加.d，一直取不到后台返回来的数据，通过调试之后发现其实已经返回来了，只不过是data.d的形式，如下图：

从上图可以看出，dataJson是一个对象，而Eval函数是只能解析字符串的，导致一直取不到值。做这个功能花费了很长时间，虽然最终做出来了，也没多少欣慰，工作中的任务可是不等人的。但，万事开头难，只要上手了，一切都会好起来。