AJAX PRO 实例应用 DropDownList 联动

本文展示了使用AJAX技术实现后台与前台交互,具体应用是在DropDownList控件中实现联动效果。通过C#后台代码处理数据,并利用JavaScript进行前端动态更新。

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

先贴上,以后写详细注解。

 

后台代码:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Microsoft.Practices.EnterpriseLibrary.Data;

public partial class ajaxtest : System.Web.UI.Page
{
    
private static Database db = DatabaseFactory.CreateDatabase("mkstaffConn");
    
private string sqlcommand = string.Empty;
    
protected void Page_Load(object sender, EventArgs e)
    
{
        AjaxPro.Utility.RegisterTypeForAjax(
typeof(ajaxtest));

        
if (!Page.IsPostBack)
        
{
            SystemName();
            TeamList.DataSource 
= TeamName(SystemList.SelectedValue.Trim());
            TeamList.DataTextField 
= "name";
            TeamList.DataValueField 
= "name";
            TeamList.DataBind();         
            SystemList.Attributes.Add(
"onchange""GetTeamList();");
        }

    }

   
    
private void SystemName()
    
{
        
try
        
{
            sqlcommand 
= "SELECT DISTINCT system FROM MKTeam";
            SystemList.DataSource 
= db.ExecuteDataSet(CommandType.Text, sqlcommand).Tables[0];
            SystemList.DataTextField 
= "system";
            SystemList.DataValueField 
= "system";
            SystemList.DataBind();
        }

        
catch
        

        }

    }


    [AjaxPro.AjaxMethod]
    
/// <summary>
    
/// ajax调用方法
    
/// </summary>
    
/// <param name="systemselectname"></param>

    public DataTable TeamName(string systemselectname)
    
{
        
try
        
{
            sqlcommand 
= "select name from mkteam where system='" + systemselectname + "'";
            
return db.ExecuteDataSet(CommandType.Text, sqlcommand).Tables[0];
        }

        
catch
        
{
            
return null;
        }

    }

}
 

前台代码:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxtest.aspx.cs" Inherits="ajaxtest" %>

<!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 runat="server">
    
<title>无标题页</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function GetTeamList()
{
    var System
=document.getElementById("SystemList");
    ajaxtest.TeamName(System.value,TeamCallBack);

}


function TeamCallBack(response)
{
    
if(response.value !=null)
    
{
        var team
=document.getElementById("TeamList");
        var dt
=response.value;
        team.length
=0;
        
for(var i=0;i<dt.Rows.length;i++)
        
{
            var team_text
=dt.Rows[i]["name"];
            var team_value
=dt.Rows[i]["name"];
            team.options.add(
new Option(team_text,team_value));     
        }

        
    }
   
}


// ]]>
</script>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        
<asp:DropDownList ID="SystemList" runat="server" Width="120px">
        
</asp:DropDownList>
        
<asp:DropDownList ID="TeamList" runat="server" Width="120px">
        
</asp:DropDownList></div>
    
</form>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值