数据库数据不会显示在HTML页面上

时间:2017-01-25 19:16:21

标签: c# jquery sql asp.net-mvc datatables

我在Visual Studio中创建了一个数据库,并尝试在localhost HTML页面上运行它,但它没有显示。所有页面显示都是纯HTML文本,因此页面正常工作,但由于某种原因,它无法看到我的数据库。

数据库:

CREATE TABLE [dbo].[Gats] (
    [GatsId] INT           NOT NULL,
    [Nom]    NVARCHAR (40) NOT NULL,
    [Sexe]   NVARCHAR (40) NOT NULL,
    [Edat]   NVARCHAR (40) NOT NULL,
    PRIMARY KEY CLUSTERED ([GatsId] ASC)
);

HomeController中:

namespace ShelterManager.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetGats()
        {
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                var gats = dc.Gats;
                return Json(new { data = gats }, JsonRequestBehavior.AllowGet);
            }
        }
    }
}

HTML:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GatsManager</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
    <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
</head>
<body>
    <div style="width:90%; margin: 0 auto">
        <table id="MyDatabase">
            <thead>
                <tr>
                    <th>Nom</th>
                    <th>Sexe</th>
                    <th>Edat</th>
                </tr>
            </thead>
        </table>
    </div>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(document).ready(function () {
            var oTable = $('#MyDatatable').DataTable({
                "ajax": {
                    "url" : '/home/GetGats',
                    "type" : "get",
                    "datatype" : "json"
                },
                "columns" : [
                    {"data" : "Nom", "autoWidth": true },
                    {"data": "Sexe", "autoWidth": true },
                    {"data": "Edat", "autoWidth": true },
                ]
            })
        });
    </script>
</body>
</html>

0 个答案:

没有答案