AJAX动态无刷新绑定

项目中客户想要达到这样的效果，请教了同事之后作出的。虽然对于Ajax还不熟悉，暂时存放在这儿，以备学习Ajax后查看。原理慢慢搞清楚。

根据是否是KPI，动态绑定不同的数据源。在这里是有一个KPI的过滤。radiobutton用的是input type="radio" name="kpiAll" id="checkKPI" value="true" checked="checked" />KPI <input type="radio" name="kpiALL" id="checkKpiAll" value="false" />ALL. 绑定到弹出层中，也是用<input type="checkbox" name="case1"/>接收的，case1的checkbox的定义是在GetCase.aspx.cs后台动态生成的。效果图如下：

 

在KPI和ALL切换时候，只刷新对应的绑定Case部分，其他部分无刷新。不会影响页面的其他选择（或者说会保持其他条件选项）。

                   
      
 
       
     
             
        
     
        
     
        
           
         KPI           
         ALL      
        
 
       
 
      
  

 

 新建一个WebForm.aspx,命名GetCase.aspx. 在后台代码中绑定数据源。代码如下：

1 protected void Page_Load(object sender, EventArgs e)  2 {
     3       CaseBLL caseBLL = new CaseBLL();  4       DataTable dtCase = new DataTable();  5  6       string checkAll = string.Empty;  7       if (Request.QueryString["Flag"] != null)  8       {
     9             checkAll = Request.QueryString["Flag"].ToString(); 10       } 11 12       if (checkAll == "All") 13       {
    14             dtCase = caseBLL.BindCaseByType(1);//ALL Case 15 16       } 17       else if (checkAll == "kpi") 18       {
    19              dtCase = caseBLL.BindCaseByType(1, true);//KPI Case 20       } 21       else 22       {
    23              dtCase = caseBLL.BindCaseByType(1, true);//KPI Case 24       } 25 26 27       StringBuilder sb = new StringBuilder(); 28       sb.Append("ALL
"); 29      for (int i = 0; i < dtCase.Rows.Count; i++) 30      {
    31            sb.Append("" + dtCase.Rows[i]["CaseName"] + "
"); 32      } 33 34      Response.Write(sb); 35      Response.End(); 36 }

 

Javascript中，data.js引用Ajax：

$(function() {
        $.ajax({
            type:"POST",         url:"GetCase.aspx",         success:function(msg){            $("#divBoxCase").html(msg);         }     });     $("#checkKpiAll").bind('click',function()     {
    if($("#checkKpiAll").attr("checked")==true)         {
                $.ajax({
                type: "POST",             url: "GetCase.aspx?Flag=All",             success: function(msg) {
                    $("#divBoxCase").html(msg);                 }             });         }     });     $("#checkKPI").bind('click',function()     {
    if($("#checkKPI").attr("checked")==true)         {
                 $.ajax({
                     type: "POST",                  url: "GetCase.aspx?Flag=kpi",                  success: function(msg) {
                         $("#divBoxCase").html(msg);                   }              });         }     });     $("#divBoxCase").mouseleave(function() {
    var selectRoleID = ""; var aa=document.getElementsByName('case1');         $("input[name='All31']").each( function() {
    if ($(this).attr('checked') == 'checked') {
    for(var i=0; i