I want to pass my Model data to JS script and file. I have a file which creates a diagram to show my users some data. How can I pass my data to inline JS script or JS file?
Note: Using ASP .NET Core with MVC
JS Code:
onload="javascript:chartMaker(@Model.Context.Meetings.Where(c => c.Status == "Done").Count(),@Model.Context.Meetings.Where(c => c.Status == "Processing").Count(),@Model.Context.Meetings.Where(c => c.MeetingStatus == "Done").Count())"
<script type="text/javascript">
function chartMaker(meetingDone,meetingInProcess,meetingGoingOn) {
const chartOrderStatistics = document.querySelector('#orderStatisticsChartLocal');
let cardColor, headingColor, axisColor, shadeColor, borderColor;
cardColor = config.colors.white;
headingColor = config.colors.headingColor;
axisColor = config.colors.axisColor;
borderColor = config.colors.borderColor;
orderChartConfig = {
chart: {
height: 165,
width: 130,
type: 'donut'
},
labels: ['Done', 'Processing', 'Processing'],
series: [parseInt(meetingDone), 20, 30],
colors: [config.colors.primary, config.colors.secondary, config.colors.info],
stroke: {
width: 5,
colors: cardColor
},
dataLabels: {
enabled: false,
formatter: function (val, opt) {
return parseInt(val) + '%';
}
},
legend: {
show: false
},
grid: {
padding: {
top: 0,
bottom: 0,
right: 15
}
},
plotOptions: {
pie: {
donut: {
size: '75%',
labels: {
show: true,
value: {
fontSize: '1.5rem',
fontFamily: 'Public Sans',
color: headingColor,
offsetY: -15,
formatter: function (val) {
return parseInt(val) + '%';
}
},
name: {
offsetY: 20,
fontFamily: 'Public Sans'
},
total: {
show: true,
fontSize: '0.8125rem',
color: axisColor,
label: 'Monthly',
formatter: function (w) {
return '38%';
}
}
}
}
}
}
};
if (typeof chartOrderStatistics !== undefined && chartOrderStatistics !== null) {
const statisticsChart = new ApexCharts(chartOrderStatistics, orderChartConfig);
statisticsChart.render();
}
}
</script>
Using this js code with onLoad method attached to my html script and calling method with its function name.
It doesn’t really matter if it is inline JS code or new JS file for me to pass Model data to js. For example I need to pass given data in function name:
@Model.Context.Meetings.Where(c => c.Status == "Done").Count()
How can it be done or better way to think another solution to pass data tı JS code and use it as a normal variable in this code, any suggestion?
I have tried passing directly with razor syntax but it doesn’t work