2017-06-02 108 views
1

我正在开发一个在线商店的web项目。目前,我试图在网页上显示数据库表格中的内容。使用asp.net mvc为数据库创建Web界面5

表看起来是这样的: image

这是型号:

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; } 
    } 
} 

我创建了一个API控制器,它看起来像这样

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)); 
     } 
    } 
} 

,另一个控制器,看起来像这样:

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); 
     } 

    } 
} 

最后,CSHTML文件看起来是这样的:

@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> 
} 

的问题是,每当我试图访问该网页时,我收到此错误消息5次,在每个条目表:

数据表警告:表ID =出租 - 请求的未知参数 “daterented”为行0,列2。有关此 错误的详细信息,请参阅http://datatables.net/tn/4

表看起来是这样的: image

和XML文件(访问https://localhost:44300/api/rentals可用时),从那里对表中的数据将被取回这个样子的: image

我会很很高兴能帮助我解决这个问题! 非常感谢!

+0

你能告诉我们什么是从服务器的响应。您可以在网络标签 –

+0

中检查。这是一个链接到它的图像。 https://ibb.co/nmFO2a – Adrian

+0

那么你正在调用这个方法:'/ api/rentals',但我看不到它。这应该是正确的方法:'GetRentals'? –

回答

0

好吧,我已经启用了Camelcase。

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

因此,代替

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

我的代码应该已经

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