Afficher un graphique dans une modale en asp.net mvc

Question

Je suis nouveau dans MVC et j'utilise ce lien comme tutoriel pour incorporer un graphique de canvasjs dans une modale. https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/

Faire ce qui est indiqué là-dedans (l'affichage statique seulement) il se charge parfaitement au chargement de la fenêtre, comme prévu sur la base de ce code.

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

Ce que je veux maintenant, c'est suivre la même instruction simple et afficher le graphique, dans une modale.

J'ai une table dont l'une des colonnes comporte le bouton "Voir le graphique". Ce processus est configuré pour afficher dynamiquement un graphique basé sur les enregistrements de la base de données. mais pour l'instant, je veux juste afficher le graphique dans le lien du tutoriel.

Ce bouton appelle une fonction javascript et appelle une action dans le contrôleur où, à l'intérieur du contrôleur, il va passer les données obtenues du viewmodel à une vue partielle .

Voici le javascript de la fonction

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

voici la vue, où la div pour la modale est placée, et la page principale où la table et le bouton sont situés, montrera juste le code pour la div modale

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>

voici le contrôleur

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

            }
        }

et voici la vue partielle appelée (_ViewVisitVitalSignGraphDetails), où le code d'affichage du graphique en fait partie. J'ai juste enlevé le window.onload du code original puisque ce n'est pas l'idée maintenant.

_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>

J'ai essayé de saisir du texte à l'intérieur pour tester, et la modale s'est déjà affichée, MAIS PAS LE GRAPHIQUE . Ainsi, l'exemple de graphique javascript du lien ne fonctionne pas lorsqu'il est placé dans la modale, et APRÈS AVOIR SUPPRIMÉ le paramètre window.onload.

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

Question principale : comment puis-je afficher le graphique dans la modale appelée ?

Informations complémentaires

voici le résultat après être passé au résultat de l'action

Voici la capture d'écran de la modale qui s'affiche déjà, mais pas le graphique.

Answer 1

Le contrôleur renvoie une vue html mais le type de contenu de votre requête ajax est json. Supprimez cette ligne de la requête ajax.

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