在asp.net mvc中显示modal模式内的图形

Question

我是MVC的新手，我将这个链接作为教程将canvasjs中的图形合并到模态中。 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函数，并且其中在呼叫控制器内部的控制器的动作，它将从视图模型得到的数据传递给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模式

代码

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> 

我试图测试中输入文本，而且它已经显示模式，但不是GRAPH。因此，将该链接的示例JavaScript图形放入模式内时不起作用，并且在删除window.onload后。

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

主要问题，我怎样才能在所谓的模式

其他信息

在此处显示的图形是要行动的结果

后的结果以下是显示模式的截图，但不是图

Answer 1

控制器返回HTML视图，但你的Ajax请求的内容类型是JSON。从ajax请求中删除这一行。

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