请教一个关于无刷新的问题

现在也没有两个按钮。查询。筛选。
先点击查询按钮，页面出现checkboxlist绑定的数据。
然后选中checkboxlist中的选项后，点击“筛选”按钮
筛选的数据要无刷新的显示在该页面上。
请问大侠们这个该怎么做？？？？
最后能给点源码。或者是案例。
最好是jquer ajax 方向。

解决方案 »

  1.   

    这个用个弹出层就行，ajax用不到。checkboxlist和“筛选”按钮都放在层里，选择checkboxlist时可以将内容追加到一个隐藏的文本框里，点击“筛选”按钮将文本框里的内容显示到页面上。
      

  2.   

    checkboxlist先隐藏，点了查询后显示，选了值后，点筛选，用异步到后台查询数据，在回调函数里再对数据做处理，用jquery很方便的
      

  3.   

    思路是这样但是该怎么做，有这方面的例子吗？对jquery不是很熟悉
      

  4.   

    筛选就是加过滤条件进行重新查询数据，
    如果数据都查询出来了，筛选可以直接使用js在客户端端操作的，自然就没有刷新了无刷新绑定的代码可以参考
    http://dotnet.aspx.cc/article/d94323a7-e322-4ead-9f25-6e6629c8012e/read.aspx
      

  5.   


    1、首先checkboxlist先隐藏，点了查询后显示，会出现按钮的服务端事件执行不了http://topic.csdn.net/u/20120110/16/f8856f2d-0334-4450-982d-eeb1f1cd3162.html
    2、用异步到后台查询数据，在回调函数里再对数据做处理，用jquery很方便的 能写断代码看看嘛
      

  6.   

    这是我测试ajax下简单分页用的  可以参考下。
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajax.aspx.cs" Inherits="ajax分页_ajax" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .page{ width:100%; height:100%; margin:0 auto; padding-top:20px;}
            .content{ width:952px; border:1px solid #eee; padding:10px; margin:0 auto; background:#ccc; text-align:left;}
            .show{ width:932px; border:1px solid #eee; padding:10px; margin:0; background:#ccc;}
            .item{ line-height:130%;}
            .page{ width:100%; text-align:right; border:1px solid #fff; margin-top:10px;}
        </style>
        <script src="../Scripts/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#btn").click(function () {
                    GetHotel(1);
                })
            })        function GetHotel(page) {
                $.ajax({
                    type: "GET",
                    url: "Handler.ashx?page="+page+"&"+Math.random(),
                    dataType: "text",
                    success: function (data) {
                        $("#show").html(data);
                    },
                    error: function (data) {
                        alert(data);
                    }
                })
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="page" align="center">
            <div class="content" id="content">
                <div style="text-align:left;"><input type="button" id="btn" value="show" /></div>
                <div id="show" class="show">
                </div>
            </div>
        </div>
        </form>
    </body>
    </html>
    <%@ WebHandler Language="C#" Class="Handler" %>using System;
    using System.Web;
    using System.Text;
    using System.Data;
    using System.Data.SqlClient;public class Handler : IHttpHandler
    {    public void ProcessRequest(HttpContext context)
        {
            string p = context.Request.QueryString["page"];
            StringBuilder strBul = new StringBuilder();
            SqlConnection con = new SqlConnection("Data Source=xxxxxxxxx;Initial Catalog=xxxxxxx;Persist Security Info=True;User ID=demo_idea;Password=xxxxxxx");
            con.Open();
            SqlCommand cmd = new SqlCommand("select * from (select *,row_number() over(order by hid) as row from hotel) t where row between "+((int.Parse(p)-1) * 10+1).ToString()+" and " + (int.Parse(p) * 10).ToString(), con);
            cmd.CommandType = CommandType.Text;
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                strBul.Append("<div class=\"item\">"+dr["HName"].ToString()+"</div>");
            }
            dr.Close();
            con.Close();
            strBul.Append("<div class=\"page\"><a href=\"javascript:void(0)\" onclick=\"GetHotel(1)\">1</a><a href=\"javascript:void(0)\" onclick=\"GetHotel(2)\">2</a></div>");
            context.Response.ContentType = "text/html";
            context.Response.Write(strBul.ToString());
        }    public string OutPutStr(string str)
        {
            return str.Replace("&lt;", "<").Replace("&gt;", ">").Replace("&amp;","&").Replace("&quot;",@"""");
        }    public bool IsReusable
        {
            get
            {
                return false;
            }
        }}
      

  7.   

    建议在全记录里进行过滤 然后重新绑定应该就可以了。
    查查JQuery+ajax相关资料吧
      

  8.   

    1.在前端显示checkboxlist，返回true,后台事件应该还是可以执行的吧，看看是不是代码那里的问题
    2.对于第2点，这里写了一个简单的处理方法，可以参考下，也可以去找一个js加载列表的控件<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script language="javascript" type="text/javascript">
            //筛选事件
            function SelectData() {
                $.ajax({
                    type: "GET",
                    url: "Handler.ashx?pageNumber=1&pageSize=10&selector=参数",
                    dataType: "xml", //返回的数据为xml类型
                    success: function (data) {
                        //假设你返回的数据为xml类型的，如<table><row><col>aa</col><col>aa</col>...</row>...</table>
                        var html = "";
                        $("#table_data").html(""); //先将原有的列表清空
                        //先遍历行
                        $(data).find("row").each(function () {
                            html += "<tr>";
                            //再遍历列
                            $(this).find("col").each(function () {
                                html += "<td>" + $(this).text() + "</td>";
                            });
                            html += "</tr>";
                        });
                        $("#table_data").html(html);
                    },
                    error: function (data) {
                        alert(data);
                    }
                })        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <input type="button" onclick="SelectData();" value="筛选" />
        <table id="table_data"></table>
        </div>
        </form>
    </body>
    </html>
      

  9.   

    js直接操作checkbox的显示隐藏就行了啊。
      

  10.   

    这是针对1我写的代码<script language="javascript">
           //清空数据
           function cleartext() 
           {
              $('#div1 input[type=text]').val("")
           }
           //div 展开隐藏
           $(document).ready(function() {
               $("#btnSearch").click(function(event){
                 //js获取时间的val  
                 var starttime = document.getElementById("txtBeginDate").value;  
                 var endtime = document.getElementById("txtEndDate").value;  
                 /*分解开始时间*/   
                 var startMonth =eval( starttime.substring(5,starttime.lastIndexOf("-")));   
                 var startDay =eval( starttime.substring(starttime.length,starttime.lastIndexOf("-")+1));   
                 var startYear =eval( starttime.substring(0,starttime.indexOf("-")));   
      
                 /*分解结束时间*/   
                 var endMonth =eval( endtime.substring(5,endtime.lastIndexOf("-")));   
                 var endDay =eval( endtime.substring(endtime.length,endtime.lastIndexOf("-")+1));   
                 var endYear =eval( endtime.substring(0,endtime.indexOf("-")));           
                 if(starttime=="")
                   {
                      alert("请选择统计开始时间！");
                      return false;
                   }
                if(endtime=="")
                  {
                     alert("请选择统计结束时间！");
                     return false;
                  }
                if(Date.parse(startMonth+"/"+startDay+"/"+startYear)>Date.parse(endMonth+"/"+endDay+"/"+endYear))  
                 {  
                     alert("开始时间大于结束时间");  
                     return false;
                 }
                else
                  {  
                  //展开div          
                     event.preventDefault();
                     $("#caja").slideDown();
                  }
                });
               $("#caja a").click(function(event) {
                   event.preventDefault();
                   $("#caja").slideUp();
                });
           });
           
        </script>button 的后台事件执行不了。
    2、关于我提出的第二个问题，现在已经解决了。思路与您的相同。
    在此谢谢您对这个问题一直回答着。