如何配置UpdatePanel，以便它应该在第一次呈现为空时呈现，然后在页面呈现刷新后异步呈现并获取数据

Question

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

因此，当我的页面浏览时，它会显示6个图表。

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

我的客户不满意，因为他对除非加载完整页面才加载任何内容感到生气，他希望我先加载页面（带有标题和菜单），然后再加载一个图表（异步），以便他不这样做。不想等待整个页面加载，他可以轻松地单击任何其他菜单并转到另一个页面。

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

我将动态地将UpdatePanel添加到每个单元格，并尝试在不呈现更新面板数据的情况下呈现页面（因此将不会显示图表），并且在页面呈现到客户端之后，我将更新所有更新面板以呈现数据，这可能吗？ 如果是，请让我知道如何？

也欢迎任何其他方法。

谢谢，伊姆兰·里兹维（Imran Rizvi）

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" />

并在输出中返回图片网址，例如“ 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);

发送=函数名称

结果是声明结果后将执行的函数的名称，例如

     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）我不执行代码以生成Chart（以使具有主页控制菜单等的空页面呈现出来）

创建一个隐藏字段，其中包含if IsPostBack的值。

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

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

通过调用客户端页面上的RefreshButton编写以下javascript来触发更新面板

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';
}

谢谢大家！

伊姆兰·里兹维（Imran Rizvi）