处理列表框中项目的单击事件

时间:2019-01-10 10:31:20

标签: javascript c# jquery asp.net-mvc

我有一些折线图可以从控制器获取数据,也有方法ListBox和一些SelectListItem项目。当我在列表框中单击任何这些项目时,我会得到graphId,然后将其传递到控制器的“坐标”方法,此方法将创建具有(x,y)坐标的dataCoord列表。因此,问题是如何通过单击“方法列表框”中的任何项来修改脚本以将此dataCoord列表传递到折线图中

这是坐标方法:

 public JsonResult Coordinates(int graphId)
    {   
        List<DataPoint> dataCoords = new List<DataPoint> { };

        string exp = "GRAPHIC_ID = " + graphId;

        DataRow[] foundrows;

        foundrows = oraVars.Ds.Tables["COORDS"].Select(exp);

        for (int i = 0; i < foundrows.Length; i++)
        {

            double x = Convert.ToDouble(foundrows[i].ItemArray[1]);

            double y = Convert.ToDouble(foundrows[i].ItemArray[2]);

            dataCoords.Add(new DataPoint(x, y));
        }

        return Json(dataCoords, JsonRequestBehavior.AllowGet);
    }

以下是脚本视图:

            $(document).ready(function () {
                $("#MethodsListBoxValues").change(function () {
                    $.ajax({
    type:   'POST',
    url:    '@Url.Action("coordinates")',
    dataType:  'json',
                        data: { graphId: $("#GraphicListBoxValues").val() },                  

                    "how to modify script?"
                    error: function (ex) {
                        alert('Failed.' + ex);
                    }
                });
                return false;
                })
            });

这是折线图脚本:

            window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "light2",
            animationEnabled: true,
            title: {
                text: "Simple Column Chart in ASP.NET MVC"
            },
            subtitles: [
                { text: "Try Resizing the Browser" }
            ],
            data: [
            {
                type: "line", //change type to bar, line, area, pie, etc
                dataPoints:@Html.Raw(ViewBag.DataPoints),

            }
            ]
        });
        chart.render();
    };

0 个答案:

没有答案