Creating the frontend view

To create the job application upload form, perform the following:

1. In the context menu of the Views folder, click Add » New Item...

   NOTE: Visual Studio does not provide a dialog option to directly create a user control. You must create a file of another type and change its extension.

2. In the left pane, select Visual C# » Code.

3. Click Class and in the Name input field, enter JobApplicationUpload.

4. From the context menu of JobApplicationUpload.cs, click Rename.

5. Change the extension to .ascx.

6. Open the newly created file and clear its content.

7. Define the markup by pasting the following code:

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

   <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

   <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>

   <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all"></telerik:RadFormDecorator>

    

   <sitefinity:Message

               runat="server"

               ID="message"

               ElementTag="div"

               RemoveAfter="30000"

               FadeDuration="10" />

    

   <asp:Label ID="Label1" Text="<%$ Resources:JobsResources, FirstName %>" runat="server" AssociatedControlID="FirstName" Font-Bold="True"/><br />

    

   <asp:TextBox ID="FirstName" runat="server" Width="100%"/>

   <asp:RequiredFieldValidator ID="FirstNameRequired" runat="server" CssClass="sfError" Display="Dynamic"

                               ControlToValidate="FirstName" SetFocusOnError="true">

                               <strong><%$ Resources:JobsResources, FirstNameRequiredstrong>

                           </asp:RequiredFieldValidator>

   <br /><br />

    

   <asp:Label ID="Label2" Text="<%$ Resources:JobsResources, LastName %>" runat="server" AssociatedControlID="LastName" Font-Bold="True"/><br />

    

   <asp:TextBox ID="LastName" runat="server" Width="100%" />

   <asp:RequiredFieldValidator ID="LastNameRequired" runat="server" CssClass="sfError" Display="Dynamic"

                               ControlToValidate="LastName" SetFocusOnError="true">

                               <strong><%$ Resources:JobsResources, LastNameRequiredstrong>

                           </asp:RequiredFieldValidator>

   <br /><br />

   <asp:Label ID="Label4" Text="<%$ Resources:JobsResources, PhoneNumber %>" runat="server" AssociatedControlID="Phone" Font-Bold="True"/><br />

    

   <asp:TextBox ID="Phone" runat="server" Width="100%" />

   <asp:RequiredFieldValidator ID="PhoneRequired" runat="server" CssClass="sfError" Display="Dynamic"

                               ControlToValidate="Phone" SetFocusOnError="true">

                               <strong><%$ Resources:JobsResources, PhoneNumberRequiredstrong>

                           </asp:RequiredFieldValidator>

   <br /><br />

   <asp:Label ID="Label5" Text="<%$ Resources:JobsResources, HowDidYouHear %>" runat="server" AssociatedControlID="HowDidYouHear" Font-Bold="True"/><br />

    

   <telerik:RadComboBox ID="HowDidYouHear" runat="server">

   <Items>

       <telerik:RadComboBoxItem runat="server" Value="Internet Ad" Text="<%$ Resources:JobsResources, InternetAd %>"/>

       <telerik:RadComboBoxItem runat="server" Value="Mobile Phone Ad" Text="<%$ Resources:JobsResources, MobilePhoneAd %>"/>

       <telerik:RadComboBoxItem runat="server" Value="Social Network" Text="<%$ Resources:JobsResources, SocialNetwork %>"/>

       <telerik:RadComboBoxItem runat="server" Value="Television Ad" Text="<%$ Resources:JobsResources, TelevisionAd %>"/>

       <telerik:RadComboBoxItem runat="server" Value="Web Link" Text="<%$ Resources:JobsResources, WebLink %>"/>

       <telerik:RadComboBoxItem runat="server" Value="Web Search" Text="<%$ Resources:JobsResources, WebSearch %>"/>

       <telerik:RadComboBoxItem runat="server" Value="Magazine Ad" Text="<%$ Resources:JobsResources, MagazineAd %>"/>

       <telerik:RadComboBoxItem runat="server" Value="Other" Text="<%$ Resources:JobsResources, Other %>"/>

   </Items>

   </telerik:RadComboBox>

   <br /><br />

    

   <asp:Label ID="Label6" Text="<%$ Resources:JobsResources, MotivationalTextOptional %>" runat="server" AssociatedControlID="MotivationalText" Font-Bold="True"/><br />

   <asp:TextBox runat="server" ID="MotivationalText" Height="150px" Width="100%" TextMode="MultiLine"></asp:TextBox>

   <br />

   <asp:Button runat="server" ID="SubmitButton" Text="<%$ Resources:JobsResources, Submit %>" Width="60px" />

8. In the Properties pane of the JobApplicationUploadTemplate.ascx file, change the Build Action to Embedded Resource.

9. From the context menu of folder PublicControls, click Add » New Item...

10. In the left pane, select Visual C# » Code.

11. Click Class and in the Name input field, enter JobApplicationUpload.

12. Open the file in Visual Studio and add the following namespaces:

    using System.Web.UI;

    using System.Web.UI.WebControls;

    using Telerik.Sitefinity.Modules.Pages.Web.UI;

    using Telerik.Sitefinity.Web.UI;

    using Telerik.Web.UI;

13. Change the class definition to:

    [RequireScriptManager]

    public class JobApplicationUpload : SimpleView

    {

     

    }

14. Reference the embedded template by pasting the following code into the class body:

    protected override string LayoutTemplateName

    {

        get

        {

            return null;

        }

    }

     

    public override string LayoutTemplatePath

    {

        get

        {

            var path = JobsModule.JobsVirtualPath + layoutTemplateName;

            return path;

        }

        set

        {

            base.LayoutTemplatePath = value;

        }

    }

     

    private const string layoutTemplateName = "Jobs.Resources.Views.JobApplicationUpload.ascx";

     

    protected override HtmlTextWriterTag TagKey

    {

        get

        {

            return HtmlTextWriterTag.Div;

        }

    }

15. Provide properties for the user input in the following way:

    protected virtual string Phone

    {

        get

        {

            return this.Container.GetControl<TextBox>("Phone", true).Text;

        }

    }

     

    protected virtual string FirstName

    {

        get

        {

            return this.Container.GetControl<TextBox>("FirstName", true).Text;

        }

    }

     

    protected virtual string LastName

    {

        get

        {

            return this.Container.GetControl<TextBox>("LastName", true).Text;

        }

    }

     

    protected virtual string MotivationalText

    {

        get

        {

            return this.Container.GetControl<TextBox>("MotivationalText", true).Text;

        }

    }

     

    protected RadComboBox HowDidYouHear

    {

        get

        {

            return this.Container.GetControl<RadComboBox>("HowDidYouHear", true);

        }

    }

16. In the same way, provide references to the Message control by pasting the following code:

    protected Message Message

    {

        get

        {

            return this.Container.GetControl<Message>("message", true);

        }

    }

17. In the InitializeControls method, create an event handler for the form submission event by pasting this code:

    protected override void InitializeControls(GenericContainer controlContainer)

    {

        controlContainer.GetControl<Button>("SubmitButton", true).Click += new EventHandler(JobApplicationUpload_Click);

    }

18. Define the JobApplicationUpload_Click method in the following way:

    private void JobApplicationUpload_Click(object sender, EventArgs e)

    {

        var manager = new JobsManager();

        var application = manager.CreateJobApplication();

     

        application.FirstName = this.FirstName;

        application.LastName = this.LastName;

        application.Phone = this.Phone;

        application.Referral = this.HowDidYouHear.SelectedValue;

        application.Text = this.MotivationalText;

     

        manager.SaveChanges();

     

        Message.ShowPositiveMessage("Your application was submitted successfully");

    }

19. Save the file.

In the markup, first, you register the necessary assemblies, so that they can be used in the template. You create a RadFormDecorator, which automatically makes the form elements look prettier. Then you create a Message control, which will display error and success messages. Then, you create labeled TextBoxes for the user input. You bind form validators, so that the user provides correct input. The labels are fetched from Resources, which are defined in JobsResources.

In JobApplicationUpload.cs, you reference the controls from the JobApplicationUploadTemplate by calling GetControl and returning the controls’ values. In the event handler for the form submission event, the control instantiates a JobsManager instance which works with the default provider. It creates a new JobApplication, populates it with the user’s input and saves it. Finally, it notifies the user for a successfully submitted application by calling Message.ShowPositiveMessage("Your application was uploaded successfully");.