依赖关系:
即使对于我的样本我正在处理随机生成的数据,理想情况下,有C#
个代码正在运行设备/ Windows服务,它将不断吐出将被控制器抓取的数据。因此MVC
是必需的。我还需要使用ajax,以便图表“实时”而不是每次放入新数据时刷新。
问题:
由于MVC
是服务器端而Javascript
是本地的,因此我会在启动网站时获取空值,因为controller
需要生成很多值,并且然后在Javascript
中用于生成图表。另一个问题是来自控制器的数据不会“发送”到Javascript
。
function GetLatestFields()
是我想在控制器和Javascript
之间建立链接的地方。现在它只是抓住文本字段中的内容并从那里进行数学运算。
使用Javascript:
$("#form").on('submit', function (event) {
event.preventDefault();
$.ajax({
url: '/graph/generateData', //<-- manipulate the form data
type: 'POST',
success: GetLatestFields() //<-- send the manipulated data to here
});
});
// Index Counter
var newDataValueIndex = 0;
const chart = document.getElementById("lineChartGraph");
// Generate Empty Graph
var currentData = {
labels: [],
datasets: [
{
label: "Fixed Slope",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: [],
}
]
};
function UpdateChart(startValue, stepValue) {
lineChartObject.data.datasets[0].data[newDataValueIndex] = Math.floor((Math.random() * 10) + 1);
lineChartObject.data.labels[newDataValueIndex] = startValue;
newDataValueIndex += 1;
startValue += stepValue;
lineChartObject.update();
}
var customOption = {
showLines: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Step (mm)'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Absorbance'
}
}]
}
};
var lineChartObject = Chart.Line(chart, {
data: currentData,
options: customOption
});
// ***** This is where I would like to grab data from the controller *****
// Grab most updated values
function GetLatestFields() {
// I've tried (not at the same time):
// @: ViewData["stepValue"].ToString();
// @(ViewBag.StartValue)
var startValue = document.getElementById("start").value;
var stepValue = document.getElementById("step").value;
UpdateChart(startValue, stepValue);
}
控制器:
[HttpPost]
public void generateData(FormCollection collection)
{
// I've tried ViewBag and ViewData which did not work
int inputNumber = Request.Form["start"];
inputNumber = inputNumber*10
ViewBag.StartValue = inputNumber;
ViewData["stepValue"] = Request.Form["step"];
}
使用.Net
是否有更好的解决方法?
我还在考虑先将操纵数据发送到视图然后onChange
,Javascript
将与视图一起使用。但同样,我知道如何显示控制器生成的内容的唯一方法是在刷新时呈现的ViewBag。
基本上是这样的:
旧连接:
查看 - &gt;控制器 - &gt; JS
新连接:
查看 - &gt;控制器 - &gt;查看 - &gt; JS