BTI420 Lab 1

Getting started with an ASP.NET MVC project. The theme of this assignment is to deliver data to a view, and personalize the project template.

.

BTI420 Lab 1 – Due at the end of the Thursday or Monday class

Due date, Thursday section B: Thursday, January 15, 2015, at 9:45am ET

Due date, Monday section A: Monday, January 19, 2015, at 3:15pm ET

Grade value: 2% of your final course grade

.

Objective(s)

Get experience developing an ASP.NET MVC web app using Visual Studio.

Deliver data to a view, which requires you to successfully learn the fundamentals of the model-view-controller (MVC) design pattern.

.

Introduction to the problem that you will solve

We need a web app that will display information about you.

.

Get started with Lab 1

Create a new project. Its name will be “Lab1″.

It will be an “ASP.NET Web Application”. From the left-side navigator, choose:
Installed >
Templates >
Visual C# >
Web

On the next dialog, choose:
MVC
Authentication: No Authentication
Host in the cloud: un-check / clear

.

Run the app

From the DEBUG menu, choose Start Without Debugging (or press Ctrl+F5). Your app should load in a browser.

Notice that its appearance is plain. That’s OK.

However, the content is not good enough. You must customize the existing pages, and include personal information on the “About” and “Contact” pages.

.

Edit the template for all pages

In an ASP.NET MVC app, the default appearance template is here:

Views > Shared > _Layout.cshtml

Incidentally, the Bootstrap framework is used as the front end web framework. You will learn more about Bootstrap later this semester.

This template describes the header, its menu options, and the footer.

There are a number of changes that you can make here to ‘personalize’ the app:

  • page title
  • application name
  • copyright identifier

.

Edit the Home controller’s Index view

The Index view is shown by default when a browser requests the app root. The project template adds filler text to the view.

The top div – identified as “jumbotron” – holds the large-size title, and some descriptive text. Personalize that.

Edit one of the button links, and point it at this document (the Lab 1 specifications).

An example of what it could look like is shown below.

index

.

Edit the Home controller’s About method

The About view will show information about you. The information comes from a data object that you configure in the Home controller’s About method.

At the bottom of the HomeController.cs source code file, add a class named Student. It will have these members:

Properties

  • Id – int
  • LastName and FirstName – string
  • CollegeStartDate – DateTime
  • CountryOfBirth – string
  • Interests – string

Constructors

  • default constructor, to provide default values for the Id and CollegeStartDate fields

Methods

  • FullName – returns string, concatenating FirstName and LastName

.

Edit the About() method in the HomeController class. Replace the generic template ViewBag.Message value with something that’s better.

Then, create an instance of the Person object, with your own info. Don’t worry about public/private issues, because you and your professor will be the only viewers.

To set the birth date property, you can use a new DateTime object, which takes the year, month, and day of birth as arguments. See the MSDN reference info for a code example.

Finally, pass the object to the view (as an argument).

.

Edit the About view

Above the code block at the top of the view, declare the model class/type:
@model Lab1.Controllers.Student

Then, add markup and code expressions, and nicely format the data.

Hint: The dl container, with dt and dd elements, will lay out the key-value pairs in a nicely-formatted manner. Use a class named “dl-horizontal” for the dl container.

Remember – use @model to get access to the data that was passed in.

To print/output a nicely-formatted birth date, you can use the DateTime object’s ToLongDateString() method. See the MSDN reference info for more.

.

Edit the Home controller’s Contact method

The Contact view will show information about you. The information comes from a data object that you configure in the Home controller’s Contact method.

At the bottom of the HomeController.cs source code file, add a class named ContactInfo. It will have these members:

Properties

  • Id – int
  • Email, PhoneNumber, and PostalAddress – string
  • OtherInfo – string

Constructors

  • default constructor, to provide default values for the Id field

.

Edit the Contact() method in the HomeController class. Replace the generic template ViewBag.Message value with something that’s better.

Then, create an instance of the ContactInfo object, with your own info. Don’t worry about public/private issues, because you and your professor will be the only viewers.

Finally, pass the object to the view (as an argument).

.

Edit the Contact view

Above the code block at the top of the view, declare the model class/type:
@model Lab1.Controllers.ContactInfo

Then, add markup and code expressions, and nicely format the data. Maybe use some of the existing markup for ideas.

Remember – use @model to get access to the data that was passed in.

.

Submit your work on My.Seneca/Blackboard

Follow these instructions very carefully to submit your work on My.Seneca/Blackboard.

1. In Solution Explorer, select/highlight the solution

2. Right-click, and choose “Open File in File Explorer”, and an Explorer window will open

3. Navigate up one level; your “Lab1″ folder will be highlighted/selected

4. Copy-paste the “Lab1″ folder. It will create a folder named “Lab1 – Copy”; that’s OK

5. Open the “Lab1 – Copy” folder; remove/delete the “packages” folder

6. Open the “Lab1″ folder; remove the bin and obj folders

7. Navigate back up two levels; your “Lab1 – Copy” folder will be highlighted

8. Create a compressed (zip) version of that folder; the easiest way is right-click > Send to > Compressed (zipped) folder; the resulting file size will be fairly small, maybe about 500KB (or less) in size

9. Login to My.Seneca/Blackboard

10. Navigate to the BTI420 Assignments area, and use the link to the Lab 1 upload to submit your work

.

.

.

.

.

.

.

.

.

.

.

.

.

Content for Section B…

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: