Syllabus Schedule Project Labs Canvas Server Access CSS Tutorial Assignment 1 Assignment 2 Assignment 3 Assignment 4 Assignment 5 Assignment 6 Assignment 7 Assignment 8 Assignment 9

Assignment 1 - Introduction to ASP.NET MVC using C#

vs

Use Visual Studio 2017 (VS) for all of the course assignments. The recommended work flow for developing ASP.NET code is to use VS 2017 to write and debug your code. When your code is finished use VS's publish feature to publish it on the Yorktown server. Test your code on the server and submit the Yorktown URLs via Canvas.

Visual Studio 2017 is available in the Parks Hall computer labs (047 and 210). For your personal PC Microsoft offers the free Visual Studio 2017 Community Edition or through the Microsoft Imagine programyou can get a free copy of Visual Studio Enterprise or Visual Studio for Mac.

During this course you will create only one new project in VS and add new code to it throughout the quarter. Your hosting on Yorktown supports only one project so if you create more than one you will run into problems on the server.

Visual Studio Tip: In this assignment you will create a folder named Mis324Assignments. Inside this folder will be a solution file with the extension ".sln". To open an existing project double-click on the .sln file (rather than starting Visual Studio first). This assures that your project will open correctly.

Your U drive is a good place to store your VS solution (~250 MB). This allows you to access it from both on- and off-campus. A thumb drive or cloud storage also works.

The assignment instructions include working samples. The code you submit must have the same or more functionality as the working samples. Your layout may be different.

To enlarge an image in the assignment instructions right-click on the image and select "Open image in new tab."

view in browser
  1. home/index -- Microsoft has written an excellent tutorial Getting Started with ASP.NET MVC 5 that describes how to create a new project in VS, the MVC design pattern and add controllers, models, and views. In this exercise you will create a MVC Application and display the default home page. Complete the first part of the tutorial Getting Started with the following changes.
    1.  Use Visual Studio 2017 rather than 2013. Name your project Mis324Assignments rather than MvcMovie. 
    2. Skip the final section "See this App Running on Azure."
    The default view you are seeing is home/index. When no controller is specified MVC uses the home controller. When no action method is specified MVC defaults to the action method named index and its corresponding view.
  2. HelloWorld/welcome/Heather/6 In this exercise you will create a new controller named "helloWorld" with two action methods. The focus of this exercise is on controller action methods and routing (how a URL is mapped to a controller and action method). Typically MVC action methods return views but for the sake of simplicity this exercise return strings. Complete the next step of the tutorial Adding a controller with the following changes:
    1. The tutorial provides copy-and-paste code for the controller. In this code change the namespace from MvcMovie to the name of your project Mis324Assignments.
    2. Note that parameters for the Welcome action method can be specified two ways: The first format maps the parameters directly to the parameters defined in the action method "Welcome" of the controller "HelloWorld":
       public string Welcome(string name, int ID = 1)
      
      The second format maps to the route that you added to RouteConfig. The routing assigns the parameters in the URL to the named parameters in the action method. Both methods are acceptable in MVC. Some people prefer the second method because of its clean look.
  3. Add View helloWorld/welcome2?name=Heather&numTimes=6 - Complete the third part of the tutorial Adding a View. Tips:
    1. The tutorial asks you to modify the Index and Welcome action methods that you created in the previous steps. Instead add second action methods named Index2 and Welcome2 so your previous work is not overwritten.  The corresponding views will also be named Index2.cshtml and Welcome2.cshtml.
    2. Complete! You have created your first MVC web application.
  4. Photos - In this exercise you will create a controller and four views that display flower photos. The exercise illustrates controller action methods and passing parameters into a controller.
    1. Add a new empty controller named "PhotosController" to the project that you created in the first exercise.
    2. Add a view for the index action method by right clicking inside the action method and selecting "Add View..." Template is Empty,  "Use a layout view" is checked, click Add.
    3. Add the code below to the index view. HTML: "p" is paragraph, "a" is anchor tag, "ul" is unordered list, and "li" is list item. Tilde "~" is Razor syntax and points to the application's root folder. 
      <p>Separate view for each photo. Good for static content. 
          Example: <a href="~/music/about" >music/About</a></p>
      <ul>
          <li><a href="~/photos/cosmos">Cosmos</a></li>
          <li><a href="~/photos/dahlia">Dahlia</a></li>
          <li><a href="~/photos/lotus">Lotus</a></li>
      </ul>
      <p>Use parameter to pass in ID. Good for dynamic content. 
               Example: <a href="~/music/details/B0000088DC">music/Details/B0000088DC</a></p>
      <ul>
          <li><a href="~/photos/photoView?id=Cosmos">Cosmos</a></li>
          <li><a href="~/photos/photoView?id=Dahlia">Dahlia</a></li>
      
          <!-- MVC routing is configured pass to pass ID parameter in path -->
          <li><a href="~/photos/photoView/Cherry">Cherry</a></li>
          <li><a href="~/photos/photoView/Lotus">Lotus</a></li>
      </ul>
      
    4. Test the index action method and view in the browser. With the source for "index.cshtml" in the active tab press "ctrl-shift-w". This will open a new browser tab that displays the view.
    5. The links in index do not yet have action methods in the controller. Click on one of them and you should see a 404 message. The next steps will add action methods and views.
    6. Images: Static content such as images and style sheets are located in the folder "Content." Add a new folder inside the Content folder named "images." Download flowers.zip and add the flowers folder and images to your application.
    7. The first three links have individual action methods and views. In the controller create three new action methods named Cosmos, Dahlia, and Lotus. Format is the same as the "Index" action method.
    8. Create views for each of the action methods as you did for index.cshtml.
    9. Add the following image and anchor tag to each of the three views. Edit the image names to match the view names.
      <img src="~/Content/images/flowers/Cosmos.jpg" alt="Cosmos" class="flowerPhoto" />
      <p><a href="~/photos/">Flower Photos home</a></p>                           
    10. Test all three action methods/views to confirm that images display.
    11. Styling: Add a bit of styling to the images with the following css. Add this to the style sheet named "site.css" located in the Content folder.
      .flowerPhoto {
          box-shadow: 10px 10px 10px #c1bebe;
          display:block;
          width:500px;
          margin:30px auto;
      }
      
    12. Parameters: Frequently the content of a web page is determined by passing is a parameter such as custID, ISBN, productID, etc. Add the following action method that accepts flower name as a parameter and passes it to the view.
              //use parameter to pass in photo id
              public ActionResult photoView(string id)
              {
                  ViewBag.photo = id;
                  return View();
              }
      
      The ViewBag object is used to pass simple string data to a view.
    13. View: Create a new view named PhotoView and replace the code with:
      @{
          ViewBag.Title = ViewBag.photo;
      }
      
      <h2>@ViewBag.photo</h2>
      
      <img src="~/Content/images/flowers/@(ViewBag.photo).jpg" alt="@(ViewBag.photo)" class="flowerPhoto" />
      <p><a href="~/photos/">Flower Photos home</a></p>
      
      The "@" symbols are Razor code, which supports C# server code in the view.
    14. Test: all seven links in the index view should now work.
  5. Publishing to the server: when you code is working correctly in VS you can upload it to the server. Steps:
    1. Create a network drive map to the server.
    2. In VS solution explorer right click on the name of your application (Mis324Assignments) and select “Publish...”
    3. Click “Custom” and add a profile name.
    4. For Publish Method select “File System.”
    5. Click the “...” and find your network drive map and root folder on Yorktown (your root folder has your WWU username). The path will look similar to:
      T:\181\userName
    6. Click “Open,” next, next, and Publish.
    7. The URL on the server will be similar to this: http://yorktown.cbe.wwu.edu/students/174/csandvig/
    8. In the browser you should see the default page for your web site.
    9.  Add the name of your controller and any parameters:
      http://yorktown.cbe.wwu.edu/students/174/csandvig/helloWorld/welcome/Heather/6
    10. Copy the Yorktown URLs from the browser and paste into Canvas.


Submission instructions: Submit assignments via the Canvas course management system. Submit the full URL for each exercise in the assignment, listing the URLs in the same order that they are listed in the assignment. To minimize typos in URLs it is strongly recommended that you copy the URLs from the address bar of the browser rather than trying to type them. Incorrect URLs will not be graded and no credit will be given.

When pages are connected via navigation (as in your music store project) it is only necessary to submit the URL of the first page.

Regular Expressions HTML Color Names Color Picker ASCII Character Codes Unicode Character Codes
Top