小弟我最近在学习asp.net,在试图操作dropdownlist进行省市联动无刷新时,遇到了问题,请各位给予帮助,不胜感激。
这是dropdownlist所在的页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="addscenic.aspx.cs" Inherits="content_scenic_addscenic" ValidateRequest="false" EnableEventValidation="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript" src="../../editor/ckeditor.js"></script>
<title></title>
<style type="text/css">
.w270px {}
#Select1{width: 116px;}
</style>
<script language="javascript" type="text/javascript">
// <![CDATA[
var xmlHttp;
function alert1() {
alert("HelloWorld!");
}
function Sce_Pic_Url_onclick() {
document.getElementById("Sce_Pic").src = "http\:\\manage.gonwo.com/img/imageforscenic/" + document.getElementById("Sce_Pic_Url").value;
}
function getxmlHttpRequest() {
var xmlHttp;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
function StateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var xmlResult = xmlHttp.responseText;
document.getElementById("City_List").length = 0;
if (xmlResult != null) {
var cityArray = xmlResult.split(',');
for (var i = 1; i < cityArray.length; i++) {
var thisCity = cityArray[i].split('|');
var name = thisCity[1].toString();
var id = thisCity[0].toString();
document.getElementById("City_List").options.add(new Option(name, id));
}
}
}
else
alert("Problem retrieving XML data");
}
}
function ProvinceChange() {
xmlHttp = getxmlHttpRequest();
if (xmlHttp != null) {
var svalue = document.getElementById("Province_List").value;
var weburl = "getCityList.aspx?province_id=" + svalue;
xmlHttp.open("POST", weburl, false);
xmlHttp.onreadystatechange = StateChange();
xmlHttp.send("");
}
}
// ]]>
</script>
</head>
<body>
<form id="pageform" runat="server">
<div class="rim">
<div class="content">
<ul class="subnav">
<li>景区添加<span class="red"> </span></li>
</ul>
<div class="explanation">
<div id="message" class="success" runat="server">
</div>
<div id="spec" runat="server">
<table cellpadding="0" cellspacing="0" class="input_table">
<tbody>
<tr>
<td class="tab_title">
<img src="/img/icons/help.gif" align="absmiddle" />所在省份<div class="tips hide">
所添加的景区所在的省份</div>
</td>
<td>
<asp:DropDownList ID="Province_List" AppendDataBoundItems="true" CssClass="dropdownlist" runat="server" AutoPostBack="True" >
<asp:ListItem Text="选择所在省份" Value="-1" />
</asp:DropDownList>
<span class="red">*</span></td>
</tr>
<tr>
<td class="tab_title">
<img src="/img/icons/help.gif" align="absmiddle" />所属城市<div class="tips hide">
所添加的景区所属的城市</div>
</td>
<td>
<span class="red">
<asp:DropDownList ID="City_List" runat="server" AppendDataBoundItems="true"
CssClass="dropdownlist">
<asp:ListItem Text="选择所在城市" Value="-1" />
</asp:DropDownList>
<span class="red">*</span>
</span>
<select id="Select_City" name="city">
<option>请选择城市</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/input.js" type="text/javascript"></script>
</form>
</body>
</html>
然后我在相应的cs文件中的page_load部分写了以下内容
Province_List.Attributes.Add("onchange", "ProvinceChange()");
if (!IsPostBack)
DataBind();
在另外的被请求页面,我放置了一个空页面,它的page_load部分如下:
string state = this.Request["province_id"].ToString();
string citylist = "";
Response.Clear();
CityBLL cityBLL = new CityBLL();
IList<Filter> conditions_city = new List<Filter>();
conditions_city.Add(new Filter(City._Pro_Id, state, ComparisonOperators.Equal));
IList<City> _city = cityBLL.GetList(LogicType.And, conditions_city);
for (int i = 0; i < _city.Count; i++)
{
citylist += "," + _city[i].City_Id.ToString() + "|" + _city[i].City_Name.ToString();
}
Response.Write(citylist);
Response.Flush();
Response.Close();
在执行的时候,我能够从服务器获取数据库的内容,也能够把某个省的城市绑定到相应的dropdownlist中。但是我发现,每次单击Province_List触发对City_List的绑定操作后
City_List中先是出现了被绑定的内容,然后页面很快被刷新,City_List也被清空了。这个问题困扰了我好久,希望各位能帮我一下,谢谢啦!
你想让他不刷新,你用updatePanal啊,可以避免他刷新了。他为什么会被清空啊,不需要这么麻烦吧
你这个是用的ajax 的方式,asp.net中的控件服务器端生成 自己的 对象元素,而输出的html只是用于展示,脚本处理select 控件内容删除,添加元素后提交;asp.net会以服务器对象元素为准...这个时候 你用脚本动态添加,删除的元素是不起作用的;.net 机制如此无法改变;
解决方法一:你可以 用脚本处理完毕之后,将结果值放入text控件隐藏域中...然后在后台获取 text控件值 作为选择的DropdownList选择值;
解决方法二:你可以 继续用ajax的方式 post 提交数据。不要通过.net 的submit机制。