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. Alternatively 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 - TutorialsTeacher.com has several excellent tutorials on using ASP.NET MVC and C#. Start the ASP.NET MVC Tutorial at the beginning and complete through "MVC Folder Structure." At the completion of these steps you will have a working ASP.NET MVC web site.
  2. helloWorld - In this exercise you will create a controller and view: Steps:
    1. In the application you created in step one right-click on the controllers folder and select Add ->> Controller. Add an empty controller named "HelloWorldController".  It will contain a single ActionResult named "Index" No changes are needed.
    2.  Right click inside the index ActionController and select "Add View..."  Keep the default name "index" and default template "Empty." Click "Add."
    3. Open the Views folder and the subfolder named "HelloWorld" This folder and the file inside it named "index.shtml" were created when you added the view. Open index.cshtml and add the text "Hello World!!" below the <h2> tags. 
    4. Open the page in a web browser right-clicking and selecting view in browser. A convenient shortcut is Ctrl-Shift-W. This will save open files, build the project, and open it in the browser.
  3. Photos - This exercise demonstrates the relationship between controllers and views. It also shows how parameters are passed into the controller.  Next week's exercise will add a model. In this exercise you will create a controller and four views that display flower photos. 
    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.
  4. 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