Homework Five

Primary Objectives:

  1. Learn more ASP.NET MVC 5
  2. Be able to write a MVC web application that uses a simple one-table local database
  3. Be able to write a model class and build a strongly typed view that uses it
  4. Be able to write a model class that is backed by an Entity Framework context and a local database, and then create a view to use it in a web page
  5. Use Razor to build a table
  6. Be able to use NuGet to find and install packages
  7. Begin learning Transact-SQL
  8. Be able to write a T-SQL script to create a table and populate it with seed data
  9. Learn to use C# language features: properties, lambda functions, object initializers

Overall Requirements:

  • Use a Data Access Layer (DAL) folder for your DbContext subclass
  • Use data annotations in your model to set display characteristics and other model parameter requirements
  • Include form validation -- no yellow error pages for missing or incorrect form data
  • You must write scripts to manage your database (up.sql and down.sql, both in App_Data). An example will be found in the lecture repository. These should be included in your Git repository.
  • Your database (something.mdf and something_log.ldf if using LocalDB) should not be tracked by Git. These files should be ignored and only generated and populated from the script when needed.
  • Write the model and db context classes yourself -- no EF code generation allowed.

"As a student in CS 460 I want to build a database-backed web application using ASP.NET MVC 5 so I can learn how to create and use a local database for persistent storage in my web app. I also want to show how I can write T-SQL to create and populate a simple database in order to be ready for more complicated databases coming soon."

Questions/Tasks:

  1. Begin by creating a new empty MVC project. Make sure it has Visual Studio's .gitignore file so it will correctly ignore all the temporary build files as well as built binary files. Create a simple home landing page that will serve as the home page for this app. Put links here for pages you create later.
  2. When you move you're supposed to tell the DMV about your new address using this form (for Oregon anyway). We want to make our own online version of this form. We want two pages: one to view all current requests for change of address and another page to create a new request, i.e. a minimally functional online version of this form. The following questions suggest how you should go about this.
    Change of address form image
    Oregon DMV change of address form
  3. Include everything you see in the form except the signature and voter information check box. You only need to have one address instead of having both new residence and new mailing address. In the form there is just a single line for city, state and zip, but in your form you should break these apart into separate fields. Go ahead and leave the name as a single field if you like. With that I count 9 fields.

  4. Start with the data model: Design and create the database, which will have only a single table that uses an integer primary key. Use the scripts from the example in lecture to create the database and populate it with a few example entries. This means you'll have one script to create the table and populate it with at least 5 entries (up.sql) and a separate script to clear it all away (down.sql). Both of these need to be in your App_Data folder and need to be in your Git repository.

    You can create the database using SQL Server, SQL Server Express or LocalDB. The first two of these require a separate installation. LocalDB comes with Visual Studio, provided you installed the data storage and processing workload when installing VS, and can be accessed through the Server Explorer tab. For now the database is local to your machine. Anyone wanting to duplicate your project from your Git repository would have to manually create the database, run your up script on it and then edit the connection string.

  5. Create the model class and the database context class: Manually write the model class and the db context class. The model should go in the Models folder while the context class should go in a new folder called DAL, for Data Access Layer. This is a common pattern to use when separating the data layer from your data processing layer.
  6. Connect to the database: Add the correct connection string to Web.config
  7. Create controller and action methods. Use the GET-POST-Redirect pattern for the create functionality (aka Post/Redirect/Get)

  8. Create strongly typed views. Then write Razor code to create UI as you wish. You'll need a minimum of two pages: one to fill out and submit a new address change request and another page to view all requests (show them in a table). The look and feel of the site is up to you.

    You should write the views yourself for maximum learning and understanding. Sure, take a look at some scaffolded code as examples but then write it yourself. Plus, the scaffolded views look pretty dismal.

  9. Demo your site: fill out the form, click a button to submit, then be taken to either a thank you page or a page showing all current requests, including the one just entered. The very first time you should see the 5 examples that you seeded your db with, and then the requests will just build up as you enter new ones.
  10. Lastly, put it all in your Portfolio as usual. We need screenshots to be able to tell if it's working. Now that we're into ASP.NET MVC there is a lot more code in your project. We don't want it all though; for your Portfolio, only include the code you write. Just include it as snippets, with some nice explanations in between!