如何使用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 事件，读取所选选项值（假设它是员工 ID）并将其传递给 return 图表数据的操作方法对于该员工记录并更新图像标签的 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.

后面的值

我为 SELECT 元素硬编码了 HTML。您可以根据需要使用 Html.DropDownList 或 Html.DropDownListFor 辅助方法使用 table 中的员工数据替换它。

现在，更新您的操作方法以接受员工 ID 值作为参数

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

假设您的页面中没有任何其他脚本错误，这应该可以工作。

如何使用MVC图表助手在MVC的图表中选择值以在图表中显示值以显示员工的值时如何获取下拉列表？

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?

asp.net

asp.net-mvc

charts

asp.net-mvc-helpers

asp.net-mvc-5