Использование UpdatePanel в ASP.NET AJAX - Используем несколько UpdatePanels на единой странице

Written on . Posted in ASP.NET

ОГЛАВЛЕНИЕ

Страница 3 из 6
 

Используем несколько UpdatePanels на единой странице

В рассмотренных двух примерах, использующих UpdatePanel, страница содержала только один элемент UpdatePanel, но в жизни бывают случаи, когда на страницу необходимо поместить более одного UpdatePanel. Это особенно удобно в случаях, когда различные части страницы отвечают за различные действия. Например, в одной части страницы вы хотите осуществить запрос на ввод информации. После получения информации вам, наверняка, захочется сохранить ее в базе данных и после обновить другую часть страницы, которая резюмирует данную информацию.

По умолчанию, когда любой UpdatePanel на странице вызывает асинхронный постбэк, интерфейсы всех UpdatePanels на странице обновляются. Это может быть легко продемонстрировано в примере, который отображает время и дату в UpdatePanel. Начните с создания новой ASP.NET страницы и добавьте ScriptManager и два UpdatePanel. Установите свойства ID UpdatePanel в UpdatePanel1 и UpdatePanel2. В пределах ContentTemplates данных двух UpdatePanels добавьте элементы Label и Button. Также добавьте другой элемент Button за пределами UpdatePanels. При нажатии на внешнюю кнопку Button вызовется полностраничный постбэк. В дополнение к внешнему элементу Button, добавьте элемент Label для отображения текущей даты и времени. На данном этапе декларативная разметка вашей страницы должна выглядеть примерно так: 

 <asp:ScriptManager ID="ScriptManager1"  runat="server">
</asp:ScriptManager>

<asp:UpdatePanel  ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Label runat="server" id="Panel1Time"></asp:Label>
        <br />
       <asp:Button runat="server" ID="Panel1Button"  Text="Partial Postback from Panel 1" />
     </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel  ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <asp:Label runat="server" id="Panel2Time"></asp:Label>
        <br />
       <asp:Button runat="server" ID="Panel2Button"  Text="Partial Postback from Panel 2" />
     </ContentTemplate>
</asp:UpdatePanel> 

<br /><br  />
<asp:Label runat="server"  id="PageTime"></asp:Label>
<br />
<asp:Button  runat="server" ID="FullPostbackButton" Text="Full Postback" />

Элемент управления UpdatePanel имеет в наличии событие Load, которое срабатывает во время каждого визита на страницу, будь то полный, либо частичный постбэк. Создайте обработчик для этого события в каждом из UpdatePanel и, будучи в обработчике события, установите соответствующее свойство Text элемента Label в текущую дату и время. Аналогично установите свойство Text элемента PageTime Label в обработчике события Page_Load. 

 protected void Page_Load(object sender,  EventArgs e)
{
PageTime.Text = "Page time: " +  DateTime.Now.ToString();
}

protected void UpdatePanel1_Load(object  sender, EventArgs e)
{
   Panel1Time.Text = "UpdatePanel1 time: " +  DateTime.Now.ToString();
}

protected void UpdatePanel2_Load(object  sender, EventArgs e)
{
   Panel2Time.Text = "UpdatePanel2 time: " +  DateTime.Now.ToString();
}

Установите контрольные точки (breakpoint) в этих трех обработчиках событий и начните отладку (debug) страницы. Заметьте, что всякий раз, когда пользователи посещают страницу, срабатывает каждая из этих контрольных точек. И не так уж и важно, была ли страница посещена в первый раз или нет, после полного постбэка либо после частичного постбэка. Тем не менее, только определенные части страницы обновляются в определенных условиях. Данный скриншот показывает страницу в то время когда она была только посещена. Заметьте, что все три элемента Label отображают одни те же значения.


Если нажать кнопку "Full Postback", страница будет полностью обработана, и все элементы Label опять будут отображать одинаковые значения. Тем не менее, если нажать на одну из кнопок "Partial Postback", происходит частичный постбэк. В то время как частичный постбэк также вызывает все три события Load, он обновляет только те пользовательские интерфейсы, которые принадлежат страничным UpdatePanel . После нажатия на кнопку "Partial Postback", элемент "Page time" все еще выводит время с прошлого полного постбэка , в то время как элементы Labels в UpdatePanel отображают текущее время.


Три ключевых пункта можно вывести из этого примера:

  1. Событие Load UpdatePanel срабатывает при каждом визите на страницу, независимо от того,  была ли  страница посещена после  частичного постбэка либо после полного (или просто была посещена впервые).

  2. При частичном постбэке области за пределами UpdatePanels не обновляются. Да, при этом событие Load все равно срабатывает, но интерфейс не обновляется. Это происходит  потому, что сервер отсылает обратно только измененную разметку для области UpdatePanel.

  3. По умолчанию, когда вызван частичный постбэк, все UpdatePanel на странице обновляют свой интерфейс. Я упомянул фразу "по умолчанию" потому, что это поведение может быть изменено, и мы скоро это увидим.

форум c# asp net