How do i get a dropdownlist to when a value is selected to display values for a employee in a chart in mvc using mvc chart helpers?

Question

Hello basically I want a dropdownlist to display a list of employee names when the admin or whoever in management is using it selects a name the chart must display. Is this possible? If so please help me...

public ActionResult CharterColumn()
{
    var results = (from c in db.Clockcards select c);
    // the employeeid is a foreign key in the clockcards table 
    // i want to get the name from the employee table 
    // and display only that employees hours worked for the months 
    var groupedByMonth = results
        .OrderByDescending(x => x.CaptureDate)
        .GroupBy(x => new { x.CaptureDate.Year, x.CaptureDate.Month }).ToList();

    List<string> monthNames = groupedByMonth
        .Select(a => a.FirstOrDefault().CaptureDate.ToString("MMMM"))
        .ToList();

    List<double> hoursPerMonth = groupedByMonth
        .Select(a => a.Sum(p => p.Hours))
        .ToList();

    ArrayList xValue = new ArrayList(monthNames);
    ArrayList yValue = new ArrayList(hoursPerMonth);

    new Chart(width: 800, height: 400, theme: ChartTheme.Yellow)
        .AddTitle("Chart")
        .AddSeries("Default", chartType: "Column", xValue: xValue, yValues: yValue)
    .Write("bmp");
    return null;

}

And this is my view

<div>
    <img src= "@Url.Action("CharterColumn")" alt="Chart"/>
</div>

Answer 1

You can listen to the change event on the dropdown list, read the selected option value (assuming it is the employee id) and pass that to the action method which return the chart data for that employee record and update the image tag's src attribute value.

<select id="employeeList">
    <option value="0">None</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<div>
    <img id="chart" data-url="@Url.Action("CharterColumn")" alt="Chart" />
</div>

You can see that i set an html5 data attribute to the image tag and i set the value of that to the relative path to the action method using Url.Action method .We will read this value later in javascript.

I hard coded the HTML for the SELECT element. You can replace it with using the employee data from your table using Html.DropDownList or Html.DropDownListFor helper methods as needed.

Now, update your action method to accept the employee id value as a parameter

public ActionResult CharterColumn(int employeeId)
{
    //use employeeId to filter the results
    var results = db.Clockcards.Where(s=>s.EmployeeId==employeeId).ToList();
    //your existing code to return the chart
}

Now the javascript to handle the change event.

$(document).ready(function () {

    loadChart($("#employeeList").val()); // initial load of the chart with selected option

    $("#employeeList").change(function () {
        var employeeId = $(this).val();
        loadChart(employeeId);
    });

    function loadChart(employeeId) {
        var imgSrc = $("#chart").data("url") + "?employeeId=" + employeeId;
        $("#chart").attr("src", imgSrc);
    }
});

This should work assuming you do not have any other script errors in your page.