将javascript重构为外部文件

我是ASP.Net和JQuery的初学者。所以请原谅我问了这个愚蠢的问题。我有一个

Index.cshtml

文件，如下所示。我正在使用Highcharts的示例代码来制作仪表。我的问题是：

之间的代码既长又乱，如何使它更紧凑？ 我曾尝试将其移动到脚本文件夹中的外部文件

myscript.js

，并在

Index.cshtml

中包含一行

，但它给我的错误是$未定义，我怀疑这可能是由于在浏览器中完成DOM之前加载外部myscript.js造成的。我曾尝试将代码放入_layout.cshtml中，但这也不太好。谢谢你的帮助

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

@model IEnumerable
@{
ViewBag.Title=“Index”；
}
@{
Layout=“~/Views/Shared/_Layout.cshtml”；
}
$（函数（）{
美元（“#规格”）。高图({
图表：{
类型：“仪表”，
plotBackgroundColor:null，
plotBackgroundImage:空，
绘图边框宽度：0，
plotShadow:false
},
标题：{
文本：“当前”
},
窗格：{
startAngle:-150，
端角：150，
背景：[{
背景颜色：{
线性半径：{x1:0，y1:0，x2:0，y2:1}，
停止：[
[0，#FFF']，
[1, '#333']
]
},
边框宽度：0，
外层：109%
}, {
背景颜色：{
线性半径：{x1:0，y1:0，x2:0，y2:1}，
停止：[
[0, '#333'],
[1'#FFF']
]
},
边框宽度：1，
外层：107%
}, {
//默认背景
}, {
背景颜色：“#DDD”，
边框宽度：0，
外层：105%，
内半径：“103%”
}]
},
//价值轴
亚克斯：{
分:0,，
最高：200，
minorTickInterval:“自动”，
minorTickWidth:1，
minorTickLength:10，
minorTickPosition:“内部”，
minorTickColor:“#666”，
像素间隔：30，
宽度：2，
位置：'内部'，
长度：10，
勾选颜色：'#666'，
标签：{
步骤：2，
旋转：“自动”
},
标题：{
文字：“伏特”
},
绘图带：[{
起:0,，
致：120，
颜色：'#55BF3B'//绿色
}, {
起：120，
收件人：160，
颜色：'#DDDF0D'//黄色
}, {
起：160，
致:200,，
颜色：'#DF5353'//红色
}]
},
系列：[{
名称：“当前”，
数据：[80]，
工具提示：{
valueSuffix:'Volt'
}
}]
},
//增添活力
功能（图表）{
if（！chart.renderer.forExport）{
setInterval（函数（）{
变量点=图表。系列[0]。点[0]，
纽瓦尔，
inc=数学舍入（（数学随机数（）-0.5）*20）；
newVal=点y+inc；
如果（newVal<0 | | newVal>200）{
newVal=point.y-inc；
}
更新点（newVal）；
}, 3000);
}
});
});
指数

<未定义$将在使用“$”而不包括jquery文件时出现

$未定义

通常缺少jquery。我看不到你们在哪里加载它…你们只需要确保在引用JQueryTank之后引用了外部文件。找到答案