jquery学习笔记-jquery实现无刷新联动

以前做联动使用asp.net ajax控件做的，使用了webservice感觉挺麻烦。发现jquery很方便。

 

首先在页面引入jquery.js。文字描述太麻烦了。。直接贴关键代码吧。

 

1. <script language="javascript">
2. $(document).ready(function(){
3. //
4. $("#ddlDepartment").change(function(){ 
5. $("#Projects").load("GetProject.aspx?id="+$("#ddlDepartment").val()); 
6. });
7. ///
8. })
9. </script>

 

这是aspx页面中需要联动的两个控件

1. <tr>
2.                             <td style="width: 150px; height:30px;">
3.                                 部门：</td>
4.                             <td style="width: 249px; height: 30px;" align="left">
5.                           
6.                                 <asp:DropDownList ID="ddlDepartment" runat="server" Width="163px">
7.                                 </asp:DropDownList>
8.                                
9.                                 </td>
10.                             <td style="width: 150px; height: 30px;">
11.                                 项目名称：</td>
12.                             <td style="height: 30px; width: 221px;" align="left">  
13.                             
14.                             <span id="Projects">
15.                                 <select id="ddlProject" name="ddlProject" style="width: 86px">
16.                                     <option selected="selected" value="0">请选择 </option>
17.                                 </select> </span>
18.                             </td>
19.                         </tr>

 

后台绑定部门下拉框的代码如下：

 

1.  private void BindDepartment()
2.         {
3.             DataTable dt=new JDOA.Content.DepartMent().GetMasterDepartMent();
4.             DataRow dr = dt.NewRow();
5.             dr["ID"] = 0;
6.             dr["Name"] = "请选择";
7.             dt.Rows.InsertAt(dr,0);
8.             this.ddlDepartment.DataValueField = "ID";
9.             this.ddlDepartment.DataTextField = "Name";
10.             this.ddlDepartment.DataSource = dt.DefaultView;
11.             this.ddlDepartment.DataBind();
12.            // ddlDepartment.Items.Insert(0, new ListItem("请选择 ", "-1"));
13.         }

GetProject.aspx页面直接在cs文件写一下代码：

 

1.  protected void Page_Load(object sender, EventArgs e)
2.         {
3.             if (!IsPostBack)
4.             {
5.                 if (Request.QueryString["id"]!=null)
6.                 {
7.                     CreateProjectList(int.Parse(Request.QueryString["id"].ToString()));
8.                 }
9.             }
10.         }
11.         private void Page_Init(object sender, EventArgs e)
12.         {
13.             Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache);
14.             Response.Cache.SetNoStore();
15.         }
16.         public void CreateProjectList(int id)
17.         {
18.             DataTable dt = new JDOA.Content.Project().ProjectDList(id);
19.             string strHtml = string.Empty; 
20.             strHtml = "<select name='ddlProject' id='ddlProject'>";
21.             strHtml += "<option value='0' selected>请选择</option>";
22.             if (dt.Rows.Count > 0)
23.             {
24.                 for (int i = 0; i < dt.Rows.Count; i++)
25.                 {
26.                     strHtml += "<option value='" + dt.Rows[i]["ID"].ToString() + "'>" + dt.Rows[i]["ProjectName"].ToString() + "</option>";
27.                 }
28.             }
29.             strHtml += "</select>";
30.             Response.Write(strHtml);
31.            Response.End();
32.         }

至此就完成了 联动。。

 

我来稍微的解释下吧。虽然可能我也解释不清楚。首先是对因为做的部门和项目之间的联动。即选择部门之后得到属于这个部门的项目列表。 关键的就是一开始的js代码 意思就是在span区域内添加GetProject.aspx执行之后输出的代码。呵呵。。