从异步调用加载 ASP.NET 网格视图

Question

我有一个网页需要几分钟才能加载。原因是该页面包含 ASP.NET 网格视图，并且该网格的数据绑定需要花费大量时间。

每个网格视图记录都包含一些复杂的用户详细信息，并且它显示了与用户偏好相关的项目数。根据用户偏好获取此计数对于数据检索存储过程来说是相当昂贵的操作。我认为这就是该页面加载时间较长的原因。

作为解决方案，我提出了加载网格视图而不包含特定网格记录的计数的想法（从数据检索存储过程中删除计数操作）。并通过对服务器的异步调用来更新每个网格记录的计数标签。

谁能知道我如何使用 ASP.NET 网格视图来实现这个解决方案？

Answer 1

具有数据绑定 GridView 控件的网页可能需要很长时间才能加载。直到所有控件都渲染完毕后才会呈现页面，并且在从数据库检索数据之前 GridView 无法呈现。所以，让\xe2\x80\x99s异步加载GridView，让页面加载更快，感知速度更大。

\n\n

这个小技巧其实很简单，涉及到ASP.NET内置的客户端回调功能。尽管我\xe2\x80\x99m 不是该特定功能的忠实粉丝，但它有时会非常方便。最好的部分是您\xe2\x80\x99 不必对现有代码进行太多更改。\n网页

\n\n

在托管 GridView 控件的网页上，您必须进行 2 个小更改。

\n\n

步骤 1. 封装 GridView \nGridView 控件必须由具有 id 属性的 HTML 控件封装，以便 JavaScript 可以引用它。这是因为当没有数据绑定到 GridView 时，它不会呈现。

\n\n

<div id="grid">\n <span>Loading...</span>\n <asp:GridView runat="Server" ID="gvAsync" />\n</div>\n

\n\n

步骤 2. 添加 JavaScript \n然后需要一个 JavaScript 将渲染和数据绑定的 GridView 加载到我们在步骤 1 中添加的 HTML 控件。将 JavaScript 放置在 GridView\xe2\x80\x99s 周围的 div 标记下方。

\n\n

<script type="text/javascript">\nfunction EndGetData(arg)\n{\n document.getElementById("grid").innerHTML = arg;\n}\n\nsetTimeout("<asp:literal runat="server" id="ltCallback" />", 100);\n</script>\n

\n\n

代码隐藏

\n\n

在代码隐藏文件中需要执行三个小步骤。

\n\n

步骤 3. 实现 ICallbackEventHandler \n我们需要实现该接口以打开客户端回调功能。

\n\n

public partial class asyncgridview : System.Web.UI.Page, ICallbackEventHandler\n

\n\n

步骤 4. 绑定回调引用\n步骤 2 中放置在 JavaScript 函数中的文字控件必须包含客户端回调引用。将以下内容添加到 Page_Load.

\n\n

if (!Page.IsCallback)\n ltCallback.Text = ClientScript.GetCallbackEventReference(this, "\'bindgrid\'", "EndGetData", "\'asyncgrid\'", false);\n

\n\n

步骤 5. 绑定网格并返回呈现的 HTML \n要完成异步加载，我们必须实现由ICallbackEventHandler我们在步骤 3 中实现的接口定义的两个方法。其中一个方法将 a 绑定DataTable到GridView并呈现控件。第二个将渲染的 HTML 返回到我们在步骤 2 中定义的 JavaScript 方法。

\n\n

privatestring _Callback;\n\npublicstring GetCallbackResult()\n{\n return _Callback;\n}\n\npublicvoid RaiseCallbackEvent(string eventArgument)\n{\n DataTable table = RetrieveDataTableFromDatabase();\n gvAsync.DataSource = table;\n gvAsync.DataBind();\n\n using (System.IO.StringWriter sw =new System.IO.StringWriter())\n {\n  gvAsync.RenderControl(new HtmlTextWriter(sw));\n  _Callback = sw.ToString();\n }\n}\n

\n\n

您可以使用当前的数据绑定方法来绑定GridView. 重要的部分是在方法呈现控件GridView之前绑定数据。RaiseCallbackEvent

\n\n

相同的技术可用于所有数据控制，例如Repeater, FormView和DataList。

\n\n

参考：http://madskristensen.net/post/Asynchronous-GridView-in-5-simple-steps

\n