how to pass parameter to googlechart controller.

Question

User-786736087 posted

I have learning asp.net and doing some vote system . when i try to display the data in google chart i find out i have problem to pass the parameter over.

The view code is 

<script>
$(document).ready(function () {
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: '@Url.Action("resultpost", "Home")',
success: function (result) {
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function () {
drawChart(result);
});
}
});
});

function drawChart(result) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Vote');
var dataArray = [];

$.each(result, function (i, obj) {
dataArray.push([obj.ChoiceText, obj.VoteCount]);
});
data.addRows(dataArray);

var columnChartOptions = {

width: 1000,
height: 400,
bar: { groupWidth: "20%" },
};

var columnChart = new google.visualization.ColumnChart(document
.getElementById('columnchart_div'));

columnChart.draw(data, columnChartOptions);
}
</script>

The controller is :

public ActionResult PieChart()
{
return View();
}
public ActionResult resultpost(int? questionId)
{
return Json(Result(questionId), JsonRequestBehavior.AllowGet);
}
public static List<Choices> Result(int? questionId)
{
using (var context = new DBQUIZEntities())
{
context.Configuration.LazyLoadingEnabled = false;
List<Choices> stdResult = context.Choices.Where(x => x.QuestionID == 1).ToList();
return stdResult;
}
}

currently i set this question ID==1 , but i want pass in parameter to replace 1 how i gonna do that? 

i did try using something like  <a class="btn btn-info btn-sm" href="@Url.Action("Index", "Home", new { id=question.QuestionID})">View Result</a>

but it return me a data instead of a view of chart , same for it if i return view(data);

Answer 1

User-939850651 posted

Hi chenweijonas,

I found that you are using ajax to get chart data. Have you tried to use ajax to pass parameters to the controller?

Something like this:

$.ajax({
            type: "POST",
            dataType: "json",
            data: {
                questionId: 1
            },
            contentType: "application/json",
            url: '@Url.Action("resultpost", "Home")',
            success: function (result) {
                google.charts.load('current', {
                    'packages': ['corechart']
                });
                google.charts.setOnLoadCallback(function () {
                    drawChart(result);
                });
            }
        });

[HttpPost]
        [ActionName("getChart")]
        public JsonResult getChartFromController(int questionId)
        {
            string resStr = string.Empty;
            if (questionId == 1) resStr = "questiond is -->" + questionId;
            else resStr = "questiond is not 1";
            return this.Json(resStr);
        }

Hope this can help you.

Best regards,

Xudong Peng