javascript - Asp.Net MVC razor graph using jquery ajax call - Stack Overflow

admin管理员组

文章数量:1404924

I am trying to bind data to graph through razor. I pull data through a jquery ajax call and planning to bind the resultant data to graph. Is there any option to include razor code inside jquery success function? How can I bind count values to x,yValues in chart code?

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

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

Result Json:

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

Edit: Or Can I use jquery result groupd by inside Razor code?

I am trying to bind data to graph through razor. I pull data through a jquery ajax call and planning to bind the resultant data to graph. Is there any option to include razor code inside jquery success function? How can I bind count values to x,yValues in chart code?

https://www.asp/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

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

Result Json:

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

Edit: Or Can I use jquery result groupd by inside Razor code?

• javascript
• jquery
• asp
• asp-mvc
• razor

Share Improve this question Follow edited Nov 30, 2016 at 23:03 Kurkula asked Nov 26, 2016 at 18:00 KurkulaKurkula 6,7822828 gold badges138138 silver badges215215 bronze badges 1

• Is that first code block (that generates the chart) in the same view as your script? And the short answer is no - razor code is generated on the server before you pass it to the client. Just use a partial view for the chart, and return it in the ajax call and update the DOM – user3559349 Commented Nov 29, 2016 at 11:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +25

As @Stephen Muecke said, this kind of solution is not possible, but, perhaps, you can try it by using a partial view to render your graph in the server and then, inject it with ajax in your web page.

Something like this:

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

script:

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

And in "MyAction":

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

So, in this case, in 'MyAction' partial view, you can generate your graph.

There is no way to update C# object (i.e chartImage) from javascript.

But you can do one thing as you are making call to server to get Json data. So instead of getting data you can get chart directly.

Following is the code:- In 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;
    }
}  

Index.cshtml

@{
   ViewBag.Title = "Index";   
 } 

<h2>Index</h2>

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

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

本文标签： javascriptAspNet MVC razor graph using jquery ajax callStack Overflow