少量代码实现AjaxPro.DLL 定时更新GridView技巧（页面的局部更新）

这几天遇到一个问题，要获取实时信息，同时绑定到前台。

用JS直接写到前台也是可以的，但是写JS太麻烦了。

于是选择使用了AjaxPro.2.DLL,他的一些使用方法就不用说明了吧。网上一搜一大把，我主要讲讲一些技巧。

在提前你可以这么做：

<asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"></asp:ScriptManager>       
    <div>
        <table class="ListName">
        <tr>
            <th id="operatetile" runat="server"> 服务器及时信息</th>
        </tr>
    </table>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
                         <ContentTemplate> 
        <asp:GridView ID="DataList" runat="server" AutoGenerateColumns="False"    ondatabound="DataList_DataBound" >
                         </asp:GridView>
                      更新间隔(秒)：<asp:Label ID="labtimeSpan" Text="120" runat="server" ></asp:Label>
                      最后更新时间   <asp:Label ID="Labtime" runat="server" Text=""></asp:Label>
        <asp:Button ID="Button1" Width="0" Height="0" runat="server"  Text="Update Both Panels" OnClick="Button1_Click" /> 
      </ContentTemplate> 
</asp:UpdatePanel> 
    
    </div>

放一个

<asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"></asp:ScriptManager>

把一个GridView 放到

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate>

之间。

放一个按钮用来做定时返回服务器更新的方法

<asp:Button ID="Button1" Width="0" Height="0" runat="server" Text="Update Both Panels" OnClick="Button1_Click" />

同时设置他的 Width="0" Height="0" 这样让他再前台不能显示。当然你也可以让他显示出来。

两个Label 服务器控件，一个用于设置和显示更新的频率，一个用于显示最后更新的时间

更新间隔(秒)：<asp:Label ID="labtimeSpan" Text="120" runat="server" ></asp:Label> 最后更新时间 <asp:Label ID="Labtime" runat="server" Text=""></asp:Label>

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>    
    <script type="text/javascript">

        $(document).ready(function() {
        var labtimeSpan = $("#labtimeSpan").html();
            var timeSpan = labtimeSpan * 1000;
            setInterval("Get()", timeSpan);
        })
        function Get() {
            var btnSearch = document.getElementById('<%=Button1.ClientID %>');
            btnSearch.click();
         }
    </script>

加上JS，用于定时更新。调用Get方法，GET方法调用 Button1的点击事件。

protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
            {
                thisPageDataBind();
            }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            thisPageDataBind();
        }
        private void thisPageDataBind() 
        {
            Labtime.Text = DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss");
            string strServerIP = Request.QueryString["SSID"] ?? "";
            this.DataList.DataSource= Dal.MonitorLogsDal.GetLogSByServers(strServerIP);
            this.DataList.DataBind();

        }

        public Dictionary<int, string> ServerMonitorTypeList = Utils.EnumToDictionary.GetServerMonitorType();

        private string getServerMonitorTypeName(int ServerMonitorTypeID)
        {
            return ServerMonitorTypeList[ServerMonitorTypeID];
        }
        ///   <summary>   
        ///   根据条件列合并GridView列中相同的行   
        ///   </summary>   
        ///   <param   name="GridView1">GridView对象</param>   
        ///   <param   name="cellNum">需要合并的列</param>
        ///   ///   <param   name="cellNum2">条件列(根据某条件列还合并)</param>
        public static void GroupRows(GridView GridView1, int cellNum, int cellNum2)
        {
            int i = 0, rowSpanNum = 1;
            while (i < GridView1.Rows.Count - 1)
            {
                GridViewRow gvr = GridView1.Rows[i];
                for (++i; i < GridView1.Rows.Count; i++)
                {
                    GridViewRow gvrNext = GridView1.Rows[i];
                    if (gvr.Cells[cellNum].Text + gvr.Cells[cellNum2].Text == gvrNext.Cells[cellNum].Text + gvrNext.Cells[cellNum2].Text)
                    {
                        gvrNext.Cells[cellNum].Visible = false;
                        rowSpanNum++;
                    }
                    else
                    {
                        gvr.Cells[cellNum].RowSpan = rowSpanNum;
                        rowSpanNum = 1;
                        break;
                    }

                    if (i == GridView1.Rows.Count - 1)
                    {
                        gvr.Cells[cellNum].RowSpan = rowSpanNum;
                                            }
                }
            }
        } 
        protected void DataList_DataBound(object sender, EventArgs e)
        {
            GroupRows(this.DataList, 1, 1);
        }

后台方法。DataBound事件主要是为了合并同样的行。

而GroupRows就是合并行的方法。Button1_Click用于处理前台定时请求的方法。

thisPageDataBind主要用于前台页面数据绑定的方法。



对了忘记了说明 我没有上样式，样式自己考虑就好了。上我的最后截图：