1)html代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuerySyncDemo._Default" %>
<!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" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
var $class = $("#dropClass");
var $student = $("#dropStudent");
$class.bind("change keyup", function() {//当改变class时触犯事件
if ($(this).val() != 0) {
var classId = $(this).val(); //获取班级编号
loadStudents(classId); //根据班级编号显示学生信息
$student.fadeIn("slow"); //显示学生信息
}
else {
$student.fadeOut("slow");//影藏学生信息
}
});
});
//根据班级编号获取学生信息
function loadStudents(classId) {
$.ajax({
type: "POST",
url: "Default.aspx/GetStudentsByClassId",
data: "{classId: " + classId + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function Success(data) {
printStudents(data.d);
}
});
}
//显示学生信息
function printStudents(data) {
$("#dropStudent > option").remove();
for (var i = 0; i < data.length; i++) {
$("#dropStudent").append($("<option></option>").val(data[i].Id).html(data[i].Name));
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="dropClass" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="dropStudent" runat="server">
</asp:DropDownList>
</div>
</form>
</body>
</html>
2)后台代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace JQuerySyncDemo
{
public partial class _Default : System.Web.UI.Page
{
private static Class c=new Class();
private static Student s=new Student();
protected void Page_Load(object sender, EventArgs e)
{
c.SetClass();//添加班级信息
s.SetStudent();//添加学生信息
if (!IsPostBack)
{
BindClass();
}
}
/// <summary>
/// 绑定班级信息
/// </summary>
private void BindClass()
{
dropClass.DataSource = c.GetClass();
dropClass.DataTextField = "Name";
dropClass.DataValueField = "Id";
dropClass.DataBind();
}
/// <summary>
/// 根据班级编号获取学生信息
/// </summary>
/// <param name="classId"></param>
/// <returns></returns>
[WebMethod]
public static IEnumerable<Student> GetStudentsByClassId(int classId)
{
return s.GetStudent(classId);
}
}
}
3) 班级实体类:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace JQuerySyncDemo
{
public class Class
{
private List<Class> items = null;
public Class() { }
public Class(int id, string name)
{
this.Id = id;
this.Name = name;
}
private int id;
public int Id
{
get { return id; }
set { id = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
/// <summary>
/// 添加班级信息
/// </summary>
public void SetClass()
{
items = new List<Class>();
items.Add(new Class(1, "一班"));
items.Add(new Class(2, "二班"));
items.Add(new Class(3, "三班"));
items.Add(new Class(4, "四班"));
}
/// <summary>
/// 获取班级信息
/// </summary>
/// <returns></returns>
public List<Class> GetClass()
{
return items;
}
}
}
4)学生实体类:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace JQuerySyncDemo
{
public class Student
{
private List<Student> items = null;
public Student(){}
public Student(int id,string name,int classId) {
this.Id = id;
this.Name = name;
this.ClassId = classId;
}
private int id;
public int Id
{
get { return id; }
set { id = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private int classId;
public int ClassId
{
get { return classId; }
set { classId = value; }
}
/// <summary>
/// 添加学生信息
/// </summary>
public void SetStudent()
{
items = new List<Student>();
items.Add(new Student(1, "张1", 1));
items.Add(new Student(2, "李2", 1));
items.Add(new Student(3, "王3", 2));
items.Add(new Student(4, "李4", 2));
items.Add(new Student(5, "王5", 3));
items.Add(new Student(6, "李6", 3));
items.Add(new Student(7, "张7", 4));
items.Add(new Student(8, "李8", 4));
}
/// <summary>
/// 获取学生信息
/// </summary>
/// <returns></returns>
public IEnumerable<Student> GetStudent(int classId)
{
IEnumerable<Student> students = items.Where(u => u.classId == classId);
return students;
}
}
}