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

ASP.NET MVC Forms

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Welcome to the Fitness Frog Web App

4:49 with James Churchill

Let’s take a look at the Fitness Frog web app in its finished form.

Fitness Frog Web App

Throughout this course, we’ll be updating the Fitness Frog web app to be a simple CRUD app that persists data using an in-memory data store. You can preview the completed project at http://fitness-frog.azurewebsites.net.

App or Application?

Over the years, I’ve often used the words app or application interchangeably. As it turns out, they’re separate terms that have distinct meanings. While this is an oversimplification, apps are smaller than applications and typically focus on a single purpose or function, whereas applications tend to be larger than apps and are broader in scope and functionality.

For an interesting discussion on apps and applications and their differences, see this post on the Appcelerator blog.

Data Persistence

If you want to learn more about data persistence, learning SQL is a good starting point. Here are Treehouse courses that’ll teach you the basics of SQL.

Entity Framework is a Microsoft framework that can be used within your ASP.NET MVC projects to access and manage data stored in SQL databases. For more information on Entity Framework, see the following resource.

For examples of how you can consume data from APIs, see the following Treehouse course.

For information on to create your APIs using the ASP.NET Web API framework, see the following resource.

Additional Learning

For more information about Chrome's Developer Tools see:

For more information about creating responsive layouts, see this Treehouse course.

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 this course, we'll be starting with a functional MVC project and 0:00
    adding forms to give our users the ability to create, update and delete data. 0:04
    You might recognize the name of our web app from a previous Treehouse course. 0:10
    Let's take a look at it in its finished form. 0:14
    >> Welcome to the Fitness Frog web app. 0:17
    Fitness Frog allows us to track exercise activities using either a desktop or 0:20
    mobile Web browser. 0:26
    The home page lists all of our activity entries. 0:27
    For each entry in the list, we can see its Date, 0:31
    Activity, Duration in minutes and Intensity. 0:35
    Buttons here on the right allow us to Edit or Delete an entry. 0:39
    Just above the list, the web app displays a summary of our activity. 0:44
    As we create, update, or delete entries, the daily average and 0:49
    total values displayed in minutes will change. 0:53
    Let's click the Add Entry button here at the top of the page to add an entry. 0:56
    Here's our add entry page. 1:01
    There's a field for each of the properties on our entry model, 1:03
    which we'll take a look at later in this course. 1:06
    If we remove the Duration value and click the Save button, we can see that we get 1:08
    a validation message letting us know that this value is required. 1:12
    Notice that all the valid fields are labeled with a green check mark. 1:17
    While the invalid fields are labeled with a red X. 1:21
    This gives our users a nice visual indication 1:25
    as to where their attention is required. 1:27
    The Date field displays as a date picker, making it easy for 1:30
    users to provide their desired date. 1:33
    The Activity field allows users to pick an activity from a dropdown list 1:36
    of predefined values. 1:40
    Radio buttons give users an easy way to toggle the intensity 1:42
    field value between Low, Medium, and High. 1:47
    The Exclude checkbox allows users to add an entry 1:52
    that doesn't affect the summary information on the home page. 1:55
    The large Notes field can be used to enter additional information. 1:58
    In addition to the Save button, we also have a Cancel button that when clicked 2:03
    will take us back to the home page without saving any of our changes. 2:07
    Let's enter a duration value and click the Save button. 2:12
    Now we're back on the home page. 2:19
    Notice the message here at the top of the page confirming that our 2:22
    entry was successfully added. 2:25
    We can dismiss this message by clicking the X here on the right. 2:27
    The list of entries is sorted by date in descending order. 2:31
    So the position of the new entry will change depending upon its date. 2:34
    If we click the Edit button, we can use the edit entry page to change the date. 2:38
    Aside from the heading, the Edit Entry page is identical to the Add Entry page. 2:48
    The only difference is that we're editing an entry instead of adding an entry. 2:53
    If we want to remove an entry, we can click its Delete button. 2:58
    This is the delete entry screen, which gives us a chance to review and 3:02
    confirm that we want to delete this entry. 3:07
    Let's go ahead and click the Delete button to remove it. 3:10
    Here's our list of entries again minus the entry that we just removed. 3:13
    Let's take a look at how our web app will look on a mobile device. 3:17
    I'll right-click on the page and select Inspect menu item. 3:21
    Let's dock the developer tools on the right to give us more vertical space and 3:25
    toggle on the device toolbar. 3:30
    Here's how our web app will look on an iPhone 6. 3:33
    Notice that the header has changed. 3:36
    The Fitness Frog logo and text is now smaller and 3:38
    the Add Entry button is only visible if we click on this hamburger button. 3:41
    The entries list has also changed. 3:46
    The intensity column is hidden and the edit and 3:49
    delete buttons are not just showing their respective icons. 3:51
    If we click one of the edit buttons, 3:55
    we can see that the add edit entry form now displays in a single column. 3:57
    While the Fitness Frog web app is simple it does provide our users with the basic 4:03
    functionality of a crud app. 4:07
    That being said, we're missing one important feature, data persistence. 4:09
    All of our data is kept in memory, which means that when we start and 4:15
    stop our web app, we'll lose any changes that we've made to our data. 4:19
    For our purposes in this course, this works fine. 4:23
    But in the real world, we'd want to use a database or an API to persist our data. 4:27
    In future Treehouse courses, you'll learn how to do that. 4:33
    If you'd like to learn more now about databases and APIs, 4:36
    see the teacher's notes for links to additional resources. 4:40
    Now that we've been introduced to our web app, 4:44
    let's set up our project in the next video. 4:46

    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