AppView for ASP.NET WebForms
c. イベントの作成
チュートリアル > イベント計画アプリケーションの作成 > 手順 2：アプリケーションの Web フォームの作成 > c. イベントの作成
全て展開
すべて折りたたむ

この手順では、アプリケーションのイベントを作成するために使用されるマークアップとコードを追加します。

  1. Event フォルダから、Create.aspx ファイルをダブルクリックして開きます。
    • 次のコードを追加して、以下のアセンブリを登録します。
      ソースビュー
      コードのコピー

      <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1ListView" TagPrefix="cc1" %>

      <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1AppView" TagPrefix="cc1" %>
    • ページ内の <body> </body> タグに移動し、このタグの間に次のマークアップを挿入します。

      追加するマークアップ

      コードのコピー
      <asp:EntityDataSource ID="EventPlannerEntityDataSource" runat="server"
                  OnContextCreating="EventPlannerEntityDataSource_ContextCreating"
                  EntitySetName="Events">
            </asp:EntityDataSource>
            <cc1:C1AppViewPage ID="C1AppViewPage1" runat="server" HeaderTitle="Event Calendar">
                  <Header ID="Header1" runat="server">
                        <Template>
                              <a href="../Main.aspx" data-icon="back">Back</a>
                              <h2>Event Calendar</h2>
                        </Template>
                  </Header>
                  <Content ID="Content1" runat="server">
                        <Template>
                              <cc1:C1EventsCalendar ID="C1EventsCalendar1" runat="server">
                                    <DataStorage>
                                          <EventStorage DataSourceID="EventPlannerEntityDataSource">
                                                <Mappings>
                                                      <IdMapping MappingName="Id" />
                                                      <SubjectMapping MappingName="Subject" />
                                                      <StartMapping MappingName="Start" />
                                                      <EndMapping MappingName="End" />
                                                      <LocationMapping MappingName="Location" />
                                                      <DescriptionMapping MappingName="Description" />
                                                </Mappings>
                                          </EventStorage>
                                    </DataStorage>
                              </cc1:C1EventsCalendar>
                        </Template>
                  </Content>
            </cc1:C1AppViewPage>
    • ページを右クリックし、リストから［コードの表示］を選択します。参照が次のようになっていることを確認します。

      C# コードの書き方

      C#
      コードのコピー
      using System;
      using System.Collections.Generic;
      using System.IO;
      using System.Linq;
      using System.Web;
      using System.Web.UI;
      using System.Web.UI.WebControls;
      using YourApplicationName.Models;
    • Page_PreRenderComplete イベントに次のコードを追加します。

      C# コードの書き方

      C#
      コードのコピー
      protected void Page_PreRenderComplete(object sender, EventArgs e)
              {
                  if (!IsPostBack)
                  {
                      EventObj newEvent = EventAction.Create();
                      SubjectInput.Text = newEvent.Subject;
                      LocationInput.Text = newEvent.Location;
                      StartInput.Text = newEvent.Start.ToString("G");
                      EndInput.Text = newEvent.End.ToString("G");
                      DescriptionInput.Text = newEvent.Description;
                      AllDayInput.SelectedON = newEvent.AllDay;
                      createForm.Action = "/Event/Create.aspx";
                  }
                  else
                  {
                      EventObj newEvent = EventAction.Create();
                      newEvent.Subject = SubjectInput.Text;
                      newEvent.Location = LocationInput.Text;
                      newEvent.Start = DateTime.Parse(StartInput.Text);
                      newEvent.End = DateTime.Parse(EndInput.Text);
                      newEvent.Description = DescriptionInput.Text;
                      newEvent.AllDay = AllDayInput.SelectedON;
                      EventAction.Add(newEvent);
                      Response.Redirect("../Main.aspx#appviewpage=Event/Index.aspx");
                  }
              }
          }
  2. Event フォルダから、Delete.aspxファイルをダブルクリックして開きます。
    • 次のコードを追加して、以下のアセンブリを登録します。
      ソースビュー
      コードのコピー

      <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1ListView" TagPrefix="cc1" %>

      <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1AppView" TagPrefix="cc1" %>
    • ページ内の <body> </body> タグに移動し、このタグの間に次のマークアップを挿入します。

      追加するマークアップ

      コードのコピー
      <cc1:C1AppViewPage ID="C1AppViewPage1" runat="server" HeaderTitle="Delete">
         <Header ID="Header1" runat="server">
               <Template>
                     <h2>削除</h2>
               </Template>
         </Header>
         <Content ID="Content1" runat="server">
               <Template>
                     <form id="deleteForm" runat="server">
                           <cc1:C1ListView ID="C1ListView1" runat="server" Inset="true">
                                 <Items>
                              <cc1:C1ListViewInputItem ID="SubjectInput" LabelText="Subject" Type="label"></cc1:C1ListViewInputItem>
                                 </Items>
                           </cc1:C1ListView>
                           <input type="button" value="Delete" data-theme="e" onclick="$('#deleteForm').trigger('submit')" />
                           <a href="Index.aspx" data-theme="c" data-role="button">Cancel</a>  
                     </form>
               </Template>
         </Content>
      </cc1:C1AppViewPage>
    • ページを右クリックし、リストから［コードの表示］を選択します。参照が次のようになっていることを確認します。

      C# コードの書き方

      C#
      コードのコピー
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.UI;
      using System.Web.UI.WebControls;
      using YourApplicationName.Models;
    • 既存のコードを次のように編集します。

      C# コードの書き方

      C#
      コードのコピー
      public partial class Delete : System.Web.UI.Page
          {
              protected int id;
              protected void Page_PreRenderComplete(object sender, EventArgs e)
              {
                  if (!IsPostBack)
                  {
                      id = int.Parse(Request["id"]);
                      EventObj detail = EventAction.GetEventDetail(id);
                      SubjectInput.Text = detail.Subject;
                      deleteForm.Action = "/Event/Delete.aspx?id=" + id.ToString();
                  }
                  else
                  {
                      id = int.Parse(Request["id"]);
                      EventAction.Delete(id);
                      Response.Redirect("../Main.aspx#appviewpage=Event/Index.aspx");
                  }
              }
          }
      }
  3. Event フォルダから、Detailsファイルをダブルクリックして開きます。Details.aspx ファイルが開きます。
    • ページの上部で、以下のブロックを使用してアセンブリを登録します。
      ソースビュー
      コードのコピー

      <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1ListView" TagPrefix="cc1" %>

      <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1AppView" TagPrefix="cc1" %>
    • ページ内の <body> </body> タグに移動します。このタグの間に次のマークアップを挿入します。

      追加するマークアップ

      コードのコピー
      <form id="detailForm" runat="server">
         <cc1:C1AppViewPage ID="C1AppViewPage1" runat="server" HeaderTitle="Details">
               <Header ID="Header1" runat="server">
                     <Template>
                           <a href="Index.aspx" data-icon="back">戻る</a>
                           <h2>詳細</h2>
                           <a href="Edit.aspx?id=<%=id %>" data-icon="gear">Edit</a>
                     </Template>
               </Header>
               <Content ID="Content1" runat="server">
                     <Template>
                           <cc1:C1ListView ID="C1ListView1" runat="server" Inset="true">
                                 <Items>
                              <cc1:C1ListViewInputItem ID="SubjectInput" LabelText="Subject" Type="label"></cc1:C1ListViewInputItem>
                              <cc1:C1ListViewInputItem ID="LocationInput" LabelText="Location" Type="label"></cc1:C1ListViewInputItem>
                              <cc1:C1ListViewInputItem ID="StartInput" LabelText="Start" Type="label"></cc1:C1ListViewInputItem>
                              <cc1:C1ListViewInputItem ID="EndInput" LabelText="End" Type="label"></cc1:C1ListViewInputItem>
                              <cc1:C1ListViewInputItem ID="DescriptionInput" LabelText="Description" Type="label"></cc1:C1ListViewInputItem>
                              <cc1:C1ListViewFlipSwitchItem ID="AllDayInput" LabelText="AllDay" Disable="true" ONMessage="Yes" ONValue="true" OFFMessage="No" OFFValue="false"></cc1:C1ListViewFlipSwitchItem>
                                 </Items>
                           </cc1:C1ListView>
                           <a href="Delete.aspx?id=<%=id %>" data-role="button" data-theme="e">Delete</a>
                     </Template>
               </Content>
         </cc1:C1AppViewPage>
      </form>
    • ページを右クリックし、リストから［コードの表示］を選択します。参照が次のようになっていることを確認します。

      C# コードの書き方

      C#
      コードのコピー
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.UI;
      using System.Web.UI.WebControls;
      using YourApplicationName.Models;
    • 既存のコードを次のように編集します。

      C# コードの書き方

      C#
      コードのコピー
      public partial class Details : System.Web.UI.Page
          {
              protected int id;
              protected void Page_PreRenderComplete(object sender, EventArgs e)
              {
                  if (!IsPostBack)
                  {
                      id = int.Parse(Request["id"]);
                      EventObj eventDetail = EventAction.GetEventDetail(id);
                      SubjectInput.Text = eventDetail.Subject;
                      LocationInput.Text = eventDetail.Location;
                      StartInput.Text = eventDetail.Start.ToString("G");
                      EndInput.Text = eventDetail.End.ToString("G");
                      DescriptionInput.Text = eventDetail.Description;
                      AllDayInput.SelectedON = eventDetail.AllDay;
                  }
              }
          }
      }
  4. Event フォルダから、Edit.aspxファイルをダブルクリックして開きます。
    • ページ宣言の下に次のブロックを追加して、C1ListView および ソースビュー

      <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1ListView" TagPrefix="cc1" %>

      <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1AppView" TagPrefix="cc1" %>
    • ページ内の <body> </body> タグに移動します。このタグの間に次のマークアップを挿入します。

      追加するマークアップ

      コードのコピー
      <cc1:C1AppViewPage ID="C1AppViewPage1" runat="server" HeaderTitle="Edit">
         <Header ID="Header1" runat="server">
               <Template>
                     <a href="Index.aspx">キャンセル</a>
                     <h2>作成</h2>
                     <input type="button" value="Save" class="ui-btn-right" data-theme="b" onclick="$('#editForm').trigger('submit')" />
               </Template>
         </Header>
         <Content ID="Content1" runat="server">
               <Template>
                     <form id="editForm" runat="server">
                           <cc1:C1ListView ID="C1ListView1" runat="server" Inset="true">
                                 <Items>
                              <cc1:C1ListViewInputItem ID="SubjectInput" LabelText="Subject" Type="text"></cc1:C1ListViewInputItem>
                              <cc1:C1ListViewInputItem ID="LocationInput" LabelText="Location" Type="text"></cc1:C1ListViewInputItem>
                              <cc1:C1ListViewInputItem ID="StartInput" LabelText="Start" Type="text"></cc1:C1ListViewInputItem>
                              <cc1:C1ListViewInputItem ID="EndInput" LabelText="End" Type="text"></cc1:C1ListViewInputItem>
                              <cc1:C1ListViewInputItem ID="DescriptionInput" LabelText="Description" Type="text"></cc1:C1ListViewInputItem>
                              <cc1:C1ListViewFlipSwitchItem ID="AllDayInput" LabelText="AllDay" ONMessage="Yes" ONValue="true" OFFMessage="No" OFFValue="false"></cc1:C1ListViewFlipSwitchItem>
                                 </Items>
                           </cc1:C1ListView>
                     </form>
               </Template>
         </Content>
      </cc1:C1AppViewPage>
    • ページを右クリックし、リストから［コードの表示］を選択します。参照が次のようになっていることを確認します。

      C# コードの書き方

      C#
      コードのコピー
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.UI;
      using System.Web.UI.WebControls;
      using YourApplicationName.Models;
    • 既存のコードを次のように編集します。

      C# コードの書き方

      C#
      コードのコピー
      public partial class Edit : System.Web.UI.Page
          {
              private EventObj detail;
              protected int id;
              protected void Page_PreRenderComplete(object sender, EventArgs e)
              {
                  if (!IsPostBack)
                 {
                      id = int.Parse(Request["id"]);
                      detail = EventAction.GetEventDetail(id);
                      SubjectInput.Text = detail.Subject;
                      LocationInput.Text = detail.Location;
                      StartInput.Text = detail.Start.ToString("G");
                      EndInput.Text = detail.End.ToString("G");
                      DescriptionInput.Text = detail.Description;
                      AllDayInput.SelectedON = detail.AllDay;
                      editForm.Action = "/Event/Edit.aspx?id=" + id.ToString();
                  }
                  else
                  {
                      id = int.Parse(Request["id"]);
                      detail = EventAction.GetEventDetail(id);
                      detail.Subject = SubjectInput.Text;
                      detail.Location = LocationInput.Text;
                      detail.Start = DateTime.Parse(StartInput.Text);
                      detail.End = DateTime.Parse(EndInput.Text);
                      detail.Description = DescriptionInput.Text;
                      detail.AllDay = AllDayInput.SelectedON;
                      EventAction.Edit(detail);
                      Response.Redirect("../Main.aspx#appviewpage=Event/Index.aspx");
                  }
              }
          }
      }
  5. Event フォルダから、Index ファイルをダブルクリックして開きます。Index.aspx ファイルが開きます。
    • ページ宣言の下に次のブロックを追加して、C1ListView および C1AppView アセンブリを登録します。
      ソースビュー
      コードのコピー

      <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1ListView" TagPrefix="cc1" %>

      <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1AppView" TagPrefix="cc1" %>
    • ページ内の <body> </body> タグに移動します。このタグの間に次のマークアップを挿入します。

      追加するマークアップ

      コードのコピー
      <form id="form1" runat="server">
              <cc1:C1AppViewPage ID="C1AppViewPage1" runat="server" HeaderTitle="List View">
                  <Header ID="Header1" runat="server">
                      <Template>
                          <a href="../Main.aspx" data-icon="back">戻る</a>
                          <h2>リストビュー</h2>
                          <a href="Create.aspx" data-icon="plus" data-iconpos="notext">Add</a>
                      </Template>
                  </Header>
                  <Content ID="Content1" runat="server">
                      <Template>
                          <cc1:C1ListView ID="C1ListView1" runat="server" Inset="true">
                          </cc1:C1ListView>
                      </Template>
                  </Content>
              </cc1:C1AppViewPage>
          </form>
    • ページを右クリックし、リストから［コードの表示］を選択します。参照が次のようになっていることを確認します。

      C# コードの書き方

      C#
      コードのコピー
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.UI;
      using System.Web.UI.HtmlControls;
      using System.Web.UI.WebControls;
      using C1.Web.Wijmo.Controls.C1ListView;
      using C1.Web.Wijmo.Controls.C1ListView;
      using YourApplicationName.Models;
    • 既存のコードを次のサンプルのように編集します。

      C# コードの書き方

      C#
      コードのコピー
      public partial class Index : System.Web.UI.Page
          {
              protected void Page_Load(object sender, EventArgs e)
              {
                  if (!IsPostBack)
                  {
                      foreach (EventObj item in EventAction.GetEvents())
                      {
                          C1ListViewLinkItem listItem = new C1ListViewLinkItem();
                          listItem.Text = item.Subject;
                          listItem.NavigateUrl = "/Event/Details.aspx?id=" + item.Id;
                          C1ListView1.Items.Add(listItem);
                      }
                  }
              }
          }
      }

 

 

Copyright © GrapeCity, Inc. All rights reserved.