I want to display a jsonResult output using my cshtml page. Below is the code i have written:
HomeController.cs code:
public JsonResult GetScafCapacity()
{
var data = cap.Scaff();
return Json(data, JsonRequestBehavior.AllowGet);
}
public JsonResult GetScafVolume()
{
var data = vol.ScaffVol();
return Json(data, JsonRequestBehavior.AllowGet);
}
Code in Common Folder(HomeContent.cs):
public List<ResourceContention> Scaff()
{
string cString = ConfigurationManager.ConnectionStrings["homeData"].ToString();
List<ResourceContention> scaffCapacity = new List<ResourceContention>();
OracleConnection conn = new OracleConnection(cString);
OracleCommand cmd1 = new OracleCommand();
cmd1.CommandText = "select sum(VENDOR_CAPACITY) from T_VENDOR_CAPACITY where SERVICE_DEPT ='M' and VENDOR_NAME !='DPS'";
cmd1.Connection = conn;
OracleDataAdapter da = new OracleDataAdapter(cmd1);
DataTable dt = new DataTable();
da.Fill(dt);
conn.Dispose();
return (scaffCapacity);
}
public List<ResourceContention> ScaffVol()
{
string cString = ConfigurationManager.ConnectionStrings["homeData"].ToString();
List<ResourceContention> scaffVolume = new List<ResourceContention>();
OracleConnection conn = new OracleConnection(cString);
OracleCommand cmd2 = new OracleCommand();
cmd2.CommandText = "Select 0.025*(sum (VOLUME)) from T_BOOK_RESOURCE where SERVICE_DEPT ='M' and REQ_STATUS!='DISM'";
cmd2.Connection = conn;
OracleDataAdapter da = new OracleDataAdapter(cmd2);
DataTable dt = new DataTable();
da.Fill(dt);
conn.Dispose();
return (scaffVolume);
}
下面是我的CSTML代码。我需要将scaffVolume值放在堆栈图中。当前只有一个条形图可以显示脚手架数量。在脚手架数量以上,我的scaffVolume值应堆叠。 ScaffCapacity将是该堆栈条上方的一个点。如果堆栈将越过该点,则越过的部分将变为RED [![enter image description here
] [1]] [1]:
/*Global Variables*/
var graphS;
var graphM;
var graphSW;
var graphMW;
var samS;
var samM;
var flagResDDLS;
var eventS;
var arrayS;
var flagResDDLM;
var eventM;
var arrayM;
var r;
/*GV End*/
$(document).on("click", "#tblWeekly tr", function (e) {
var startdate = $(this).find('td:eq(1)').text();
var endate = $(this).find('td:eq(2)').text();
$("#tblWeekly").DataTable({
scrollY: '50vh',
//scrollCollapse: true,
paging: false,
scrollX: true,
fixedHeader: true,
});
$("#divDaily").hide();
$("#load2").show();
$("#tblCrane").DataTable().destroy();
$("#tblScaf").DataTable().destroy();
$("#tblManp").DataTable().destroy();
$.post({
url: '@(Url.Action("Daily", "ResourceContention"))?startdate=' + startdate + '&enddate=' + endate,
}).promise().done(function (data) {
$("#divDaily").html('');
$("#divDaily").html(data);
}).promise().done(function () {
if ('@ViewBag.crane' ==1) {
$('#craneLink').css("background-color", "#ffd27f");
}
if ('@ViewBag.scaf' ==1) {
$('#scaffLink').css("background-color", "#ffd27f");
}
if ('@ViewBag.manp' ==1) {
$('#manLink').css("background-color", "#ffd27f");
}
$("#divDaily").show();
window.setTimeout(function () {
$.post({
url: '@(Url.Action("ScaffChart", "ResourceContention"))?strtdate=' + startdate + '&enddate=' + endate,
}).promise().done(function (dataS) {
if (graphS)
graphS.destroy();
var dt = [];
var labels = [];
$(dataS).each(function (index, item) {
dt.push(item.quantity);
labels.push(item.WeekStartDate);
});
samS = labels;
//Chart Plottiong
var ctx = $("#myChartScaff").get(0).getContext("2d");
var chartS = new Chart(ctx, {
title: 'Scaffolding Quantity Daywise',
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Scaffolding Quantity (Tons)',
data: dt,
backgroundColor: ['rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)'],
borderColor: ['rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)', 'rgba(21, 146, 119, 0.87)'],
strokeColor: "#79D1CF",
borderWidth: 1
}]
},
options: {
tooltips: {
enabled: true,
},
onClick: graphClickEventS,
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
gridLines: {
display: true,
},
display: true,
scaleLabel: {
display: true,
fontColor: 'rgb(23,162,184)',
labelString: 'Ton(s)'
},
ticks: {
beginAtZero: true,
//max: 3000,
//stepSize : 5,
mirror: true,
fontColor: 'rgb(23,162,184)',
}
}],
xAxes: [{
gridLines: {
display: false,
},
display: true,
scaleLabel: {
display: true,
fontColor: 'rgb(23,162,184)',
//labelString: 'FY ',
},
ticks: {
fontColor: 'rgb(23,162,184)',
}
}],
},
animation: {
duration: 0,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = 'center';
ctx.fillStyle = "rgb(23,162,184)";
ctx.textBaseline = 'bottom';
ctx.fontStyle= "bold";
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index]+" (Tons)";
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
}
}//
});
graphS = chartS;
}).promise().done(function () {
$("#load2").fadeOut("slow", function () { });
});
}, 1000);
});
});
[1]: https://i.stack.imgur.com/MvFLZ.jpg
使用新关键字呈现json结果。
public JsonResult GetScafVolume()
{
var data = vol.ScaffVol();
return Json(new {data}, JsonRequestBehavior.AllowGet);
}