Creating a web interface for a database using asp.net mvc 5

Question

I'm working on an online store web project. Currently, I'm trying to display the content from a database table on a web page.

The table looks like this:

This is the Model:

using System;
using System.ComponentModel.DataAnnotations;

namespace Vidly.Models
{
    public class Rental
    {
        public int Id { get; set; }

        [Required]
        public Customer Customer { get; set; }

        [Required]
        public Movie Movie { get; set; }

        public DateTime DateRented { get; set; }

        public DateTime? DateReturned { get; set; }
    }
}

I've created an API Controller which looks like this

using AutoMapper;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Vidly.Dtos;
using Vidly.Models;
using System.Data.Entity;


namespace Vidly.Controllers.Api
{
    public class RentalsController : ApiController
    {

        private ApplicationDbContext _context;

        public RentalsController()
        {
            _context = new ApplicationDbContext();
        }

        // GET /api/rentals
        public IHttpActionResult GetRentals(string query = null)
        {
            var rentalsQuery = _context.Rentals
                .Include(r => r.Customer)
                .Include(r => r.Movie);

            var rentalDtos = rentalsQuery
                .ToList()
                .Select(Mapper.Map<Rental, RentalDto>);

            return Ok(rentalDtos);
        }

        // GET /api/rentals/1
        public IHttpActionResult GetRental(int id)
        {
            var rental = _context.Rentals.SingleOrDefault(r => r.Id == id);

            if (rental == null)
                return NotFound();

            return Ok(Mapper.Map<Rental, RentalDto>(rental));
        }
    }
}

and another Controller which looks like this:

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

namespace Vidly.Controllers
{
    public class RentalsController : Controller
    {
        private ApplicationDbContext _context;

        [Authorize(Roles = RoleName.CanManageMovies)]
        public ViewResult Index()
        {
            if (User.IsInRole(RoleName.CanManageMovies))
                return View("Index");
            else
                return View("Home");
        }
        public ActionResult New()
        {
            return View();
        }

        public ActionResult Details(int id)
        {
            var rental = _context.Rentals.Include(r => r.Movie).Include(r => r.Customer).SingleOrDefault(r => r.Id == id);

            if (rental == null)
                return HttpNotFound();

            return View(rental);
        }

    }
}

Finally, the cshtml file looks something like this:

@model IEnumerable<Vidly.Models.Rental>
@{
    ViewBag.Title = "Rentals";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Rentals</h2>

<table id="rentals" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Customer</th>
            <th>Movie</th>
            <th>Date Rented</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

@section scripts
{
    <script>
        $(document).ready(function () {
            var table = $("#rentals").DataTable({
                ajax: {
                    url: "/api/rentals",
                    dataSrc: ""
                },
                columns: [
                    {
                        data: "customer.name"
                    },
                    {
                        data: "movie.name"
                    },
                    {
                        data: "daterented"
                    }
                ]
            });

        });
    </script>
}

The problem is that whenever I'm trying to access the web page, I'm getting this error message 5 times, for every entry in the table:

DataTables warning: table id=rentals - Requested unknown parameter 'daterented' for row 0, column 2. For more information about this error, please see http://datatables.net/tn/4

The table looks like this:

And the XML file (available when accessing https://localhost:44300/api/rentals ) from where the data for the table should be fetched looks like this:

I would be very glad if you could help me out with this problem! Many thanks!

Answer 1

Well it seems that i had the Camelcase enabled.

https://en.wikipedia.org/wiki/Camel_case

Therefore, instead of

columns: [
                {
                    data: "customer.name"
                },
                {
                    data: "movie.name"
                },
                {
                    data: "daterented"
                }
            ]

My code should have been

columns: [
                {
                    data: "customer.name"
                },
                {
                    data: "movie.name"
                },
                {
                    data: "dateRented"
                }
            ]