ComponentOne AppView for ASP.NET WebForms
Quick Start / Step 2 of 3: Add C1AppViewItems and C1AppViewPages
In This Topic
    Step 2 of 3: Add C1AppViewItems and C1AppViewPages
    In This Topic

    In this step you'll add a C1AppViewItem and C1AppViewPages to your application. Complete the following steps to customize your AppView for ASP.NET Web Forms control:

    1. Click the opening <cc1:C1AppView> tag to reveal the control's smart tag .
    2. Locate the Mobile Mode option in the C1AppView Tasks Menu and check the checkbox.
    3. Click the page to close the C1AppView Tasks Menu.
    4. Alter the <cc1:C1AppView> markup so that it resembles the markup that follows. This will add one C1AppViewItems to your project:

      To write code in Source View

                      
<cc1:C1AppView ID="C1AppView1" runat="server" HeaderTitle="Home Page" Height="300px">
     <DefaultContent>
        <p>
        This application was built with Wijmo, jQuery Mobile. Learn more about Wijmo at <ahref="http://wijmo.com">http://wijmo.com</a>.
        </p>
    </DefaultContent>
       <Items>
          <cc1:C1AppViewItem Text="Wizard" AppViewPageUrl="/Wizard/Index.aspx">
          </cc1:C1AppViewItem>
       </Items>
</cc1:C1AppView>
      Note that the AppViewPageUrl property is set. In the next step, you'll add the C1AppViewPages.
    5. In the Solution Explorer, right-click the name of your application. Select Add | New Folder from the menu. Name the added folder Wizard.
    6. Right-click the Wizard folder and complete the following steps:
      1. Select Add | New Item from the menu.
      2. From the Add New Item dialog window, select Web Form and name it Index.aspx. The page should open when you click OK.
    7. Select the Index.aspx page and edit the markup within the <body> tags so that it resembles the following:
      Markup
      Copy Code 
      <cc1:C1AppViewPage runat="server">
   <content id="Content1" runat="server">
       <Template> 
          <cc1:C1Wizard ID="C1Wizard1" runat="server" Delay="300">
             <steps>
               <cc1:C1WizardStep runat="server" Title="Step1" ID="C1Wizard1_Step1">
                 Mauris eleifend est et turpis. Duis id erat. Duis cursus.
               </cc1:C1WizardStep>
               <cc1:C1WizardStep runat="server" Title="Step2" ID="C1Wizard1_Step2">
                 This is the second step.
               </cc1:C1WizardStep>
               <cc1:C1WizardStep runat="server" Title="Step3" ID="C1Wizard1_Step3">
                 This is the third step.
               </cc1:C1WizardStep>
               <cc1:C1WizardStep runat="server" Title="Step4" ID="C1Wizard1_Step4">
                This is the fourth step.
               </cc1:C1WizardStep>
               <cc1:C1WizardStep runat="server" Title="Step5" ID="C1Wizard1_Step5">
                This is the final step.
               </cc1:C1WizardStep>
             </steps>
         </cc1:C1Wizard>    
      </Template>
   </content>
</cc1:C1AppViewPage>