![](/img/trans.png)
[英]How to pass parameters to referenced javascript file from razor view
[英]How to pass variables from Razor to JavaScript?
我有一個C#變量“value”,我想傳遞給JavaScript Chartjs數據對象。 它呈現圖表但不包括兩個@p值。 請參閱下面的代碼源:
cshtml文件:
@{
int p1 = 43;
int p2 = 45;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div style="width: 400px;">
<canvas id="lineChart" width="400" height="400"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="main.js"></script>
</body>
</html>
javascript文件:
var chart = document.getElementById("lineChart");
var data = {
labels: [2012, 2013, 2014, 2015, 2016, 2017],
datasets: [
{
label: "My Chart Label",
fill: false,
lineTension: 0.1,
data: ['(@p1)', '(@p2)', 50, 48, 47, 52]
}
]
};
var lineChart = new Chart(chart,
{
type: 'line',
data: data
}
);
我怎么寫它才能起作用?
像下面的東西
視圖:
@{
var p1 = 43;
var p2 = 45
}
<input type="hidden" id="PassingToJavaScript1" value=@p1>
<input type="hidden" id="PassingToJavaScript2" value=@p2>
JavaScript的:
var p1 = document.getElementById('PassingToJavaScript1').value;
var p2 = document.getElementById('PassingToJavaScript2').value;
你可以做
<script type="text/javascript">
var p1 = @p1, p2= @p2;
</script>
並使用p1,p2。
var data = {
labels: [2012, 2013, 2014, 2015, 2016, 2017],
datasets: [
{
label: "My Chart Label",
fill: false,
lineTension: 0.1,
data: [p1, p2, 50, 48, 47, 52]
}
]
};
在這種情況下,您不必使用隱藏的html字段,您可以擴展您的代碼以使用更多字段
var tempObj ={
tempData: "",
otherData:"",
moreData: ""
}
使用隱藏字段來保存值,然后從JavaScript中讀取隱藏字段的值。
例:
@{
int p = 43;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div style="width: 400px;">
<canvas id="lineChart" width="400" height="400"></canvas>
<input type="hidden" id="someId" value="@p" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="main.js"></script>
</body>
</html>
JS
var chart = document.getElementById("lineChart");
var hiddenFieldValue = document.getElementById("someId").value;
var data = {
labels: [2012, 2013, 2014, 2015, 2016, 2017],
datasets: [
{
label: "My Chart Label",
fill: false,
lineTension: 0.1,
data: ['(hiddenFieldValue)', 45, 50, 48, 47, 52] // Not really sure how to format the data but you get main idea...
}
]
};
var lineChart = new Chart(chart,
{
type: 'line',
data: data
}
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.