这几天遇到一个问题,要获取实时信息,同时绑定到前台。
用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主要用于前台页面数据绑定的方法。
对了忘记了说明 我没有上样式,样式自己考虑就好了。上我的最后截图: