如題。
小弟使用ListView的ItemDataBound後,因載入多筆(200筆)ping資料
造成光載入網頁後須等待約15秒才載入到網頁。
後續也使用Async非同步方式也沒辦法加快載入。
請問有相關優化的寫法可參考嗎?code如下
c#
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected async void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
try
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
System.Data.DataRowView DRV =(System.Data.DataRowView)e.Item.DataItem;
var pingitems = (string)DRV.Row.ItemArray[1];
Ping ping = new Ping();
string data = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
byte[] buffer = Encoding.ASCII.GetBytes(data);
PingOptions options = new PingOptions(64, true);
// Wait 12 seconds for a reply.
int timeout = 12000;
PingReply pingReply = await ping.SendPingAsync(pingitems, timeout, buffer, options);
var lab = e.Item.FindControl("color") as HtmlControl;//找到html定義顏色群組
if (pingReply.Status == IPStatus.Success)
{
lab.Attributes.Add("class", "mediumseagreen");
}
else
{
lab.Attributes.Add("class", "red");
}
}
}
catch (Exception ex)
{
Response.Write("<script language='javascript'>alert(\"" + "錯誤訊息 : " + ex.Message.Replace("\r\n", "") + "\");</script>");
}
}
}
aspx
<%@ Page Async="true" Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="MonitorStatus.aspx.cs" Inherits="TestWeb1.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" GroupItemCount="3" OnItemDataBound="ListView1_ItemDataBound">
<AlternatingItemTemplate>
<td runat="server" style="" id="color">
<style type="text/css">
.red {
background-color: red;
}
.mediumseagreen {
background-color: mediumseagreen;
}
</style>
name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</AlternatingItemTemplate>
<EditItemTemplate>
<td runat="server" style="">
name:
<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
<br />
ip:
<asp:TextBox ID="ipTextBox" runat="server" Text='<%# Bind("ip") %>' />
<br />
<asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
<br />
</td>
</EditItemTemplate>
<EmptyDataTemplate>
<table runat="server" style="">
<tr>
<td>未傳回資料。</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td runat="server" />
</EmptyItemTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server"></td>
</tr>
</GroupTemplate>
<InsertItemTemplate>
<td runat="server" style="">
name:
<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
<br />
ip:
<asp:TextBox ID="ipTextBox" runat="server" Text='<%# Bind("ip") %>' />
<br />
<asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
<br />
</td>
</InsertItemTemplate>
<ItemTemplate>
<td id ="color" runat="server" style="" >
<style type="text/css">
.red {
background-color: red;
}
.mediumseagreen {
background-color: mediumseagreen;
}
</style>
name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="groupPlaceholderContainer" runat="server" border="0" style="">
<tr id="groupPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
</td>
</tr>
</table>
</LayoutTemplate>
<SelectedItemTemplate>
<td runat="server" style="">
name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</SelectedItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:edtwebConnectionString %>" SelectCommand="SELECT [name], [ip] FROM [edtdata] ORDER BY [name]"></asp:SqlDataSource>
<br />
</asp:Content>
後續更新,
自己後來持續排查原因。
原來是自己將timeout設定12秒導致先前就要等很久的情況。
感謝下面回覆的大大協助,讓我增加優化的方式~~
後端分頁的作法:
你可以使用 Asp.Net 內建的分頁控制項 DataPager,就可以在網頁中使用分頁功能以提升載入速度。
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" PagedControlID="DataPager1" GroupItemCount="3" OnItemDataBound="ListView1_ItemDataBound">
<asp:DataPager ID="DataPager1" runat="server" PageSize="20">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
修改後的ASPX:
<%@ Page Async="true" Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="MonitorStatus.aspx.cs" Inherits="TestWeb1.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" PagedControlID="DataPager1" GroupItemCount="3" OnItemDataBound="ListView1_ItemDataBound">
<AlternatingItemTemplate>
<td runat="server" style="" id="color">
<style type="text/css">
.red {
background-color: red;
}
.mediumseagreen {
background-color: mediumseagreen;
}
</style>
name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</AlternatingItemTemplate>
<EditItemTemplate>
<td runat="server" style="">
name:
<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
<br />
ip:
<asp:TextBox ID="ipTextBox" runat="server" Text='<%# Bind("ip") %>' />
<br />
</td>
</EditItemTemplate>
<EmptyDataTemplate>
<table runat="server" style="" id="color">
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<InsertItemTemplate>
<td runat="server" style="">
name:
<asp:TextBox ID="nameTextBox" runat="server" Text="" />
<br />
ip:
<asp:TextBox ID="ipTextBox" runat="server" Text="" />
<br />
</td>
</InsertItemTemplate>
<ItemTemplate>
<td runat="server" style="" id="color">
<style type="text/css">
.red {
background-color: red;
}
.mediumseagreen {
background-color: mediumseagreen;
}
</style>
name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server" style="">
<td runat="server" style="" id="color">
<style type="text/css">
.red {
background-color: red;
}
.mediumseagreen {
background-color: mediumseagreen;
}
</style>
<table ID="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<th runat="server" style="">name</th>
<th runat="server" style="">ip</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="text-align: center;">
<asp:DataPager ID="DataPager1" runat="server" PageSize="20">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPage Button="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
<SelectedItemTemplate>
<td runat="server" style="">
name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</SelectedItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [name], [ip] FROM [table1]"></asp:SqlDataSource>
</asp:Content>
補充:
參考網路上的教學 https://songshizhao.com/blog/blogPage/116.html
使用ASP.NET的ajax控件實現分頁局部刷新頁面:
1.引入ajax控件ScriptManager,放在form裡。
<asp:ScriptManager runat="server"></asp:ScriptManager>
2.引入ajax控件UpdatePanel。
<asp:UpdatePanel runat="server">
</asp:UpdatePanel>
3.編輯UpdatePanel內容。
在 UpdatePanel 標籤中加入要進行局部刷新的控制項,例如 ListView 控制項:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" GroupItemCount="3" OnItemDataBound="ListView1_ItemDataBound">
<!-- 省略其他模板 -->
</asp:ListView>
</ContentTemplate>
</
修改後的ASPX:
<%@ Page Async="true" Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="MonitorStatus.aspx.cs" Inherits="TestWeb1.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<contenttemplate>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" GroupItemCount="3" OnItemDataBound="ListView1_ItemDataBound">
<AlternatingItemTemplate>
<td runat="server" style="" id="color">
<style type="text/css">
.red {
background-color: red;
}
.mediumseagreen {
background-color: mediumseagreen;
}
</style>
name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</AlternatingItemTemplate>
<EditItemTemplate>
<td runat="server" style="">name:
<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
<br />
ip:
<asp:TextBox ID="ipTextBox" runat="server" Text='<%# Bind("ip") %>' />
<br />
<asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
<br />
</td>
</EditItemTemplate>
<EmptyDataTemplate>
<table runat="server" style="">
<tr>
<td>未傳回資料。</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td runat="server" />
</EmptyItemTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server"></td>
</tr>
</GroupTemplate>
<InsertItemTemplate>
<td runat="server" style="">name:
<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
<br />
ip:
<asp:TextBox ID="ipTextBox" runat="server" Text='<%# Bind("ip") %>' />
<br />
<asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
<br />
</td>
</InsertItemTemplate>
<ItemTemplate>
<td runat="server" style="" id="color">
<style type="text/css">
.red {
background-color: red;
}
.mediumseagreen {
background-color: mediumseagreen;
}
</style>
name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="groupPlaceholderContainer" runat="server">
<tr id="groupPlaceholder" runat="server"></tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server">
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
<SelectedItemTemplate>
<td runat="server" style="">name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</SelectedItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [name], [ip] FROM [table1]">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</contenttemplate>
</asp:Content>
僅供參考
有使用分頁方式嘗試,但一次載入100筆的話就也是變慢
,後續User說想要一次性顯示的話該怎麼辦?
我只想到做法是說,
先將網頁載入時並每個資料都不先做ping動作,只顯示資料
,載入完成後顯示後才執行ping動作。
請問大大這想法可以嗎?
可以在 DataPager 中使用 AsyncPostBackTrigger 控制項
可參考網路上的教學 https://songshizhao.com/blog/blogPage/116.html
好的 感謝J大給的方向,我在研究一下您所提供的,感謝~!
不好意思J大,我使用這方法之後,都還是會先執行ItemDataBound事件,感覺好像沒什麼效果
是我做錯哪部分嗎?
<%@ Page Async="true" Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="MonitorStatus.aspx.cs" Inherits="TestWeb1.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<contenttemplate>
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" GroupItemCount="3" OnItemDataBound="ListView1_ItemDataBound">
<AlternatingItemTemplate>
<td runat="server" style="" id="color">
<style type="text/css">
.red {
background-color: red;
}
.mediumseagreen {
background-color: mediumseagreen;
}
</style>
name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</AlternatingItemTemplate>
<EditItemTemplate>
<td runat="server" style="">name:
<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
<br />
ip:
<asp:TextBox ID="ipTextBox" runat="server" Text='<%# Bind("ip") %>' />
<br />
<asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
<br />
</td>
</EditItemTemplate>
<EmptyDataTemplate>
<table runat="server" style="">
<tr>
<td>未傳回資料。</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td runat="server" />
</EmptyItemTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server"></td>
</tr>
</GroupTemplate>
<InsertItemTemplate>
<td runat="server" style="">name:
<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
<br />
ip:
<asp:TextBox ID="ipTextBox" runat="server" Text='<%# Bind("ip") %>' />
<br />
<asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
<br />
</td>
</InsertItemTemplate>
<ItemTemplate>
<td runat="server" style="" id="color">
<style type="text/css">
.red {
background-color: red;
}
.mediumseagreen {
background-color: mediumseagreen;
}
</style>
name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="groupPlaceholderContainer" runat="server" border="0" style="">
<tr id="groupPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server" PageSize="80">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
<SelectedItemTemplate>
<td runat="server" style="">name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
ip:
<asp:Label ID="ipLabel" runat="server" Text='<%# Eval("ip") %>' />
<br />
</td>
</SelectedItemTemplate>
</asp:ListView>
</contenttemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ListView1" />
</Triggers>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:edtwebConnectionString %>" SelectCommand="SELECT [name], [ip] FROM [edtdata] ORDER BY [name]"></asp:SqlDataSource>
<br />
</asp:Content>