如何配置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）