在asp.net MVC中的模態內顯示圖

Question

我是MVC的新手，並且正在使用此鏈接作為教程，將來自canvas.js的圖形合並到模態中。 https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/

按照此處的指示執行操作（僅在靜態顯示中） ，它會完美加載到窗口加載時

<script type="text/javascript">

    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",
            animationEnabled: true,
            title: {
                text: "Simple Column Chart in ASP.NET MVC"
            },
            subtitles: [
                { text: "Try Resizing the Browser" }
            ],
            data: [
            {
                type: "column", //change type to bar, line, area, pie, etc
                dataPoints: [
                { x: 10, y: 71 },
                { x: 20, y: 55 },
                { x: 30, y: 50 },
                { x: 40, y: 65 },
                { x: 50, y: 95 },
                { x: 60, y: 68 },
                { x: 70, y: 28 },
                { x: 80, y: 34 },
                { x: 90, y: 14 }
                ]
            }
            ]
        });
        chart.render();
    };
</script>

我現在想要的是遵循相同的簡單指令並在模態內顯示圖形。

我有一個表，其中的一列中有“查看圖形”按鈕”，此過程設置為根據數據庫中的記錄動態顯示圖形。但是現在，我只想在教程鏈接中顯示圖形。

此按鈕正在調用javascript函數並在控制器中調用操作，該操作在控制器內部，它將把從viewmodel獲得的數據傳遞給partialview。

這是該功能的javascript

patient.js

   // Modal view user details
    function ViewVVSDetails(patientId, type, graph) {
        var options = { "backdrop": "static", keyboard: true };
        $.ajax({
            type: "GET",
            data: { patientId: patientId, type: type, graph: graph },
            url: "/Patient/GetVisitVitalSignDetails",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            success: function (data) {
                console.log(data);
                $('#modalVVSDetailsContent').html(data);
                $('#modalVVSDetails').modal(options);
                $('#modalVVSDetails').modal('show');
            },
            error: function () {
                bootbox.alert({
                    size: "small",
                    title: "Error!",
                    message: "There is an error while loading data."
                });
            }
        });
    }

在此視圖中，模態div的放置位置以及表格和按鈕所在的主頁將僅顯示div模態的代碼

patientInfo.cshtml

<!-- Modal: Clinic Details -->
<div id="modalVVSDetails" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div id="modalVVSDetailsContent" class="modal-content"></div>
    </div>
</div>

這是控制器

patientController.cs

 [HttpGet]
        public IActionResult GetVisitVitalSignDetails(int patientId, string type, string graph)
        {
            var visitSign = _patient.GetVisitVitalSignHeight(patientId);

            if (type == "h") 
            {
                if (graph == "hgn")
                {
                    return PartialView("_ViewVisitVitalSignDetails", visitSign);
                }
                else
                {
                    return PartialView("_ViewVisitVitalSignGraphDetails", visitSign);
                }
            }
            else
            {
                if (graph == "wgn")
                {
                    return PartialView("_ViewVisitVitalSignWeightDetails", visitSign);
                }
                else
                {
                    return PartialView("_ViewVisitVitalSignWeightGraphDetails", visitSign);
                }

            }
        }

這是稱為（_ViewVisitVitalSignGraphDetails）的局部視圖，其中用於顯示圖形的代碼是其中的一部分。 我只是從原始代碼中刪除了window.onload，因為現在不是這個主意。

_partielPatientModal.cshtml

@using UMP.ClinicalSystem.Models.Models;
@using UMP.ClinicalSystem.Models.Dto;

@model IEnumerable<VisitVitalSignVM>

@{
    Layout = null;


}

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer"></div>
<script type="text/javascript">

    $( function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",
            animationEnabled: true,
            title: {
                text: "Simple Column Chart in ASP.NET MVC"
            },
            subtitles: [
                { text: "Try Resizing the Browser" }
            ],
            data: [
            {
                type: "column", //change type to bar, line, area, pie, etc
                dataPoints: [
                { x: 10, y: 71 },
                { x: 20, y: 55 },
                { x: 30, y: 50 },
                { x: 40, y: 65 },
                { x: 50, y: 95 },
                { x: 60, y: 68 },
                { x: 70, y: 28 },
                { x: 80, y: 34 },
                { x: 90, y: 14 }
                ]
            }
            ]
        });
        chart.render();
    });
</script>

我嘗試在內部輸入文本進行測試，它已經顯示了模態， 但不是圖形 。 因此，將鏈接中的示例javascript圖形放到模態中時不起作用，並且在我刪除window.onload之后。

 <div id="chartContainer">sample text</div>

主要問題，如何在被調用的模態中顯示圖形

附加信息

這是執行動作結果后的結果

這是已經顯示的模態的屏幕截圖，但是沒有圖形

Answer 1

控制器返回html視圖，但是您的ajax請求內容類型為json。 從ajax請求中刪除此行。

contentType: "application/json; charset=utf-8",