Как получить раскрывающийся список при выборе значения для отображения значений для сотрудника в диаграмме в mvc с помощью помощников диаграммы mvc?

Question

Здравствуйте, я в основном хочу, чтобы в раскрывающемся списке отображался список имен сотрудников, когда администратор или кто-либо из сотрудников, использующих его, выбирает имя, которое должна отображать диаграмма. Это возможно? Если так, пожалуйста, помогите мне...

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;

}

И это мой взгляд

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

Answer 1

Вы можете слушать change событие в раскрывающемся списке, прочитайте значение выбранного параметра (при условии, что это идентификатор сотрудника) и передайте его методу действия, который возвращает данные диаграммы для этой записи сотрудника и обновляет тег изображения src значение атрибута.

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

Вы можете видеть, что я установил атрибут данных html5 для тега изображения и установил для него значение относительного пути к методу действия, используя Url.Action Метод. Мы будем читать это значение позже в JavaScript.

Я жестко закодировал HTML для элемента SELECT. Вы можете заменить его, используя данные о сотрудниках из вашей таблицы, используя Html.DropDownList или же Html.DropDownListFor вспомогательные методы по мере необходимости.

Теперь обновите ваш метод действия, чтобы принять значение идентификатора сотрудника в качестве параметра

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
}

Теперь JavaScript для обработки события изменения.

$(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);
    }
});

Это должно работать, если у вас нет других ошибок скрипта на вашей странице.