MVC 4 – Displaying data

We’ve seen how to add a database to an MVC 4 project, and how to enter data from a web page and store it in the database. Here we’ll look at how to retrieve the data and display it on a web page.

Having set up the database machinery before, retrieving the data is quite easy. We’ll retrieve the list of comic books that we’ve entered into the database and display it on the home page of the site. To that end, we change the HomeController’s Index() method so it looks like this:

    private ComicContext database = new ComicContext("ComicContextDb");
    public ActionResult Index()
    {
      var comics = database.ComicBooks.Select(book => book).OrderBy(book => book.Title);
      ViewBag.Comics = comics.ToList();
      return View();
    }

The database is accessed using the same method we discussed in the post on adding a database.

The DbSet field, ComicBooks, in the ComicContext class represents a data set on which we can run LINQ queries. Here, we’ve done a simple query that selects all the entries in the DbSet and sorts them by the Title field.

Having retrieved the data, we need a way of sending the data to the view so it can be displayed. The ViewBag is a C# dynamic variable (on which I hope to post soon). The data type of a dynamic variable can change as the program runs. In particular, we can define data fields for this variable at runtime rather than compile time, which is what is done here. We’ve defined a Comics field for the ViewBag and assigned it the result of the LINQ query converted to a List.

The ViewBag is a utility variable which is available in the View class, and is a ‘bag’ into which we can throw any data we want the view to display. You might think that this sort of thing can rapidly get out of hand; after all, we could throw loads of data into the ViewBag and lose any pretense of a well-structured program.

This is true, but then a well-designed web page shouldn’t display too much on one page anyway, so if we’re writing a decent web site, there shouldn’t be any need to throw too much data into the ViewBag.

So much for the controller. Now we need to look at the view. The View file for Home’s Index action is:

<h2>Comics</h2>

<ul>
    @foreach (var comic in ViewBag.Comics)
    {
        <li>
                @comic.Title: <b>@comic.Volume</b> (@comic.Issue)
        </li>
    }
</ul>

After the header is printed, we define an unordered list. We can embed C# code in the HTML by prefixing a line or element of code with the @ sign. Thus we have a foreach loop which runs over ViewBag.Comics (imported from the controller) and, for each comic in the list, prints out the comic’s Title, Volume and Issue fields. The output, assuming we’ve entered 3 comics, looks like this:

 

The volume number is printed in bold, and the issue is surrounded by parentheses (so the parentheses around @comic.Issue are printed out; they’re not part of the C# code).

That’s really all there is to accessing and displaying data, although of course there are a lot of other things you can do to add bells and whistles.

Advertisements
Post a comment or leave a trackback: Trackback URL.

Trackbacks

  • By MVC – strongly typed views « Programming tutorials on September 10, 2012 at 5:29 PM

    […] Although this is a powerful technique, you might have noticed if you were typing in the code we gave in the last post for displaying the list of comic books in the view that Visual Studio’s Intellisense didn’t seem to be working. Here’s the code we typed in the last post: […]

  • By MVC: the view model « Programming tutorials on September 19, 2012 at 2:13 PM

    […] the controller queries the database for a complete list of comics (as it does for the page that displays the complete list), and sends this list as is to the view, leaving the view to count up the number of comics for each […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: