Ajax三级联动调用aspx后台方法
Test.aspx页面的Html代码 <div>
<asp:DropDownList ID="ddlInpatientArea" runat="server">
</asp:DropDownList>
</div>
<div>
<select name="ddlWard" id="ddlWard"></select>
</div>
<div>
<select name="ddlSickbed" id="ddlSickbed"></select>
</div>
<asp:Button Text="text" ID="btAdd" OnClick="btAdd_Click" runat="server" />
Jquery代码 <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var area = $("#ddlInpatientArea");
var ward = $("#ddlWard");
var sickbed = $("#ddlSickbed");
area.bind("change keyup",function () {
if (area.val().length > 0) {
loadWard(area.val());
ward.fadeIn("slow");
if (ward.val().length > 0) {
LoadSickbed(ward.val());
sickbed.fadeIn("slow");
} else {
sickbed.fadeOut("slow");
}
} else {
sickbed.fadeOut("slow");
}
});
ward.bind("change keyup",function () {
if (ward.val().length > 0) {
LoadSickbed(ward.val());
sickbed.fadeIn("slow");
} else {
sickbed.fadeOut("slow");
}
});
//第一次加载时，先执行一次change事件，初始病房、病床
area.trigger("change");
});
//加载病房
function loadWard(selectedItem) {
$.ajax({
type: "POST",url: window.location + "/LoadWard",//url格式为 要访问的aspx页面/方法名称
data: "{id: " + selectedItem + "}",contentType: "application/json; charset=utf-8",dataType: "json",async: false,//设置为同步
success: function (data) {
//alert(data.d);
showWard(data.d);
}
});
}
function showWard(data) {
$("select[name$=ddlWard] > option").remove();
for (var i = 0; i < data.length; i++) {
$("select[name$=ddlWard]").append($("<option></option>").val(data[i].ID).html(data[i].WardName));
}
}
//加载病床
function LoadSickbed(selectedItem) {
$.ajax({
type: "POST",url: window.location + "/LoadSickbed",data: "{id: " + selectedItem + "}",success: function (data) {
//alert(data.d);
showSickbed(data.d);
}
});
}
function showSickbed(data) {
$("select[name$=ddlSickbed] > option").remove();
for (var i = 0; i < data.length; i++) {
$("select[name$=ddlSickbed]").append($("<option></option>").val(data[i].SickbedNo).html(data[i].SickbedNo));
alert($("select[name$=ddlSickbed]").html());
}
}
</script>
Test.aspx.cs页面的后台方法
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender,EventArgs e)
{
if (!IsPostBack)
{
BindInpatientArea();
}
}
#region 绑定病区信息 -void BindInpatientArea()
/// <summary>
/// 绑定病区信息
/// </summary>
private void BindInpatientArea()
{
ddlInpatientArea.DataSource = new ZHBQ.BLL.InpatientArea().GetAll();
ddlInpatientArea.DataTextField = "InpatientAreaName";
ddlInpatientArea.DataValueField = "ID";
ddlInpatientArea.DataBind();
}
#endregion
#region 根据病区Id加载相应病房 +static List<WardInfo> LoadWard(int id)
/// <summary>
/// 根据病区Id加载相应病房
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[WebMethod]
public static List<WardInfo> LoadWard(int id)
{
ZHBQ.BLL.Ward bll = new Ward();
List<WardInfo> list = bll.GetWardByAreaId(id);
return list;
}
#endregion
#region 根据病房Id绑定可用的病床 +static List<SickbedInfo> LoadSickbed(int id)
/// <summary>
/// 根据病房Id绑定可用的病床
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[WebMethod]
public static List<SickbedInfo> LoadSickbed(int id)
{
ZHBQ.BLL.Sickbed bll = new Sickbed();
List<SickbedInfo> list = bll.GetAvaiableSkitbedByWardId(id);
if (list == null)
{
list = new List<SickbedInfo>();
SickbedInfo model = new SickbedInfo();
model.ID = 0;
model.SickbedNo = "暂无病床";
list.Add(model);
}
return list;
}
#endregion
protected void btAdd_Click(object sender,EventArgs e)
{
}
}
可能遇到的问题1：如果html页面中，后两个下拉框使用的是服务器端控件DropDownList，在点击按钮提交时，会出现以下错误：
我们先看提示在配置中使用 <pages enableEventValidation="true"/> 或在页面中使用 <%@ Page EnableEventValidation="true" %> 启用了事件验证 这句话说我们设置了 enableEventValidation 属性，设置的值为 true,也就是启用了事件验证，那是不是也可以禁用该事件呢？将enableEventValidation 属性设置为 false 后再运行程序,会发现错误没有了，那是不是问题就解决了呢？ 可能有的人设置false后问题解决了，可能有的人设置false之后，该问题解决了却引发了连带问题。事件验证 又是怎么一回事呢？ MSDN的说明是：
出现此类错误的Case有以下几种： 1.From的嵌套集解决方法
2.if(!this.Page.IsPostBack)
3.级联菜单
4.是 DropDownList 控件的ListItem 的Value 属性 包含汉字.只要将Value 改为英文或数字的就行了。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |