Papa Bob's Mega Solution Part 4 - Creating the Order Form

Tutorial Series: Free C# Fundamentals via ASP.NET Web Apps

Previous Article  |  Next Article


This is the fourth part of the solution for Papa Bob's Mega Challenge. In this part, we're going to style the Presentation layer's Default page according to the challenge specifications.

Step 1: Install Bootstrap and jQuery for your Project

Before we can begin, we'll need to install the proper packages so that we can take advantage of Bootstrap for styling the webpage. To do this, right-click on 'PapaBobs.Web' and select 'Manage NuGet Packages...' Click on the browse tab and search for Bootstrap:


cs-asp-070---papabobsmegachallenge-part4-001


Install the latest stable version of Bootstrap to your Web project (at the time of this writing, v3.3.7 is current). When you confirm that you would like to install Bootstrap, you may be presented with a dialog box asking if you would like to install jQuery as well, because Bootstrap has a dependency on jQuery. Click OK to continue:


cs-asp-070---papabobsmegachallenge-part4---012


Now, navigate to Default.aspx in the Source view. In order to use Bootstrap's stylings, we'll need to reference the Bootstrap.min.css file at the top of the page; just after the <title> tags and before the closing </head> tag. To do this, open the Content folder of the Persistence layer and select 'Bootstrap.min.css':


cs-asp-070---papabobsmegachallenge-part4-002


Drag and drop this file into the head section:


cs-asp-070---papabobsmegachallenge-part4-003


Now, open the scripts folder and drag and drop the 'bootstrap.min.js' and 'jquery-1.9.1.min.js' to the bottom of the file, just above the closing </body> tag:


cs-asp-070---papabobsmegachallenge-part4-004


Make sure to add the jQuery script prior to the Bootstrap script. If done properly, this will add all the necessary references for JavaScript and Bootstrap to function properly in your page.

Note: Leave the button control within the form for now. We'll modify the existing button when we get to that step.

Step 2: Creating the Main Div and Header

A designated form design was given at the onset of this challenge and is included in the Mega-Challenge-Docs folder:


cs-asp-070---papabobsmegachallenge-part4-005


The first step in creating this form is to use the appropriate div tags and classes that utilize Bootstrap. In this case, the div tag that will contain the entire form will use the "container" class:


cs-asp-070---papabobsmegachallenge-part4-006


At the very top of our page, we'll want to create a header to serve as the title of the website. Underneath it, we'll use a paragraph for the company's slogan. These will be wrapped in another div with a class of "page-header":


cs-asp-070---papabobsmegachallenge-part4-007


Step 3: Size and Crust DropDowns

The next items on our page are the DropDownLists for size and crust. We can create each of these in the Source view by declaring their ID and runat values:


cs-asp-070---papabobsmegachallenge-part4-008


While this declares the controls, it does not populate the list of drop-down items. Modify your code to include the ListItems for the different sizes and crusts, including a Text property and Value for each and a default option:


cs-asp-070---papabobsmegachallenge-part4-009


Now, all that's left for these controls is to style them by wrapping them in a div with a class of "form-group". Modify their properties to include a matching CssClass of "form-control", then create a label for each and add a line break between them for spacing:


cs-asp-070---papabobsmegachallenge-part4-010


Now, save and run your project to test and see what the form looks like:


cs-asp-070---papabobsmegachallenge-part4-011


Step 4: Adding CheckBoxes

The next step is to add CheckBoxes to the form to represent the toppings. The CheckBoxes will work differently than the other server controls with CSS, primarily because the text appears to the right of the control.

To begin with, create four CheckBox controls, assigning them their corresponding ID properties:


cs-asp-070---papabobsmegachallenge-part4---013


Next, wrap each CheckBox in a label, adding the text for each just before the closing label tag:


cs-asp-070---papabobsmegachallenge-part4---014


Finally, wrap the CheckBoxes in a div tag with class "CheckBox", using a line break to separate them:


cs-asp-070---papabobsmegachallenge-part4---015


Now, save and run your project to see the page so far:


cs-asp-070---papabobsmegachallenge-part4---016


Step 5: Creating the TextBoxes

Next, create another <h3> tag, surrounding the text 'Deliver To:' Beneath this, we'll add the TextBoxes that users will type in their name, address and so on. To begin with this, create a new form-group div:


cs-asp-070---papabobsmegachallenge-part4---017


Inside this div, create four new TextBoxes: One for Name, Address, Zip Code and Phone:


cs-asp-070---papabobsmegachallenge-part4---018


Next, create labels for each that will allow the user to distinguish each TextBox from the other. Then, add spacing with a line break between them:


cs-asp-070---papabobsmegachallenge-part4---019


Once again, save and run your application to verify everything functions properly so far:


cs-asp-070---papabobsmegachallenge-part4---020


Step 6: Finalizing the Form

The last things to add to the form are the RadioButtons for the payment type. Once again, create an <h2> tag with the text 'Payment:' inside it. Underneath this, create two RadioButtons with a GroupName of PaymentGroup. Wrap these controls in labels, just like the CheckBoxes. The label for each should say either 'Cash' or 'Credit'. Finally, surround each RadioButton in a div with class of "radio":


cs-asp-070---papabobsmegachallenge-part4---021


Next, we'll need to style the button with the appropriate color and shape. To do this, wrap it in a form-group div and add a 'CssClass' property to the button:


cs-asp-070---papabobsmegachallenge-part4---022


Finally, add another <h3> with the text 'Total Cost:'. Underneath this, add a resultLabel surrounded by a form-group div class:


cs-asp-070---papabobsmegachallenge-part4---023


Now, save and run your application to see the completed form:


cs-asp-070---papabobsmegachallenge-part4---024

Conclusion:

This concludes this part of the solution for the Mega Challenge. At this point, we have everything we need to capture the information for the user's own custom order. In the next part, we'll begin creating the logic to create an order form this form.


Related Articles in this Tutorial:

Lesson 1 - Series Introduction

Lesson 2 - Installing Visual Studio 2015

Lesson 3 - Building Your First Web App

Lesson 4 - Understanding What You Just Did

Lesson 5 - Working with Projects in Visual Studio

Lesson 6 - Simple Web Page Formatting in Visual Studio

Challenge 1

Solution 1

Lesson 7 - Variables and Data Types

Lesson 8 - Data Type Conversion

Lesson 9 - Arithmetic Operators

Lesson 10 - C# Syntax Basics

Challenge 2 - ChallengeSimpleCalculator

Solution - ChallengeSimpleCalculator

Lesson 11 - Conditional If Statements

Lesson 12 - The Conditional Ternary Operator

Challenge 3 - ChallengeConditionalRadioButton

Solution - Challenge Conditional RadioButton

Lesson 13 - Comparison and Logical Operators

Lesson 13 Challenge - First Papa Bob's Website

Solution - Challenge First Papa Bob's Website

Lesson 14 - Working with Dates and Times

Lesson 15 - Working With Spans of Time

Lesson 16 - Working with the Calendar Server Control

Challenge 4 - Challenge Days Between Dates

Solution - Challenge Days Between Dates

Lesson 17 - Page_Load and Page.IsPostBack

Lesson 18 - Setting a Break Point and Debugging

Lesson 19 - Formatting Strings

Challenge 5 - Challenge Epic Spies Assignment

Solution - Challenge Epic Spies Assignment

Lesson 20 - Maintaining State with ViewState

Lesson 21 - Storing Values in Arrays

Lesson 22 - Understanding Multidimensional Arrays

Lesson 23 - Changing the Length of an Array

Challenge 6 - Challenge Epic Spies Asset Tracker

Solution - Challenge Epic Spies Asset Tracker

Lesson 24 - Understanding Variable Scope

Lesson 25 - Code Blocks and Nested If Statements

Lesson 26 - Looping with the For Iteration Statement

Challenge 7 - Challenge For Xmen Battle Count

Solution - Challenge For Xmen Battle Count

Lesson 27 - Looping with the while() & do...while() Iteration Statements

Lesson 28 - Creating and Calling Simple Helper Methods

Lesson 29 - Creating Methods with Input Parameters

Lesson 30 - Returning Values from Methods

Lesson 31 - Creating Overloaded Methods

Lesson 32 - Creating Optional Parameters

Lesson 33 - Creating Names Parameters

Lesson 34 - Creating Methods with Output Parameters

Challenge 8 - Challenge Postal Calculator Helper Methods

Solution - Challenge Postal Calculator Helper Methods

Mega Challenge Casino

Solution - Mega Challenge Casino

Lesson 35 - Manipulating Strings

Challenge 9 - Phun With Strings

Solution - Challenge Phun With Strings

Lesson 36 - Introduction to Classes and Objects

Challenge - Hero Monster Classes Part 1

Solution - Hero Monster Classes Part 1

Challenge - Hero Monster Classes Part 2

Solution - Challenge Hero Monster Classes Part 2

Lesson 37 - Creating Class Files Creating Cohesive Classes and Code Navigation

Lesson 38 - Understanding Object References and Object Lifetime

Lesson 39 - Understanding the .NET Framework and Compilation

Lesson 40 - Namespaces and Using Directives

Lesson 41 - Creating Class Libraries and Adding References to Assemblies

Lesson 42 - Accessibility Modifiers, Fields and Properties

Lesson 43 - Creating Constructor Methods

Lesson 44 - Naming Conventions for Identifiers

Lesson 45 - Static vs Instance Members

Challenge 10 - Challenge Simple Darts

Solution - Challenge Simple Darts

Lesson 46 - Working with the List Collection

Lesson 47 - Object Initializers

Lesson 48 - Collection Initializers

Lesson 49 - Working with the Dictionary Collection

Lesson 50 - Looping with the foreach Iteration Statement

Lesson 51 - Implicitly-Typed Variables with the var Keyword

Challenge 11 - Challenge Student Courses

Solution - Challenge Student Courses

Mega Challenge War

Solution - Mega Challenge War

Lesson 52 - Creating GUIDs

Lesson 53 - Working with Enumerations

Lesson 54 - Understanding the switch() Statement

Lesson 55 - First Pass at the Separation of Concerns Principle

Lesson 56 - Understanding Exception Handling

Lesson 57 - Understanding Global Exception Handling

Lesson 58 - Understanding Custom Exceptions

Lesson 59 - Creating a Database in Visual Studio

Lesson 60 - Creating an Entity Data Model

Lesson 61 - Displaying the DbSet Result in an ASP.NET GridView

Lesson 62 - Implementing a Button Command in a GridView

Lesson 63 - Using a Tools-Centric Approach to Building a Database Application

Lesson 64 - Using a Maintenance-Driven Approach to Building a Database Application

Lesson 65 - Creating a New Instance of an Entity and Persisting it to the Database

Lesson 66 - Package Management with NuGet

Lesson 67 - NuGet No-Commit Workflow

Lesson 68 - Introduction the Twitter Bootstrap CSS Framework

Lesson 69 - Mapping Enum Types to Entity Properties in the Framework Designer

Lesson 70 - Deploying the App to Microsoft Azure Web Services Web Apps

Papa Bob's Mega Challenge

Papa Bob's Mega Solution Part 1 - Setting up the Solution

Papa Bob's Mega Solution Part 2 - Adding an Order to the Database

Papa Bob's Mega Solution Part 3 - Passing an Order from the Presentation Layer

Papa Bob's Mega Solution Part 4 - Creating the Order Form

Papa Bob's Mega Solution Part 5 - Adding Enums

Papa Bob's Mega Solution Part 6 - Creating an Order with Validation

Papa Bob's Mega Solution Part 7 - Calculating the Order Price

Papa Bob's Mega Solution Part 8 - Displaying the Price to the User

Papa Bob's Mega Solution Part 9 - Creating the Order Management Page


Comments

Please login or register to add a comment