ComponentOne AppView for ASP.NET WebForms
Tutorials / Creating an Event Planning Application / Step 2 of 4: Creating the Application's Web Forms / c. Creating the Events
In This Topic
    c. Creating the Events
    In This Topic

    In this step, you'll add the markup and code used to create the application's Events.

    1. From the Event folder, open the Create.aspx file by double-clicking it.
      1. Register the following assemblies by adding the following:

        To write code in Source View

        <%@ 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" %>
      2. Locate the <body>  </body> tags  on your page and insert the following markup between them:

        To write code in Source View

        <cc1:C1AppViewPage ID="C1AppViewPage1" runat="server" HeaderTitle="Create">
           <Header ID="Header1" runat="server">
                  <Template>
                         <h2>Create</h2>
                         <input type="button" value="Save" class="ui-btn-right" data-theme="b" onclick="$('#createForm').trigger('submit')" />
                  </Template>
           </Header>
           <Content ID="Content1" runat="server">
                  <Template>
                         <form id="createForm" 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>
      3.  Right-click the page and select View Code from the list. Check your references and make sure they resemble the following:

        To write code in C#

        C#
        Copy Code
        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;
      4. Add the following code to the Page_PreRenderComplete Event:

        To write code in C#

        C#
        Copy Code
        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. From the Event folder, double-click the Delete.aspx file to open it.
      1. Register the following assemblies by adding the following:

        To write code in Source View

        <%@ 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" %>
      2. Locate the <body> </body> tags on the page, and insert the following markup between them:

        To write code in Source View

        <cc1:C1AppViewPage ID="C1AppViewPage1" runat="server" HeaderTitle="Delete">
           <Header ID="Header1" runat="server">
                  <Template>
                         <h2>Delete</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>
      3. Right-click the page and select View Code from the list. Check your references and make sure they resemble the following:

        To write code in C#

        C#
        Copy Code
        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Web;
        using System.Web.UI;
        using System.Web.UI.WebControls;
        using YourApplicationName.Models;
      4. Edit the existing code so that it resembles the following:

        To write code in C#

        C#
        Copy Code
        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. From the Event folder, double click the Details file to open it. The Details.aspx file should open.
      1. At the top of the page, register your assemblies with the following block:

        To write code in Source View

        <%@ 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" %>
      2. Locate the <body> </body> tags on your page. Insert the following markup between them:

        To write code in Source View

        <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">Back</a>
                                <h2>Details</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>
      3. Right-click the page and select View Code from the list. Check your references and make sure they resemble the following:

        To write code in C#

        C#
        Copy Code
        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Web;
        using System.Web.UI;
        using System.Web.UI.WebControls;
        using YourApplicationName.Models;
      4. Edit the existing code to resemble the following:

        To write code in C#

        C#
        Copy Code
        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. From the Event folder, open the Edit file by double-clicking the Edit.aspx file.
      1. Register the C1ListView and C1AppView assemblies by adding this block below the page declaration:

        To write code in Source View

        <%@ 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" %>
      2. Locate the <body> </body> tags on your page. Insert the following markup between them:

        To write code in Source View

        <cc1:C1AppViewPage ID="C1AppViewPage1" runat="server" HeaderTitle="Edit">
           <Header ID="Header1" runat="server">
                  <Template>
                         <a href="Index.aspx">Cancel</a>
                         <h2>Create</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>
      3. Right-click the page and select View Code from the list. Check your references and make sure that they resemble the following:

        To write code in C#

        C#
        Copy Code
        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Web;
        using System.Web.UI;
        using System.Web.UI.WebControls;
        using YourApplicationName.Models;
      4. Edit the existing code so that it resembles the following:

        To write code in C#

        C#
        Copy Code
        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. From the Event folder, double-click the Index file to open it. The Index.aspx file should open.
      1. Register the C1ListView and C1AppView assemblies by adding this block below the page declaration:

        To write code in Source View

        <%@ 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" %>
      2. Locate the <body> </body> tags on your page. Insert the following markup between them:

        To write code in Source View

        <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">Back</a>
                            <h2>List View</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>
      3. Right-click the page and select View Code from the list. Check your references and make sure that they resemble the following:

        To write code in C#

        C#
        Copy Code
        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;
      4. Edit the existing code to reflect the following sample:

        To write code in C#

        C#
        Copy Code
        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);
                        }
                    }
                }
            }
        }