我如何獲得一個下拉列表，當選擇一個值來顯示mvc中使用mvc圖表助手的圖表中的員工值時？

-1

你好基本上我想要一個下拉列表來顯示員工姓名列表，當管理員或管理人員正在使用它時選擇圖表必須顯示的名稱。這可能嗎？如果有，請幫我...我如何獲得一個下拉列表，當選擇一個值來顯示mvc中使用mvc圖表助手的圖表中的員工值時？

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>

來源

2017-09-17 Kimberly

您的代碼中沒有關於下拉列表的任何內容！ –

我在問是否可以用mvc圖表做這個，如果有的話我該怎麼做 – Kimberly

你可以聽的下拉列表中的change事件，閱讀選擇的選項值（假設它是員工id）並將其傳遞給action方法，該方法返回該員工記錄的圖表數據並更新圖像標記的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輔助方法，使用表中的員工數據替換它。

現在，更新您的操作方法接受值僱員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); 
    } 
});

這應該工作，假設您的頁面中沒有任何其他腳本錯誤。

來源

2017-09-17 14:45:14 Shyju

我如何獲得一個下拉列表，當選擇一個值來顯示mvc中使用mvc圖表助手的圖表中的員工值時？

回答

相關問題