ASP.NET MVC displaying database table

Question

i have just started to learn MVC 4 ASP.NET. I am using a tutorial called MVC Music Store as a starting point. I have a database table called 'Orders' which contains many records. I decided to try to display all the orders in a table. Here is the Order model:

using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace MvcMusicStore.Models
{
[Bind(Exclude = "OrderId")]
public partial class Order
{
    [ScaffoldColumn(false)]
    public int OrderId { get; set; }

    [ScaffoldColumn(false)]
    public System.DateTime OrderDate { get; set; }

    [ScaffoldColumn(false)]
    public string Username { get; set; }

    [Required(ErrorMessage = "First Name is required")]
    [DisplayName("First Name")]
    [StringLength(160)]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "Last Name is required")]
    [DisplayName("Last Name")]
    [StringLength(160)]
    public string LastName { get; set; }

    [Required(ErrorMessage = "Address is required")]
    [StringLength(70)]
    public string Address { get; set; }

    [Required(ErrorMessage = "City is required")]
    [StringLength(40)]
    public string City { get; set; }

    [Required(ErrorMessage = "State is required")]
    [StringLength(40)]
    public string State { get; set; }

    [Required(ErrorMessage = "Postal Code is required")]
    [DisplayName("Postal Code")]
    [StringLength(10)]
    public string PostalCode { get; set; }

    [Required(ErrorMessage = "Country is required")]
    [StringLength(40)]
    public string Country { get; set; }

    [Required(ErrorMessage = "Phone is required")]
    [StringLength(24)]
    public string Phone { get; set; }

    [Required(ErrorMessage = "Email Address is required")]
    [DisplayName("Email Address")]
    [RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}",
        ErrorMessage = "Email is is not valid.")]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    [ScaffoldColumn(false)]
    public decimal Total { get; set; }

    public List<OrderDetail> OrderDetails { get; set; }
   }
   }

I can display the database results using a razor view, but it displays every view on one page in a table that is very long.

My question is, is there a way to make it so the page will just display 20 orders and then I can click next page to see the next 20? Just so you know how the complete process works, i am just doing 'code first' using entity framework (Microsoft seems to be encouraging this approach in most of their tutorials):

using System.Data.Entity;

namespace MvcMusicStore.Models
{
public class MusicStoreEntities : DbContext
{
    public DbSet<Order> Orders { get; set; }
    public DbSet<OrderDetail> OrderDetails { get; set; }
}
}

The controller:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;

namespace Test.Controllers
{
public class OrdersController : Controller
{
    private MusicStoreEntities db = new MusicStoreEntities();

    //
    // GET: /Orders/

    public ActionResult Index()
    {
        return View(db.Orders.ToList());
    }


}
}

This is the razor view:

@model IEnumerable<MvcMusicStore.Models.Order>

@{
ViewBag.Title = "Index";
}


<h2>Orders Overview</h2>
<br />
<div class="CSSTableGenerator" >
<table>
<tr>
    <td>
        @Html.DisplayNameFor(model => model.OrderId)
    </td>
     <td>
        @Html.DisplayNameFor(model => model.OrderDate)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.Username)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.Total)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.FirstName)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.LastName)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.Address)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.City)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.State)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.PostalCode)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.Country)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.Phone)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.Email)
    </td>


</tr>

@foreach (var item in Model) {
<tr>
     <td>
        @Html.DisplayFor(modelItem => item.OrderId)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.OrderDate)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Username)
    </td>
      <td>
        @Html.DisplayFor(modelItem => item.Total)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Address)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.City)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.State)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.PostalCode)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Country)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Phone)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Email)
    </td>
    <td>

        @Html.ActionLink("Details", "Details", new { id=item.OrderId }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.OrderId })
    </td>
    </tr>
    }

    </table>
    </div>

Second question, is that the total price is always 0.0 for each order in the table. However all other fields are correct. Thanks for tips.

Answer 1

In regards to your first question... Pagination is what you are wanting to accomplish and there are several good guides out there on how to accomplish this. Personally I'd recommend learning the use of Linq/Entity Framework/MVC Framework as once you know those a bit better the Pagination bit should be pretty darn easy to add in.

Pagination Tutorial

In regards to your second question...

You can use the Server Explorer to check the contents of the database which is where I would start to verify that a Total actually exists!

For this to work you may have to use the Add Connection utility (if it's not already setup) which is pictured directly above the "t" in "Data" show in the image.