Dialog for ASP.NET Web Forms
部分レンダリングの使用
タスク別ヘルプ > コンテンツ領域でのコンテンツの設定 > 部分レンダリングの使用
全て展開
すべて折りたたむ

C1Dialog は、Partial Page Rendering（PPR）技術をサポートしており、カスタムの JavaScript を使用せずに、部分ページの更新が可能です。このトピックでは、PPR を使用するプロジェクトを作成する手順について説明します。

  1. Visual Studio のメニューから［表示］→［プロパティ］を選択し、ウィンドウの上部にあるドロップダウンリストから C1Dialog を選択します。
  2. 以下の各プロパティを設定します。
    • Height プロパティを 325px に設定します。
    • Width プロパティを 275px に設定します。
  3. ソースビューに切り替え、次のマークアップを <cc1:C1Dialog> タグに追加します。
    ソースビュー
    コードのコピー
    <Content> <br /> <strong>場所を選択してください。</strong>
    <br /><br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;国：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" Width="123px">
    <asp:ListItem Selected="True">-</asp:ListItem>
    <asp:ListItem>UK</asp:ListItem>
    <asp:ListItem>USA</asp:ListItem>
    <asp:ListItem>Russia</asp:ListItem>
    <asp:ListItem>Canada</asp:ListItem>
    </asp:DropDownList><br /><br />
    &nbsp;<asp:asp:Label ID="Label1" runat="server" ForeColor="Red">都市の選択：</asp:Label><br /><br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;都市：&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:DropDownList ID="DropDownList2" runat="server" Width="123px">
    <asp:ListItem Selected="True">-</asp:ListItem>
    </asp:DropDownList><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;その他：
    <asp:TextBox ID="TextBox1" runat="server" EnableViewState="False" Width="117px""></asp:TextBox><br />
    <br /><br />
    <input id="Button1" style="width:75px" type="button"
    value="OK" onclick=";__doPostBack('','');" />
    <input id="Button2" style="width:89px" type="button" value="キャンセル" onclick="hide()" /><br />
    </Content>
     
  4. デザインビューに切り替えます。フォームは次のような表示になります。

  5. Web ページをダブルクリックして、Load イベントのイベントハンドラを作成します。Page_Load イベントに次のコードを入力して、コントロールを初期化します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    [String].Format("javascript:openWindow({0});", C1Window1.ClientID)
If Me.IsPostBack Then
Dim dl As DropDownList = DirectCast(C1Window1.FindControl("DropDownList1"), DropDownList)
Dim dlc As DropDownList = DirectCast(C1Window1.FindControl("DropDownList2"), DropDownList)
Dim tb As TextBox = DirectCast(C1Window1.FindControl("TextBox1"), TextBox)
If dl.Text <> "-" AndAlso (dlc.Text <> "-" OrElse tb.Text <> "") Then
Dim text As String = ""
If dlc.Text <> "-" Then
text += dlc.Text
Else
text += tb.Text
End If
text += ", " + dl.Text
Label2.Text = text
End If
Else
Label2.Text = ""
End If

    C# コードの書き方

    C#
    コードのコピー 
    protected void Page_Load(object sender, EventArgs e)
String.Format("javascript:openWindow({0});", C1Dialog1.ClientID);
if (this.IsPostBack)
            {
DropDownList dl = (DropDownList)C1Dialog1.FindControl("DropDownList1");
DropDownList dlc = (DropDownList)C1Dialog1.FindControl("DropDownList2");
TextBox tb = (TextBox)C1Dialog1.FindControl("TextBox1");
if (dl.Text != "-" && (dlc.Text != "-" || tb.Text != ""))
                {
string text = "";
if (dlc.Text != "-")
                    {
text += dlc.Text;
                    }
else
                    {
text += tb.Text;
                    }
text += ", " + dl.Text;
Label1.Text = text;
                }
            }
else
            {
Label1.Text = "";
            }
     }
  6. 以下の SelectedIndexChanged イベントをコードに追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim l As Label = DirectCast(C1Cialog1.FindControl("Label1"), Label)
Dim dl As DropDownList = DirectCast(C1Dialog1.FindControl("DropDownList1"), DropDownList)
Dim dlc As DropDownList = DirectCast(C1Dialog1.FindControl("DropDownList2"), DropDownList)
dlc.Items.Clear()
dlc.Items.Add(New ListItem("-"))
If dl.Text <> "-" Then
l.Text = "都市の選択：" + dl.Text
Select Case dl.Text
Case "UK"
dlc.Items.Add(New ListItem("London"))
dlc.Items.Add(New ListItem("Birmingham"))
dlc.Items.Add(New ListItem("Leeds"))
dlc.Items.Add(New ListItem("Glasgow"))
dlc.Items.Add(New ListItem("Glasgow"))
dlc.Items.Add(New ListItem("Sheffield"))
dlc.Items.Add(New ListItem("Bradford"))
dlc.Items.Add(New ListItem("Edinburgh"))
dlc.Items.Add(New ListItem("Liverpool"))
Exit Select
Case "USA"
dlc.Items.Add(New ListItem("New York, New York"))
dlc.Items.Add(New ListItem("Los Angeles, California"))
dlc.Items.Add(New ListItem("Chicago, Illinois"))
dlc.Items.Add(New ListItem("Houston, Texas"))
dlc.Items.Add(New ListItem("Philadelphia, Pennsylvania"))
dlc.Items.Add(New ListItem("Phoenix, Arizona"))
dlc.Items.Add(New ListItem("San Diego, California"))
dlc.Items.Add(New ListItem("Dallas, Texas"))
dlc.Items.Add(New ListItem("Detroit, Michigan"))
Exit Select
Case "Russia"
dlc.Items.Add(New ListItem("Moscow"))
dlc.Items.Add(New ListItem("Chelyabinsk"))
dlc.Items.Add(New ListItem("Ekaterinburg"))
dlc.Items.Add(New ListItem("Irkutsk"))
dlc.Items.Add(New ListItem("St. Petersburg"))
dlc.Items.Add(New ListItem("Volgograd"))
dlc.Items.Add(New ListItem("Petrozavodsk"))
dlc.Items.Add(New ListItem("Nizhni Novgorod"))
dlc.Items.Add(New ListItem("Novosibirsk"))
Exit Select
Case "Canada"
dlc.Items.Add(New ListItem("Toronto, Ontario"))
dlc.Items.Add(New ListItem("Montreal, Quebec"))
dlc.Items.Add(New ListItem("Vancouver, British Columbia"))
dlc.Items.Add(New ListItem("Calgary, Alberta"))
dlc.Items.Add(New ListItem("Edmonton, Alberta"))
dlc.Items.Add(New ListItem("Ottawa - Gatineau, Ontario/Quebec"))
Exit Select
Case Else
Exit Select
End Select
End If
End Sub

    C# コードの書き方

    C#
    コードのコピー 
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Label l = (Label)C1Dialog1.FindControl("Label1");
DropDownList dl = (DropDownList)C1Dialog1.FindControl("DropDownList1");
DropDownList dlc = (DropDownList)C1Dialog1.FindControl("DropDownList2");
dlc.Items.Clear();
dlc.Items.Add(new ListItem("-"));
if (dl.Text != "-")
   {
l.Text = "都市の選択：" + dl.Text;
switch (dl.Text) {
case "UK":
dlc.Items.Add(new ListItem("London"));
dlc.Items.Add(new ListItem("Birmingham"));
dlc.Items.Add(new ListItem("Leeds"));
dlc.Items.Add(new ListItem("Glasgow"));
dlc.Items.Add(new ListItem("Glasgow"));
dlc.Items.Add(new ListItem("Sheffield"));
dlc.Items.Add(new ListItem("Bradford"));
dlc.Items.Add(new ListItem("Edinburgh"));
dlc.Items.Add(new ListItem("Liverpool"));
break;
case "USA":
dlc.Items.Add(new ListItem("New York, New York"));
dlc.Items.Add(new ListItem("Los Angeles, California"));
dlc.Items.Add(new ListItem("Chicago, Illinois"));
dlc.Items.Add(new ListItem("Houston, Texas"));
dlc.Items.Add(new ListItem("Philadelphia, Pennsylvania"));
dlc.Items.Add(new ListItem("Phoenix, Arizona"));
dlc.Items.Add(new ListItem("San Diego, California"));
dlc.Items.Add(new ListItem("Dallas, Texas"));
dlc.Items.Add(new ListItem("Detroit, Michigan"));
break;
case "Russia":
dlc.Items.Add(new ListItem("Moscow"));
dlc.Items.Add(new ListItem("Chelyabinsk"));
dlc.Items.Add(new ListItem("Ekaterinburg"));
dlc.Items.Add(new ListItem("Irkutsk"));
dlc.Items.Add(new ListItem("St. Petersburg"));
dlc.Items.Add(new ListItem("Volgograd"));
dlc.Items.Add(new ListItem("Petrozavodsk"));
dlc.Items.Add(new ListItem("Nizhni Novgorod"));
dlc.Items.Add(new ListItem("Novosibirsk"));
break;
case "Canada":
dlc.Items.Add(new ListItem("Toronto, Ontario"));
dlc.Items.Add(new ListItem("Montreal, Quebec"));
dlc.Items.Add(new ListItem("Vancouver, British Columbia"));
dlc.Items.Add(new ListItem("Calgary, Alberta"));
dlc.Items.Add(new ListItem("Edmonton, Alberta"));
dlc.Items.Add(new ListItem("Ottawa - Gatineau, Ontario/Quebec"));
break;
default:
break;
          }
   }
}

このトピックは、次のことを示します。

アプリケーションを実行して、以下の手順を実行します。

  1. 最初のドロップダウンリストから国を選択します。
  2. 次の選択可能な都市のドロップダウンリストはサーバーから更新されることに注意してください。
  3. ドロップダウンリストから都市を選択して、〈OK〉をクリックします。

Web ページ上に都市の名前が反映されます。

 

 

Copyright © GrapeCity, Inc. All rights reserved.