외부 Javascript 메서드를 호출 할 수 없습니다.

Question

MVC 5 웹 응용 프로그램의 외부 Javascript 파일을 사용하여 차트를 뷰에 렌더링했습니다. 차트는 액세스 가능한 서버 측 모델을 사용하므로 아래에 표시된 것처럼 인라인 js로 모델을 JSON으로 인코딩 한 다음 JSON 문자열을 전달하는 외부 함수를 호출합니다.

<script type="text/javascript"> 

$(document).ready(function() { 

    var JSONdata = @Html.Raw(Json.Encode(Model.PastModels)); 
    var count = @Html.Raw(Json.Encode(Model.PastModels.Count)); 
    createChart(JSONdata, count); 

}); 

기능은 외부 파일에 정의되어있다.

function createChart(JSONdata, count) { 
    var dates = []; 
    var scores = []; 
    var name = "" 


    for (i = 0; i < count; i++) { 
     dates[i] = JSONdata[i].TheDate; 
     scores[i] = JSONdata[i].TotalScoreT; 
    } 
    var chart = 'totalChart'; 
    name = " Total Score"; 
    renderChart(chart, name); 


    $('.nav-tabs a').click(function (e) { 
     e.preventDefault(); 
     var tab = this.id; 

     switch (tab) { 
      case 'socialTab': 
       for (i = 0; i < count; i++) { 
        dates[i] = JSONdata[i].TheDate; 
        scores[i] = JSONdata[i].SocialPhobiaT; 
       } 
       chart = socialChart; 
       name = ' Social Phobia'; 
       break; 

      case 'panicTab': 
       for (i = 0; i < count; i++) { 
        dates[i] = JSONdata[i].TheDate; 
        scores[i] = JSONdata[i].PanicDisorderT; 
       } 
       chart = panicChart; 
       name = ' Panic Disorder'; 
       break; 

      case 'depressionTab': 
       for (i = 0; i < count; i++) { 
        dates[i] = JSONdata[i].TheDate; 
        scores[i] = JSONdata[i].MajorDepressionT; 
       } 
       chart = depressionChart; 
       name = ' Major Depression'; 
       break; 

      case 'separationTab': 
       for (i = 0; i < count; i++) { 
        dates[i] = JSONdata[i].TheDate; 
        scores[i] = JSONdata[i].SeparationAniextyT; 
       } 
       chart = separationChart; 
       name = ' Separation Anxiety'; 
       break; 

      case 'obsessiveTab': 
       for (i = 0; i < count; i++) { 
        dates[i] = JSONdata[i].TheDate; 
        scores[i] = JSONdata[i].ObsessiveCompulsiveT; 
       } 
       chart = obsessiveChart; 
       name = ' Obsessive Compulsive Disorder'; 
       break; 

      case 'generalTab': 
       for (i = 0; i < count; i++) { 
        dates[i] = JSONdata[i].TheDate; 
        scores[i] = JSONdata[i].GeneralizedAnxietyT; 
       } 
       chart = generalChart; 
       name = ' Generalized Anxiety'; 
       break; 

      case 'totalTab': 
       for (i = 0; i < count; i++) { 
        dates[i] = JSONdata[i].TheDate; 
        scores[i] = JSONdata[i].TotalScoreT; 
       } 
       chart = totalChart; 
       name = ' Total Score'; 
       break; 
     } 

     renderChart(chart, name); 
    }); 
} 

섹션을 사용하여 외부 파일을 포함하고 있습니다.

@section HeadValues{ 
    <script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script> 
    <script src="https://code.highcharts.com/modules/exporting.js" type="text/javascript"></script> 
    <script src="~/scripts/RCADSResultPage.js" type="text/javascript"></script> 

} 

그러나 페이지가로드 될 때마다 'function createChart is undefined'오류가 발생합니다.

모든 의견을 많이 주시면 감사하겠습니다.

감사합니다.

Answer 1

위의 문제는 외부 스크립트가 $ (document) .ready 함수 호출 전에 성공적으로로드되거나 호출되지 않아 발생합니다. 페이지에서 createChart 함수 호출 전에 스크립트로드 섹션을 확인하십시오.

@section HeadValues{ 
    <script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script> 
    <script src="https://code.highcharts.com/modules/exporting.js" type="text/javascript"></script> 
    <script src="~/scripts/RCADSResultPage.js" type="text/javascript"></script> 

} 

희망이 있으면 도움이 될 것입니다. 이 준비 문서가 외부 파일을로드하기 전에 실행되는 기회가 될 수