asp.net实现页面无刷新效果

最新推荐文章于 2018-05-22 10:29:00 发布

weixin_30783913

最新推荐文章于 2018-05-22 10:29:00 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/you000/archive/2012/12/10/2812212.html

本文介绍如何在ASP.NET中实现下拉框的二级联动功能，并保持页面无刷新。通过使用JavaScript和ASP.NET的回调机制，当用户选择一级下拉框时，二级下拉框会动态更新选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下拉框二级联动，页面无刷新

A. (aspx)

    <asp:DropDownList ID="DropDownList1" runat="server" Height="16px" 
        onchange="getChildren(this.options[this.selectedIndex].value, 'ddl');"  Width="139px">
        <asp:ListItem Value="0">请选择</asp:ListItem>
        <asp:ListItem Value="BJ">北京</asp:ListItem>
        <asp:ListItem Value="TJ">天津</asp:ListItem>
        <asp:ListItem Value="HB">湖北</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="ChildDropDown" runat="server" Width="60">
    </asp:DropDownList>
    </p>
 <script language="javascript"> 
     function ClientCallback(result, context) { 
         var childDropDown = document.getElementById("MainContent_ChildDropDown"); 
         if (!childDropDown) {
             return;
         } 
         childDropDown.length = 0; 
         if (!result) {
             return;
         } 
         var rows = result.split('|');
         for (var i = 0; i < rows.length; ++i) {
             var option = document.createElement("OPTION");
             option.value = rows[i];
             option.innerHTML = rows[i];
             childDropDown.appendChild(option);
         } 
         childDropDown.style.visibility = "visible";
     }

     function ClientCallbackError(result, context) {
         alert(result);
     } 
   </script>

B.(cs 文件)

1. 实现ICallbackEventHandler 接口

2.向客户端注册回传方法
protected void Page_Load(object sender, EventArgs e)
{
   //向客户端注册事件 ClientCallback，ClientCallbackError 前台页面实现的JavaScript方法
   string callBack = Page.ClientScript.GetCallbackEventReference(this, "arg", "ClientCallback", "context", "ClientCallError", false);
   string clientFunction = "function getChildren(arg,context){"+callBack+";};";
   Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"getChildren",clientFunction,true);
}
//3.实现接口两个方法
string callBackResult = "";
public string GetCallbackResult()
{
   return callBackResult;
}
     
public void RaiseCallbackEvent(string eventArgument)
{ 
   switch (eventArgument)
   { 
        case "BJ":
             callBackResult = "One|Two|Three";
             break;
        case "TJ":
             callBackResult = "Four|Five|Six";
             break;
        case "HB":
             callBackResult = "Seven|Eight|Nine";
              break;
        default :
             callBackResult = "";
             break;
  }
}