Ajax无刷新数据绑定

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 Case15 16       }17       else if (checkAll == "kpi")18       {19              dtCase = caseBLL.BindCaseByType(1, true);//KPI Case20       }21       else22       {23              dtCase = caseBLL.BindCaseByType(1, true);//KPI Case24       }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

Ajax无刷新数据绑定相关推荐

Ajax无刷新实现图片切换特效
1.页面cs代码 using System; using System.Data; using System.Configuration; using System.Web; using System ...
JAVA EE 中之AJAX 无刷新地区下拉列表三级联动
JSP页面 <html> <head> <meta http-equiv="Content-Type" content="text/html ...
JQuery 总结（8）Ajax 无刷新技术
Ajax 无刷新技术 [ 有get 和post 一一对应] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $(".delete& ...
ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论
基于jquery实现ajax无刷新评论发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...
ajax无刷新评论的思路,ajax学习——ajax版无刷新评论（数据库）
//Comment.htm 无刷新评论 type="text/javascript"> //加载评论 $(function() { $.post("GetComme ...
JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...
ajax无刷新评论示例
下面就为大家带来一篇 ajax无刷新评论示例.学习还是有点帮助的,给大家做个参考吧. 这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面留言内容中为空,或者为灰色的"没有填 ...
.net MvcPager+Ajax无刷新分页
.net MvcPager+Ajax无刷新分页百度网盘链接: https://pan.baidu.com/s/1QmtBVH_sb4O6pNnEIsB5jw 1.新建Asp.net Web项目,重 ...
php页面自分页刷新,详解PHP+AJAX无刷新分页实现方法
PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; fu ...

Ajax无刷新数据绑定

Ajax无刷新数据绑定相关推荐

最新文章

热门文章