refactor javascript для внешнего файла

Я новичок в ASP .Net и JQuery. Так простите меня за то, что я задал этот глупый вопрос. У меня есть файл Index.cshtml следующим образом. Я использую примерный код Highcharts, чтобы сделать калибр. Моя проблема: код между <script></script> длинный и грязный, как я могу сделать его более компактным? Я попытался переместить его во внешний файл, myscript.js, внутри папки Scripts и включить строку <script src="Scripts/myscript.js"></script> в Index.cshtml, но он дает мне сообщение о том, что $ is undefined, что, как я подозреваю, связано с внешней загрузкой myscript.js до DOM завершен в браузере. Я попытался поместить код в _layout.cshtml, но это тоже не очень. Спасибо за помощь.refactor javascript для внешнего файла

@model IEnumerable<WebApplication16.Models.BatteryLog> 

@{ 
    ViewBag.Title = "Index"; 
} 
@{ 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<script>$(function() { 

    $('#gauge').highcharts({ 

     chart: { 
      type: 'gauge', 
      plotBackgroundColor: null, 
      plotBackgroundImage: null, 
      plotBorderWidth: 0, 
      plotShadow: false 
     }, 

     title: { 
      text: 'Current' 
     }, 

     pane: { 
      startAngle: -150, 
      endAngle: 150, 
      background: [{ 
       backgroundColor: { 
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
        stops: [ 
         [0, '#FFF'], 
         [1, '#333'] 
        ] 
       }, 
       borderWidth: 0, 
       outerRadius: '109%' 
      }, { 
       backgroundColor: { 
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
        stops: [ 
         [0, '#333'], 
         [1, '#FFF'] 
        ] 
       }, 
       borderWidth: 1, 
       outerRadius: '107%' 
      }, { 
       // default background 
      }, { 
       backgroundColor: '#DDD', 
       borderWidth: 0, 
       outerRadius: '105%', 
       innerRadius: '103%' 
      }] 
     }, 

     // the value axis 
     yAxis: { 
      min: 0, 
      max: 200, 

      minorTickInterval: 'auto', 
      minorTickWidth: 1, 
      minorTickLength: 10, 
      minorTickPosition: 'inside', 
      minorTickColor: '#666', 

      tickPixelInterval: 30, 
      tickWidth: 2, 
      tickPosition: 'inside', 
      tickLength: 10, 
      tickColor: '#666', 
      labels: { 
       step: 2, 
       rotation: 'auto' 
      }, 
      title: { 
       text: 'Volt' 
      }, 
      plotBands: [{ 
       from: 0, 
       to: 120, 
       color: '#55BF3B' // green 
      }, { 
       from: 120, 
       to: 160, 
       color: '#DDDF0D' // yellow 
      }, { 
       from: 160, 
       to: 200, 
       color: '#DF5353' // red 
      }] 
     }, 

     series: [{ 
      name: 'Current', 
      data: [80], 
      tooltip: { 
       valueSuffix: ' Volt' 
      } 
     }] 

    }, 
    // Add some life 
    function (chart) { 
     if (!chart.renderer.forExport) { 
      setInterval(function() { 
       var point = chart.series[0].points[0], 
        newVal, 
        inc = Math.round((Math.random() - 0.5) * 20); 

       newVal = point.y + inc; 
       if (newVal < 0 || newVal > 200) { 
        newVal = point.y - inc; 
       } 

       point.update(newVal); 

      }, 3000); 
     } 
    }); 
});</script> 

<h2>Index</h2> 
<div id="gauge" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

источник

2014-02-04 user2952473

'$ является undefined' обычно JQuery отсутствует. Я не вижу, где вы его загружаете ... – Jorg

вам просто нужно убедиться, что ваш внешний файл ссылается после ссылки на jquery –

Спасибо, ребята. Найдено ответ http://stackoverflow.com/questions/11799294/moved-inline-javascript-to-external-file – user2952473

$ неопределен придет время, когда вы используете '$', не включая Jquery файлы

источник

2014-02-04 10:47:55 Strikers

refactor javascript для внешнего файла

ответ

Смежные вопросы