使用 jquery ajax 调用的 Asp.Net MVC 剃刀图答案

【问题标题】：Asp.Net MVC razor graph using jquery ajax call使用 jquery ajax 调用的 Asp.Net MVC 剃刀图
【发布时间】：2017-04-10 19:44:11
【问题描述】：

我正在尝试通过 razor 将数据绑定到图形。我通过 jquery ajax 调用提取数据并计划将结果数据绑定到图形。是否有任何选项可以在 jquery 成功函数中包含剃须刀代码？如何将计数值绑定到图表代码中的 x,yValues？

https://www.asp.net/web-pages/overview/data/7-displaying-data-in-a-chart

@{
    var CountsPath = Server.MapPath("~/Content/Images/counts.jpg");

    if (File.Exists(CountsPath))
    {
        File.Delete(CountsPath);
    }

    var PathName = "~/Content/Images/counts.jpg";
    if (!File.Exists(Server.MapPath(PathName)))
    {
        var chartImage = new Chart(600, 400);
        chartImage.AddTitle("Count");
        chartImage.AddSeries(
            chartType: "Pie",
                name: "Sales",
                axisLabel: "Count",
                xValue: new[] { "2011", "2014" },//need from json
                yValues: new[] { "40", "285" });//need from json
        chartImage.Save(path: PathName);
    }
}

jQuery 脚本

<script>
    $(document).ready(function () {
        $.ajax({
            type: 'get',
            url: '/Home/GetSales',
            success: function (data) {
//Bind sales data counts by year result to graph

            },
            error: function (response) {
                alert(response.Message);
            },
            dataType: 'json'
        });
    });
</script>

结果 Json：

{"Sales":[
    {"Year":"2011", "loc":"ca"},
    {"Year":"2014", "loc":"wa"},
    {"Year":"2011", "loc":"wi"}
]}

编辑：或者我可以使用按 Razor 代码内部分组的 jquery 结果吗？

【问题讨论】：

第一个代码块（生成图表）是否与您的脚本在同一视图中？简短的回答是否定的——剃须刀代码是在您将其传递给客户端之前在服务器上生成的。只需为图表使用部分视图，并在 ajax 调用中返回它并更新 DOM

标签： javascript jquery asp.net asp.net-mvc razor

【解决方案1】：

正如@Stephen Muecke 所说，这种解决方案是不可能的，但是，也许，您可以尝试通过使用局部视图在服务器中呈现您的图形，然后在您的网页中使用 ajax 注入它。

类似这样的：

<div>
    your page content
    <div id="graph">
    </div>
</div>

脚本：

$("#graph").load("MyAction", { yourdata }, function() { yourcallback });

在“MyAction”中：

public ActionResult MyAction( ... ) {
    ...
    return PartialView(Model);
};

因此，在这种情况下，您可以在“MyAction”部分视图中生成图表。

【讨论】：

【解决方案2】：

无法从 javascript 更新 C# 对象（即 chartImage）。

但是您可以在调用服务器以获取 Json 数据时做一件事。因此，您可以直接获取图表，而不是获取数据。

以下是代码：- 在 HomeController 中

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetSales()
    {
        var chartImage = new Chart(600, 400);
        chartImage.AddTitle("Count");
        chartImage.AddSeries(
            chartType: "Pie",
                name: "Sales",
                axisLabel: "Count",
                xValue: new[] { "2011", "2014" },// Make change based on your Json Data
                yValues: new[] { "40", "285" }// Make change based on your Json Data
                ).Write(format: "jpg");
        return null;
    }
}

索引.cshtml

@{
   ViewBag.Title = "Index";   
 } 

<h2>Index</h2>

<img src="/home/GetSales" />

【讨论】：

【解决方案3】：

I have created chart in my application using below code 

// On controller side

public void My_Chart(List<my_Class> objClass)
    {
        var myChart = new Chart(width: 400, height: 300, theme: ChartTheme.Blue)
        .AddTitle("My Chart Title")
        .AddLegend()
        .AddSeries("Default",
         xValue: objClass, xField: "FieldName",
         yValues: objClass, yFields: "FieldName")
        .ToWebImage("png");
        // Charts is folder inside my project where image is got saved
        myChart.Save("~/Charts/My_image", "jpeg");
    }


// And .cshtml side code is as follows

<img src="../Charts/My_image.jpeg" />`enter code here`

Note: before image loads your controller side code must be initialised

【讨论】：