Question

依赖关系：

即使对于我的样本我正在处理随机生成的数据，理想情况下，有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

使用MVC和Javascript创建动态图表

0 个答案: