BTI420 Lab 0

This is “Lab 0”. It is designed to be completed by you, during the first session in a computer lab room.

.

This work will not be graded, but will be inspected by the teacher.

.

Objectives

Get started with Visual Studio

Work with a web app project – create, save, re-open, modify, run

.

Create a new ASP.NET MVC web app project

Notice: 

During week 1, it’s likely that the version of Visual Studio 2013 that’s installed on the lab-room computers will not work.

Therefore, for week 1 only, use Visual Studio 2012.

Start Visual Studio 2012. The fastest way? Click the Start button. Type the following:

vis 2012

Select the program “Visual Studio 2012”, and start it.

.

Create a new project. Two ways:

  1. On the Start Page, click the “New Project…” link, or
  2. Using the menu, File > New > Project…

In the New Project dialog, select the following:

  • Left-side navigator – Templates > Visual C# > Web
  • Center panel – ASP.NET MVC 4 Web Application
  • Name (textbox) – should probably call your work “Lab0”
  • Location – wherever, but if you are using a College computer, preferably the Desktop or Downloads folder

Click OK to configure the project’s properties:

  • Select “Internet Application”
  • Leave the “Razor” view engine selected
  • Un-check (clear) the “Create a unit test project” checkbox

.

Personalize the project

Run the project. There are several ways to do this:

  • Ctrl+F5 – this is the easiest and fastest keystroke way of running the project
  • On the DEBUG menu, select “Start Without Debugging”
  • In Solution Explorer, right-click your project, and select “View In Browser”

Your project will open in the computer’s default browser.

Inspect the result. There is a default view (/home/index), and an “About” view, and a “Contact” view.

Personalize the content. You will need to modify code in _Layout.cshtml, as well as the About and Contact views.

.

Create a view model class for data

Create a class to represent a person (which will be you!). Here’s how:

In Solution Explorer, right-click the Controllers folder. Add a new class. Its name will be “Home_vm.cs”.

The source code will load into the editor.

Remove (delete) the class definition for “public class Home_vm { }”.

Write code for a Person class. It will have the following properties:

  • Id – int – identifier
  • LastName – string – a person’s last name
  • GivenNames – string – a person’s given name(s)
  • Age – int – a person’s age

Add a method to return a Person object’s content in a nice string. Use the String.Format method. Dereference the object’s properties with the “this.” prefix, as shown during class.

.

Pass data to the view

The goal is to create a Person object in the controller’s code, and pass it to a view.

Specifically, you will create the Person object in the Home controller’s Contact method, and pass the data to the Contact view.

Create the Person object

Here’s how:

In the method, create a new Person object, with YOUR information. Use this syntax form:

Type variableName = new Type();

Then, use a dot syntax – like JavaScript or C structs – to set the properties of the object:

variableName.PropertyName = value;

An alternate form is to use the object initializer syntax. Add to the “new” syntax above:

Type variableName = new Type() { Property1 = value, Property2 = value, Property3 = value };

Pass data to the view

In the “return View();” statement, pass the person object that you created, as an argument to the View() method.

Open the view (right-click in the method block, and “Go To View”). Add a model declaration as the first line:

@model Fully.Qualified.Type.Name

Then, in the HTML markup, dereference the model object’s properties (and methods) using a code expression:

@Model.PropertyName -or-

@Model.MethodName()

.

.

.

.

.

.

.

.

.

.

  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: