如何配置 UpdatePanel 使其在页面渲染刷新并异步获取数据后第一次渲染为空并稍后渲染

Question

我有一个仪表板页面，在此页面中，我通过在 HTML 表格后面的代码中动态添加它来显示一个名为 RadChart 的用户控件，其中包含 2 行（每行 3 个单元格）。

所以当我的页面排序时，它会显示 6 个图表。

这些图表的加载取决于数据库中的数据，对于大型数据库我面临性能问题。

我的客户很不高兴，因为他对“除非全页加载，否则什么都没有加载”很生气，他希望我先加载页面（带有标题和菜单），然后一个一个地加载每个图表（异步），这样如果他不想等待整个页面加载，他可以轻松点击任何其他菜单并转到另一个页面。

我想知道如何做到这一点，以下是我的想法

我将动态添加 UpdatePanel 到每个单元格并尝试在不渲染更新面板数据的情况下渲染页面（因此不会显示图表），并且在页面渲染到客户端后，我将更新所有更新面板以渲染数据，是否可以?如果是，请告诉我怎么做？

也欢迎任何其他方法。

谢谢， 伊姆兰·里兹维

Answer 1

没有 PageMethods：

首先你需要引用一个jquery库

http://jquery.com/

然后在服务器端，您需要一个返回一些数据的函数，例如：

参考需求： 使用 System.Web.Services；

    [WebMethod]
    public static string Test(string id)
    {

     // do ...
     return "data";

    }

在页面上你需要类似的东西：

<script type="text/javascript">


    $(document).ready(
function () {

$.ajax({
    type: "POST",
    url: "Default.aspx/Send",
    data: "{id : '" + "data to send" + "'}",
    contentType: "application/json; charset=utf-8",

    cache: false,
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("Error occured textStatus=" + textStatus + " errorThrown=" + errorThrown);
    },


    success: function (msg) {

      // Output comes here


    }
});

});


</script>

积分：

服务器端函数应该是公共的和静态的，并且具有属性 WEBMETHOD

1. 使用ajax时调用参数名必须匹配即

编辑：

加载图片非常简单：

在客户端创建一个像这样的空图像

 <img src="" alt="Please Wait Loading" id="test" />

并在输出中返回图像 url，如 'load.png'

在 JSON 的输出中使用这个：

success: function (msg) {

        alert(msg.d);

        $('#test').attr("src", msg.d);

    }

请务必在末尾写上 msg.d note .d 字。

如果你有任何问题，请告诉我

作为数据：“{id : '”+“要发送的数据”+“'}”，

“id”但等于服务器端参数名称

使用 PageMethods

服务器端的东西保持不变，但在客户端你不需要 jquery

你需要：

1. ScriptManager 启用了页面方法，例如

       <asp:ScriptManager EnablePageMethods="true" />
   

要调用一个函数，你需要类似的东西

        PageMethods.Send("param name" , result);

发送 = 函数名称

result 是在 result 声明为 like 后将执行的函数的名称

     function result(output)
   {

    alert("function return value");
   }

Answer 2

PageMethod 或 jQuery 中的任何一个都适用于您的案例，以便在页面加载后调用服务器方法。

您在客户端生成图表时面临的问题可以通过将 html 返回到客户端并仅在此处显示来解决，这样您就可以在服务器中处理所有内容并将其显示在 UI 中。

为此，您可以使用类似这样的方法来返回图表的最终 html 或您想要在 UI 中使用的任何内容

    [WebMethod]
    public static string GetChartHtml(object data)
    {
        Panel chartPanel = new Panel();
        chartPanel.Controls.Add(new TextBox());

        StringBuilder html = new StringBuilder();
        StringWriter stringWriter = new StringWriter(html);
        HtmlTextWriter writer = new HtmlTextWriter(stringWriter);

        chartPanel.RenderControl(writer);

        return html.ToString();

    }

但要使其正常工作，您必须在同一页面中覆盖以下方法。你可以让身体空着

public override void VerifyRenderingInServerForm(Control control)
{

}

干杯！

Answer 3

我研究它并找到了一种不使用 jQuery 或静态方法的方法（在我的情况下我不能使用静态方法）。

我已将图表控件放置在 UserControl 中。

最初（！IsPostBack）我没有执行代码来生成图表（让带有母版页控件菜单等的空页面呈现）

创建了一个隐藏字段来保存 if IsPostBack 的值。

protected void Page_PreRender(object sender, EventArgs e)
{
  if (IsPostBack)
  {
    hdnIsPostBack.Value = "1";
  }
  SetSelectedMenu();
}

我已经放置了一个按钮，即刷新按钮，并使其触发更新面板。

编写了以下javascript，通过调用RefreshButton点击客户端页面加载来触发更新面板

function pageLoad() {
  if (document.getElementById("m_c_hdnIsPostBack").value == "0") {
    document.getElementById('m_c_RefreshButton').click();
  }
}

在 RefreshButton 服务器端编写代码

protected void RefreshButton_Click(object sender, EventArgs e)
{
  DrawChart();
}

就是这样。

我的页面先加载，然后异步图表开始加载。

为了显示加载图标，我创建了一个 UpdateProgress 控件（客户端 id 'm_c_upr'），我编写了以下 javascript 代码，在每个异步回发时显示/隐藏加载图标

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
  $get('m_c_upr').style.display = 'block';
}
function EndRequest(sender, args) {
  $get('m_c_upr').style.display = 'none';
}

谢谢大家！

伊姆兰·里兹维