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; 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' onclick='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;
}
}
}