WEB460 Lab 7 of 7: Model-View-Controller Application

$ 12

WEB460 Lab 7 of 7: Model-View-Controller Application

Scenario/Summary
This lab will introduce you to the ASP.NET MVC application architecture. You will create a controller and views for the controller. In this lab, we will not explore models but with the foundation you gain here, you should be able to follow tutorials you discover online.

TABLE OF CONTENTS
Lab Steps
STEP A: Create a Model-View-Controller Application
MVC applications are not created as Visual Studio Web Sites. Instead we create a Project, similar to what we do for a desktop application. Follow the directions in this week’s lecture to create an ASP.NET MVC web application. The application should be named web460_wk7_ilab.
The name is very important because this project uses namespaces. If the namespace in your code files is not web460_wk7_ilab, you can either:
delete the project and recreate a new with the correct name (web460_wk7_iLab), or
adjust the code in the Lab to match the namespace of your application.
When you build and run the default web application, you should see a website similar to the image below that has a responsive web layout. As you adjust the window size, elements move to accommodate the narrower screen size, such as for a mobile device.

Because URLs are very important in determining the classes and actions called in an MVC application, you should note the URL and port number IIS Express is using to run the application. localhost refers to your own computer, and the number following is the port. In the image below, the port is 51071.
In the examples shown in the lab steps below, replace the port number (51071) with the port number on your computer.

STEP B: Adding a Controller
In this step, we will build a controller that returns HTML directly to the browser. This will help us begin with a simple example before adding more features. In the next step we will have the controller call a View( ) to create a full web page.
1. Right-click on the Controllers folder and select Add => Controller… from the menu.
2. Name the controller HelloEarthController and select the Empty MVC controller template.
3. You should see HelloEarthController.cs in the Controllers folder in the Solution Explorer pane. Double-click the file to open it and examine the code. The index action method is
the default action method for each controller. Replace the HelloEarthController Index( ) action method with the following code:
Index Action Method in HelloEarthController.cs
// Add your comments here
public string Index()
{
return “This is the <strong>default action</strong> for this web site …!”;
}
4. Run the application and append HelloEarth to the base URL:
http://localhost:51071/HelloEarth
You should see the following:
5. We just called the HelloEarth Controller. The URL routing logic in ASP.NET MVC applications is a format like this to determine what code to invoke:
/[Controller]/[ActionName]/[Parameters]
Add the following Welcome action method to the HelloEarth Controller:
Welcome Action Method in HelloEarthController.cs
// Add your comments here
public string Welcome()
{
return “<h2>Welcome to Earth visitor!</h2>”;
}
6. Run the application and append HelloEarth/Welcome to the base URL:
http://localhost:51071/HelloEarth/Welcome
You should see the following:
7. Now, let’s pass information in arguments to the Welcome method. Change the Welcome method to the following:
Revised Welcome Action Method in HelloEarthController.cs
// Add your comments here
public string Welcome(string visitor, int numTimes = 1)
{
return HttpUtility.HtmlEncode(“Hello ” + visitor + “! Your number is ” + numTimes);
}
8. Run the application and again append HelloEarth/Welcome to the base URL:
http://localhost:51071/HelloEarth/Welcome
You should see the default values for visitor and numTimes:
9. Run the application and again append query string parameters to the base URL:
http://localhost:51071/HelloEarth/Welcome?visitor=Jose&numTimes=5
MVC will bind the query string values to the action method parameters. You should

STEP C: Creating a View
In this step we’ll create a View that displays default information when the site visitor goes to /HelloEarth.
1. Return to the HelloEarth Controller action method and return it to the original version (don’t forget to change the return type back to ActionResult):
Original Index Action Method in EarthController.cs
// Add your comments here
public ActionResult Index()
{
return View();
}
2. To add a View for the Index method, right-click inside the Index method and select Add View…
3. In the Add View dialog, the view name should be Index and the view engine should be ASPX (C#). Also be sure the Use layout or master page is checked and Site.Master is selected as the master page.
4. You should now see a HelloEarth folder containing Index.aspx under the Views folder.
5. Double-click HelloEarth/Index.aspx to examine the code and you should see four content areas from the master page referenced. In the Content1 container, enter the following (this is the page title):
Hello Earth Index
6. In the Content2 container, enter the following (this is the main content heading):
<h2>Welcome to the Earth Index!</h2>
7. In the Content3 container, enter the following:
This web application is your introduction Earth culture.
8. Run the application and append HelloEarth to the base URL:
http://localhost:51071/HelloEarth
You should see the following:

STEP D: Passing To the View From the Controller
MVC uses an object called the ViewBag to communicate between the controller and views. The ViewBag is a dynamic object that can have data fields added to it on the fly (as the program is running). We will use the ViewBag to send the Welcome View data to display on the web page.
1. Return to the HelloEarth Controller and change the Welcome action method to look like the code below (don’t forget to change the return type back to ActionResult). We are setting the VisitorName and NumTimes data fields of the ViewBag object. Those data fields are not part of the ViewBag object but will be added when these statements are executed. In our example, we simply pass the parameters to the View, but we could also pass computed values or values retrieved from a Model.
Second Revision of Welcome Action Method in HelloEarthController.cs
// Add your comments here
public ActionResult Welcome(string visitor, int numTimes = 1)
{
ViewBag.VisitorName = visitor;
ViewBag.NumTimes = numTimes;
return View();
}
2. Right-click on the Welcome action method and select Add View… just as we did for the Index action method above. The %> name should be Welcome, use the ASPX (C#) view engine and the master page Site.Master. After clicking OK, you should see the file Welcome.aspx inside the HelloEarth folder under Views.
3. To access the ViewBag data fields in the View, we enclose it in <%: and %> as an ASPX directive. Open Welcome.aspx for editing. Inside the Content2 container, place the following:
<h2>Welcome to Earth <%: ViewBag.VisitorName %>!</h2>
4. Let’s use ASPX Page directives along with the ViewBag data to repeatedly print our the visitor’s name. Add the code below to the Content3 container:
Add to Content3 Content Container
<ul>
<% for (int i = 0; i < ViewBag.NumTimes; i++ )
{ %>
<li><%: ViewBag.VisitorName%></li>
<% } %>
</ul>
5. Run the application and again append query string parameters to the base URL:
http://localhost:51071/HelloEarth/Welcome?visitor=Jose&numTimes=5
MVC will bind the query string values to the action method parameters. The Controller will then pass those to the View. You should see:

STEP E: Finalize the Lab
1. Save your work!
2. Test it! Make changes as appropriate until it works.
3. Remember to add comments for each step being performed.
4. Please zip and submit the entire web project folder.

993 in stock

Description

WEB460 Lab 7 of 7: Model-View-Controller Application

Scenario/Summary
This lab will introduce you to the ASP.NET MVC application architecture. You will create a controller and views for the controller. In this lab, we will not explore models but with the foundation you gain here, you should be able to follow tutorials you discover online.

TABLE OF CONTENTS
Lab Steps
STEP A: Create a Model-View-Controller Application
MVC applications are not created as Visual Studio Web Sites. Instead we create a Project, similar to what we do for a desktop application. Follow the directions in this week’s lecture to create an ASP.NET MVC web application. The application should be named web460_wk7_ilab.
The name is very important because this project uses namespaces. If the namespace in your code files is not web460_wk7_ilab, you can either:
delete the project and recreate a new with the correct name (web460_wk7_iLab), or
adjust the code in the Lab to match the namespace of your application.
When you build and run the default web application, you should see a website similar to the image below that has a responsive web layout. As you adjust the window size, elements move to accommodate the narrower screen size, such as for a mobile device.

Because URLs are very important in determining the classes and actions called in an MVC application, you should note the URL and port number IIS Express is using to run the application. localhost refers to your own computer, and the number following is the port. In the image below, the port is 51071.
In the examples shown in the lab steps below, replace the port number (51071) with the port number on your computer.

STEP B: Adding a Controller
In this step, we will build a controller that returns HTML directly to the browser. This will help us begin with a simple example before adding more features. In the next step we will have the controller call a View( ) to create a full web page.
1. Right-click on the Controllers folder and select Add => Controller… from the menu.
2. Name the controller HelloEarthController and select the Empty MVC controller template.
3. You should see HelloEarthController.cs in the Controllers folder in the Solution Explorer pane. Double-click the file to open it and examine the code. The index action method is
the default action method for each controller. Replace the HelloEarthController Index( ) action method with the following code:
Index Action Method in HelloEarthController.cs
// Add your comments here
public string Index()
{
return “This is the default action for this web site …!”;
}
4. Run the application and append HelloEarth to the base URL:
http://localhost:51071/HelloEarth
You should see the following:
5. We just called the HelloEarth Controller. The URL routing logic in ASP.NET MVC applications is a format like this to determine what code to invoke:
/[Controller]/[ActionName]/[Parameters]
Add the following Welcome action method to the HelloEarth Controller:
Welcome Action Method in HelloEarthController.cs
// Add your comments here
public string Welcome()
{
return ”

Welcome to Earth visitor!

“;
}
6. Run the application and append HelloEarth/Welcome to the base URL:
http://localhost:51071/HelloEarth/Welcome
You should see the following:
7. Now, let’s pass information in arguments to the Welcome method. Change the Welcome method to the following:
Revised Welcome Action Method in HelloEarthController.cs
// Add your comments here
public string Welcome(string visitor, int numTimes = 1)
{
return HttpUtility.HtmlEncode(“Hello ” + visitor + “! Your number is ” + numTimes);
}
8. Run the application and again append HelloEarth/Welcome to the base URL:
http://localhost:51071/HelloEarth/Welcome
You should see the default values for visitor and numTimes:
9. Run the application and again append query string parameters to the base URL:
http://localhost:51071/HelloEarth/Welcome?visitor=Jose&numTimes=5
MVC will bind the query string values to the action method parameters. You should

STEP C: Creating a View
In this step we’ll create a View that displays default information when the site visitor goes to /HelloEarth.
1. Return to the HelloEarth Controller action method and return it to the original version (don’t forget to change the return type back to ActionResult):
Original Index Action Method in EarthController.cs
// Add your comments here
public ActionResult Index()
{
return View();
}
2. To add a View for the Index method, right-click inside the Index method and select Add View…
3. In the Add View dialog, the view name should be Index and the view engine should be ASPX (C#). Also be sure the Use layout or master page is checked and Site.Master is selected as the master page.
4. You should now see a HelloEarth folder containing Index.aspx under the Views folder.
5. Double-click HelloEarth/Index.aspx to examine the code and you should see four content areas from the master page referenced. In the Content1 container, enter the following (this is the page title):
Hello Earth Index
6. In the Content2 container, enter the following (this is the main content heading):

Welcome to the Earth Index!

7. In the Content3 container, enter the following:
This web application is your introduction Earth culture.
8. Run the application and append HelloEarth to the base URL:
http://localhost:51071/HelloEarth
You should see the following:

STEP D: Passing To the View From the Controller
MVC uses an object called the ViewBag to communicate between the controller and views. The ViewBag is a dynamic object that can have data fields added to it on the fly (as the program is running). We will use the ViewBag to send the Welcome View data to display on the web page.
1. Return to the HelloEarth Controller and change the Welcome action method to look like the code below (don’t forget to change the return type back to ActionResult). We are setting the VisitorName and NumTimes data fields of the ViewBag object. Those data fields are not part of the ViewBag object but will be added when these statements are executed. In our example, we simply pass the parameters to the View, but we could also pass computed values or values retrieved from a Model.
Second Revision of Welcome Action Method in HelloEarthController.cs
// Add your comments here
public ActionResult Welcome(string visitor, int numTimes = 1)
{
ViewBag.VisitorName = visitor;
ViewBag.NumTimes = numTimes;
return View();
}
2. Right-click on the Welcome action method and select Add View… just as we did for the Index action method above. The %> name should be Welcome, use the ASPX (C#) view engine and the master page Site.Master. After clicking OK, you should see the file Welcome.aspx inside the HelloEarth folder under Views.
3. To access the ViewBag data fields in the View, we enclose it in <%: and %> as an ASPX directive. Open Welcome.aspx for editing. Inside the Content2 container, place the following:

Welcome to Earth <%: ViewBag.VisitorName %>!

4. Let’s use ASPX Page directives along with the ViewBag data to repeatedly print our the visitor’s name. Add the code below to the Content3 container:
Add to Content3 Content Container

    • <% for (int i = 0; i < ViewBag.NumTimes; i++ )

 

    • { %>

    • <%: ViewBag.VisitorName%>

<% } %>

5. Run the application and again append query string parameters to the base URL:
http://localhost:51071/HelloEarth/Welcome?visitor=Jose&numTimes=5
MVC will bind the query string values to the action method parameters. The Controller will then pass those to the View. You should see:

STEP E: Finalize the Lab
1. Save your work!
2. Test it! Make changes as appropriate until it works.
3. Remember to add comments for each step being performed.
4. Please zip and submit the entire web project folder.

Reviews

There are no reviews yet.

Only logged in customers who have purchased this product may leave a review.