This course will be retired on June 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Entity Framework with ASP.NET MVC

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing the Comic Book Library Manager Web App

4:05 with James Churchill

Let's take our first look at the Comic Book Library Manager, the web app that we'll be working on throughout this course. We'll also review the steps that we'll take to build out our Visual Studio solution.

Comic Book Library Manager Web App

The Comic Book Library Manager web app can be viewed at http://comic-book-library-manager.azurewebsites.net/

UI Options for Managing One-to-Many or Many-to-Many Relationships

Our approach for managing a list of records relies upon building additional pages to create, update, and delete the child records. While this approach works, it pulls the user out of the context of editing a comic book.

An alternative approach would be to update the "Edit Comic Book" page, so that every aspect of a comic book record—including its child comic book artist records—could be edited from that page. To do that, we could leverage JavaScript to create an editable list of child records.

In order to give ASP.NET MVC model binding what it needs in order to successfully bind a form post in the Edit controller POST action method, we'd need to have our JavaScript code manipulate HTML form fields—either shown or hidden—one set per child record.

Another possibility would be to leverage a client side JavaScript framework like Angular or React to build a single-page application or SPA. Building a SPA is a huge departure from the server side rendered application that we're building in this course, but making that change would allow us to build a more dynamic user interface.

Responsive Design Resources

For more information on how to create responsive layouts, see these Treehouse courses.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    In an earlier course, 0:00
    we saw how to use EF to update a comic book library manager console application. 0:01
    So, the users could create, update and delete comic books. 0:06
    But the application had a number of limitations that made it 0:10
    a sub optimal solutions. 0:13
    For one. 0:15
    It only supported a single concurrent user. 0:16
    And, because it was a console application, it could only be used from a desktop, or 0:19
    a laptop computer. 0:24
    Today's users expect more from their applications. 0:25
    Welcome to the comic book library manager web app. 0:28
    While the console application was limited to working with comic books, 0:32
    the web app allows users to work with comic books, series, and artists. 0:36
    For each of these main record types, we can view a list of the available records. 0:40
    View the detail for a single record, update a record, 0:45
    delete a record, or add a new record. 0:53
    For comic books it goes even further by allowing users to add, 1:00
    or remove artists from a comic book. 1:04
    To do this, you start by viewing the detail for a comic book. 1:06
    From here you can add an artist to a comic book. 1:10
    Or delete an artist. 1:15
    The relationship between comic books and 1:19
    artist is known as a many to many relationship. 1:21
    That is, a comic book can be associated with one, or 1:24
    more artists, and an artist can be associated with one, or more comic books. 1:27
    This is the first time that we've seen a user interface from managing 1:32
    a many to many relationship, and probably won't surprise you to hear 1:35
    that there are a variety of ways to handle this requirement. 1:39
    See the teacher's notes for information on how JavaScript can be used to create user 1:42
    friendly UIs for managing one to many, or many to many relationships. 1:47
    One more thing. 1:53
    The comic book library manager web app also works great on smart phone devices 1:54
    by utilizing a responsive design, 1:59
    the web app is able to automatically adjust to smaller screens. 2:01
    The top menu is now hidden until we tap this hamburger button. 2:05
    And the two column form layout adjusts to use a single column. 2:12
    For more information about how to create layouts using Responsive Design, 2:18
    see the teacher's notes. 2:22
    Let's review the steps that we'll take to set up our solution. 2:23
    The first part of the process is related to setting up the class library project. 2:27
    We'll start by downloading the project files for 2:31
    the comic book library manager console app. 2:34
    Console App project contains classes related to EF 2:36
    that our web app project will need access to. 2:40
    Including the Entity, Context, and Database Initializer classes. 2:42
    In order to share those classes with both the Console App and 2:48
    Web App projects, we'll add a Class Library project to the solution, and 2:51
    move those classes from the Console App to the Class Library. 2:56
    Utilizing a class library is a common approach for 2:59
    sharing code across two, or more projects. 3:02
    Then, we'll update the Console App project with the reference to the class library 3:05
    and tweak some name spaces in order to get the app compiling again. 3:10
    At this point, the console lab will work as as it did before. 3:14
    The second part of the process is related to setting up the ASP.NET MVC project. 3:18
    We'll start by adding an empty ASP.NET MVC web app project to our solution. 3:23
    Then, in order to give the web app access to the EF related classes in the class 3:28
    library, we'll update the web app with a reference to the class library project. 3:33
    To complete the setup process, we'll a set of start up files for 3:37
    the web app and add them to the MVC project. 3:41
    Our completed solution will contain three projects, the original console app 3:44
    project, a new class library project, and a new ASP.NET MVC project. 3:49
    In the next two videos will download the starter project, move our EF related code 3:55
    to our class library project, and add an ASP.net MVC project to our solution. 4:00

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up