ASP.NET => UpdatePanel

前書き

このトピックでは、2つのMicrosoft Ajaxサーバーコントロール（ScriptManagerコントロールとUpdatePanelコントロール）を使用して、Webページに部分ページ更新サポートを追加する方法について説明します。これらのコントロールは、ポストバックごとにページ全体をリフレッシュする必要がなくなり、ユーザーエクスペリエンスが向上します。

構文

<asp：UpdatePanel ID = "UpdatePanel1" runat = "server">
</ asp：UpdatePanel>

備考

UpdatePanelを動作させるには、ScriptManagerをページに追加する必要があります。

更新パネルの例

ステップ1：ページにScriptManagerを追加する

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

ステップ2：ScriptManagerの直後にページにUpdatePanelを追加します。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate></ContentTemplate>
        </asp:UpdatePanel>

ステップ3：UpdatePanelsコンテンツテンプレートにコンテンツを追加した後、aspxページは次のようになります。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

    </div>
    </form>
</body>
</html>

ステップ4：C＃ページにこのパーツを追加する：

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

ステップ5：アプリケーションを実行します。

期待される結果：

パネルの内容は、ボタンをクリックするたびに変更されますが、ページ全体がリフレッシュされません。既定では、UpdatePanelコントロールのChildrenAsTriggersプロパティはtrueです。このプロパティをtrueに設定すると、パネル内のコントロールによってポストバックが発生すると、パネル内のコントロールが部分ページの更新に参加します。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

ASP.NET
UpdatePanel

サーチ…

前書き

構文

備考

更新パネルの例