javascript - FullCalendar が Asp.Net Core Razor ビューに表示されない

Question

私はこのビデオチュートリアルに従っています: https://youtu.be/IpCEfbLiwagTaskデータベースのテーブルの日付を含む FullCalendar を含むページを実現したいと考えています。支援するためにビデオを確認する必要はありませんが、ソースも含めることは悪い考えではないと判断しました.

また、コードにいくつかの変更を加えているので、ここに私のCalendarControllerがあります。

public ActionResult Index()
    {
        return View();
    }
    public JsonResult GetEvents()
    {
        List<TaskModel> taskList = new List<TaskModel>();

        string connectionString = Configuration["ConnectionStrings:DefaultConnection"];
        using (SqlConnection connection = new SqlConnection(connectionString))
        {
            connection.Open();

            string sql = "ReadAllTasks";
            SqlCommand command = new SqlCommand(sql, connection);
            command.CommandType = CommandType.StoredProcedure;

            using (SqlDataReader dataReader = command.ExecuteReader())
            {
                while (dataReader.Read())
                {
                    TaskModel task = new TaskModel();
                    task.Id = Convert.ToInt32(dataReader["Id"]);
                    task.Name = Convert.ToString(dataReader["Name"]);
                    .....................
                    task.Comments = Convert.ToString(dataReader["Comments"]);
                    task.StartDate = Convert.ToDateTime(dataReader["StartDate"]);
                    task.EndDate = Convert.ToDateTime(dataReader["EndDate"]);
                    .....................
                    if (task.DependencyId == 1)
                    {
                        task.DependencyId = Convert.ToInt32(dataReader["DependencyId"]);
                    }
                    task.PhaseId = Convert.ToInt32(dataReader["PhaseId"]);
                    taskList.Add(task);
                }
            }

            connection.Close();
        }
        return new JsonResult(taskList);
    }

基本的に、ストアドプロシージャを使用して、SQL サーバーからすべてのタスクを取得し、それらをリストに入れて、以下のような Json 形式で返します。

(これは、/Calendar/GetEvents を呼び出したときに得られるものです)

[{"id":3,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":true,"finished":false,"aborted":false,"assignedTo":"1fa2f008-f7fe-43ba-9c5d-fd9e67e995d3","assignedToName":null,"dependencyId":0,"phaseId":1},{"id":1004,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":false,"finished":true,"aborted":false,"assignedTo":"1fa2f008-f7fe-43ba-9c5d-fd9e67e995d3","assignedToName":null,"dependencyId":0,"phaseId":1},{"id":1008,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":false,"finished":true,"aborted":false,"assignedTo":"5a4b508f-5e12-418f-9ce4-8e3061b833fe","assignedToName":null,"dependencyId":0,"phaseId":2012},{"id":3004,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":false,"finished":false,"aborted":false,"assignedTo":"711f2295-d8a4-49dd-88be-ea7143aa11d8","assignedToName":null,"dependencyId":0,"phaseId":1}]

さて、おそらく最も重要な部分です。Index.cshtmlには次のものが含まれます。

<!DOCTYPE html>
<html lang='en'>
<head>
    <link href="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="https//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" type="text/css" rel="stylesheet" />
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <br />
                <div id="bootstrapModalFullCalendar">
                </div>
            </div>
        </div>
    </div>
    <div id="fullCalModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span> <span class="sr-only">close</span></button>
                    <h4 id="modalTitle" class="modal-title"></h4>
                </div>
                <div id="modalBody" class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a class="btn btn-primary" id="eventUrl">Event Page</a>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#bootstrapModalFullCalendar').fullCalendar({
                header: {
                    left: '',
                    center: 'prev title next',
                    right: ''
                },
                eventClick: function (event, jsEvent, view) {
                    $('#modalTitle').html(event.Name);
                    $('#modalBody').html(event.Comments);
                    $('#eventUrl').attr('href', event.url);
                    $('#fullCalModal').modal();
                    return false;
                },
                events: '@Url.Action("GetEvents","Calendar")'
            });
        });
    </script>
</body>
</html>

カレンダー/インデックスに移動すると、空白のページしかありません。コンソールにエラーや警告は表示されません。何がうまくいかないのですか？

javascript - FullCalendar が Asp.Net Core Razor ビューに表示されない

1 に答える 1

Related

Reference