Ajax无刷新数据绑定

最新推荐文章于 2024-04-24 09:22:16 发布

weixin_34001430

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量60

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/eva_2010/archive/2012/01/04/2311629.html

版权

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部分，其他部分无刷新。不会影响页面的其他选择（或者说会保持其他条件选项）。

HTML Source

<html>
<head runat="server">
    <title>BindData without Refresh</title>
    <script src="Theme/JS/jquery.js" type="text/javascript"></script>

    <script src="Theme/JS/data.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" method="post">
<div>
    <asp:TextBox ID="txtCaseName" Width="500px" runat="server" Text="" ReadOnly="true"></asp:TextBox>
    <div id="divBoxCase" class="divBoxCase" runat="server" style="position: absolute; background-color: #FFF; border: solid 1px #333; height: 300px; width: 540px; overflow: auto; left: 0px; top: 25px; z-index: 9999; display: none; margin-top: 7px; margin-left: 3px;">
    </div>
    <div style="position: absolute; top: 0px; left: 540px; margin-left: 5px;">
          <input type="radio" name="kpiAll" id="checkKPI" value="true" checked="checked" />KPI
          <input type="radio" name="kpiALL" id="checkKpiAll" value="false" />ALL
     </div>
</div>
</form>
</body>
</html>

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

View Code

 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("<input type='checkbox' name='All31' value='All' οnclick='selectAll31()'/>ALL<br />");
29      for (int i = 0; i < dtCase.Rows.Count; i++)
30      {
31            sb.Append("<input type='checkbox' name='case1' value='" + dtCase.Rows[i]["CaseName"] + "'>" + dtCase.Rows[i]["CaseName"] + "<br />");
32      }
33 
34      Response.Write(sb);
35      Response.End();
36 }

Javascript中，data.js引用Ajax：

View Code

$(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<aa.length; i++)
                          {
if (aa[i].type=='checkbox')
                                {
//aa[i].checked=event.srcElement.checked;
                                   aa[i].checked='checked';
                                }
                           } 
                      }
                 }
         ); 

    $("input[name='case1']").each(
function() {
if ($(this).attr('checked') == true) {
                  selectRoleID += $(this).val() + ",";
               }
          }
    );

        $("#txtCaseName").val(selectRoleID);
        $("#divBoxCase").hide(1000);

    });

});



//select all for case
    function selectAll31(){ 
var aa = document.getElementsByName("case1");
for (var i=0; i<aa.length; i++)
        {
if (aa[i].type=='checkbox')
            {
                aa[i].checked=event.srcElement.checked;
            }
        }    
    }

转载于:https://www.cnblogs.com/eva_2010/archive/2012/01/04/2311629.html

weixin_34001430

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax无刷新数据绑定

AJAX动态无刷新绑定项目中客户想要达到这样的效果，请教了同事之后作出的。虽然对于Ajax还不熟悉，暂时存放在这儿，以备学习Ajax后查看。原理慢慢搞清楚。根据是否是KPI，动态绑定不同的数据源。在这里是有一个KPI的过滤。radiobutton用的是input type="radio" name="kpiAll" id="checkKPI" value="true" checked="c...
复制链接

扫一扫