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

ASP.NET MVC Forms

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Reviewing the List Page

3:36 with James Churchill

Before we start updating our web app with new features, let’s review our list page’s controller action method and view.

Follow Along

To follow along commiting your changes to this course, you'll need to fork the aspnet-fitness-frog repo. Then you can clone, commit, and push your changes to your fork like this: 

git clone <your-fork>
cd aspnet-fitness-frog
git checkout tags/v1.5 -b reviewing-the-list-page

Additional Learning

To learn more about how to use LINQ, be sure to check out the following Treehouse course.

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

To learn more about how to use Bootstrap to style HTML tables and create responsive websites, see the following pages on the official Bootstrap website.

Keyboard Shortcuts

  • CTRL+COMMA - Opens the “Navigate To” dialog

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

    Throughout this course we'll be using Fitness Frog's list page to add, edit, 0:00
    and delete entries. 0:05
    Before we start updating our web app with new features, 0:07
    let's review its associated controller action method and view. 0:10
    I'll press Ctrl, Comma to open the Navigate To dialog, and 0:14
    type Entries to open the Entries Controller class. 0:18
    Here's the index action method. 0:22
    I'll collapse the solution explorer window to give us more room for the editor. 0:24
    Here we're making a call to the repository to get the list of available entries. 0:28
    Then we are using link to calculate the total activity by filtering out 0:33
    in the entries whose exclude properties are set to True and 0:37
    summing in the duration property values. 0:41
    In order to calculate the average daily activity 0:45
    we're getting the count of the distinct entry date values, 0:48
    which will later divide into the total activity value. 0:51
    If you're new to Link or need a refresher, see the teachers notes for 0:55
    other Treehouse content that can help. 0:59
    Right before we call the view method, 1:01
    we're setting the ViewBag TotalActivity and AverageDailyActivity property values. 1:03
    Remember from our earlier course that ViewBag gives us 1:09
    an easy way to pass values from a controller to a view. 1:12
    We're using ViewBag here because we're already passing our 1:17
    entries collection to our view through our call to the View method. 1:20
    In a future course, we'll see how we can use a View model 1:24
    to pass multiple values to our View without having to rely upon ViewBag. 1:28
    Now let's take a look at the index view. 1:32
    Here at the top, we've got a model directive that strongly types our Views 1:41
    model property to be a list of entry objects. 1:45
    The first item in our View is the stats summary section. 1:48
    Just some basic markup with some custom CSS classes for the styles. 1:52
    Here's our HTML table of entries. 2:00
    The CSS classes that you see being used here, table and 2:03
    hidden-xs are part of bootstrap. 2:08
    The bootstrap table class is used to style our table. 2:12
    The hidden dash excess class has been used to hide the intensity column for 2:16
    smaller screen sizes, like smartphones for instance. 2:21
    Here's another use case. 2:25
    We're changing the display format of the date depending on the screen size. 2:26
    On smaller screens we need to conserve as much horizontal space as possible 2:31
    in order for the table to fit properly. 2:36
    Remember how our entry model contains properties for both activity ID and 2:39
    activity. 2:43
    One of the reasons that we have both properties on our model is so 2:44
    we can display the activity name values, instead of the activity ID values. 2:48
    Our users probably wouldn't find the activity IDs very intuitive to read. 2:53
    Lastly, here's our Edit and Delete buttons, 2:59
    which are actually hyperlinks styled as buttons using Bootstraps button styles. 3:02
    As you've seen in other Treehouse courses, we're calling the URL.Action method 3:07
    to get a URL to the edit entry, And delete entry pages. 3:13
    Notice how we're supplying the route values by supplying an anonymous 3:17
    object with its ID property set to the entry ID property value. 3:21
    And that's all of the code for our list page. 3:27
    After a short quiz will be working on making our ad entry page functional. 3:31

    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