Как настроить UpdatePanel таким образом, чтобы он сначала отображался пустым, а затем обновлялся при обновлении страницы и получал данные асинхронно - PullRequest
1 голос
/ 22 декабря 2011

У меня есть страница Dashboard, на этой странице я показываю пользовательский элемент управления с именем RadChart, добавляя его динамически в код внутри HTML-таблицы с 2 строками (по 3 ячейки в каждой строке).

Так что, когда мои страницы отображаются, они показывают 6 диаграмм.

загрузка этих диаграмм зависит от данных в базе данных, для больших баз данных я сталкиваюсь с проблемой производительности.

Мой клиент недоволен, так как он недоволен тем, что ничего не загружается, если не загружена полная страница, он хочет, чтобы я сначала загружал страницу (с заголовком и меню), а затем загружал каждый график один за другим (асинхронно), поэтому он не хочет ждать полной загрузки страницы, он может легко нажать на любое другое меню и перейти на другую страницу.

Мне интересно, как это сделать, вот мое мышление

Я добавлю UpdatePanel динамически в каждую ячейку и попытаюсь отобразить страницу без отображения данных панели обновления (чтобы диаграмма не отображалась), а после того, как страница будет отображена на стороне клиента, я обновлю все панели обновления для отображения данных, возможно ли это ? если да, пожалуйста, дайте мне знать, как?

Любой другой подход также приветствуется.

Спасибо, Имран Ризви

Ответы [ 3 ]

0 голосов
/ 22 декабря 2011

Либо PageMethod, либо jQuery подойдет для вашего случая, чтобы вызвать метод сервера после загрузки страницы.

Проблема, с которой вы сталкиваетесь при создании диаграммы на стороне клиента, может быть решена путем возврата html клиенту и его показа только там, таким образом вы можете обрабатывать все на сервере и просто отображать его в пользовательском интерфейсе.

Для этого у вас может быть такой метод, который будет возвращать окончательный HTML-код вашего графика или все, что вы хотите, чтобы вы использовали в пользовательском интерфейсе

    [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)
{

}

Ура!

0 голосов
/ 23 декабря 2011

Я работал над этим и нашел способ без использования jQuery или Статического метода (я не могу использовать Статический метод в моем случае).

Я поместил свой элемент управления диаграммы в UserControl.

Изначально (! IsPostBack) Я не выполняю код для генерации диаграммы (чтобы позволить рендерить пустую страницу с меню элементов управления главной страницы и т. Д.)

Создано скрытое поле, содержащее значение if IsPostBack.

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

Я поместил кнопку, т. Е. RefreshButton, и сделал ее триггером на панель обновлений.

Написал следующий javascript для запуска панели обновления, вызвав RefreshButton, кликнув на странице клиента на стороне страницы.1014 * Написание кода на стороне сервера RefreshButton

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

И это все.

Сначала загружается моя страница, а затем начинают загружаться асинхронные диаграммы.

Показать значок загрузкиЯ создал элемент управления UpdateProgress (идентификатор клиента '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';
}

Спасибо всем!

Имран Ризви

0 голосов
/ 22 декабря 2011

Без 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 имя параметра должно совпадать, т.е.

РЕДАКТИРОВАТЬ:

Загрузка изображения оченьeasy:

На стороне клиента создайте пустое изображение, например

 <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 примечание .d слово в конце.

Если у вас возникли проблемы, дайте мне знать

в качестве данных: "{id: '" + "данные для отправки" + "'}",

"id" , но должны совпадать с именем параметра на стороне сервера

С PageMethods

Со стороны сервера все остается таким же, но на стороне клиента вам не нужен jquery

Вам необходимо:

  1. ScriptManager с включенными методами страницы, например

        <asp:ScriptManager EnablePageMethods="true" />
    

и для вызова функции вам нужно что-то вроде

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

Send = имя функции

, а result - это имяфункция, которая будет выполняться после объявления результата, как

     function result(output)
   {

    alert("function return value");
   }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...