I am fairly new to the js and the referencing of the script. I have a particular js code in my partial view. The actual code is:
<script>
var bID = @businessIDScript;
var gID = @groupIDScript;
var dID = @departmentIDScript;
var aID = @areaIDScript;
if (!(aID > 0)) {
$("#createIdlerButton").attr("disabled", "disabled");
$("#importIdlerButton").attr("disabled", "disabled");
}
if (@sapEnabled == true) {
$("#sapIdlerReport").show();
$("#sapIdlerReportAnchor").removeAttr('onClick');
$("#sapIdlerReportAnchor").attr('onClick', 'PDS.IdlerManagement.sapIdlerReport(' + bID + ',' + gID + ',' + dID + ',' + aID + ')');
} else {
$("#sapIdlerReport").hide();
}
</script>
complete razor view page is:
@using PDS.Domain.EF6.Resources.Web
@using Kendo.Mvc.UI
@using PDS.Web.Areas.PlannedInspections.Models;
@using PDS.Web.Utils;
@{
var sapEnabled = ViewBag.SAPEnabled.ToString().ToLower();
var isLaidOutHide = (string)ViewData["isLaidOutHide"];
var EnforceUserDropDown = (string)ViewData["EnforceUserDropDown"].ToString().ToLower();
var CurrentLevelIsDashboard = false;
bool.TryParse(ViewData["CurrentLevelIsDashboard"].ToString(), out CurrentLevelIsDashboard);
var WorkOrderDashboardParameters = ViewData["WorkOrderDashboardParameters"] != null ?
(WorkOrderDashboardParameters)ViewData["WorkOrderDashboardParameters"] : null;
var importDataName = ViewData["importDataName"]?.ToString() ?? "";
var importTemplateUrl = ViewData["importTemplateUrl"]?.ToString() ?? "";
var importActionUrl = ViewData["importActionUrl"]?.ToString() ?? "";
var areaId = ViewData["areaId"]?.ToString().Trim() ?? "";
var areaIDScript = string.IsNullOrEmpty(areaId) ? "0" : areaId;
var breadcrumbTitle = ViewData["breadcrumbTitle"]?.ToString().Trim() ?? "";
var areaIdStr = ViewData["areaId"]?.ToString().Trim() ?? null;
var departmentIdStr = ViewData["departmentId"]?.ToString().Trim() ?? null;
var groupIdStr = ViewData["groupId"]?.ToString().Trim() ?? null;
var businessIdStr = ViewData["businessId"]?.ToString().Trim() ?? null;
var businessId = "";
if (!string.IsNullOrEmpty(businessIdStr))
{
businessId = businessIdStr;
}
else
{
using (var context = PDS.Domain.EF6.EF.CcMSEntitiesv6.CreateForUser(User))
{
if (!string.IsNullOrEmpty(groupIdStr))
{
var id = int.Parse(groupIdStr);
businessId = context.vwAreas.FirstOrDefault(x => x.GroupID == id)?.BusinessID.ToString() ?? "";
}
else if (!string.IsNullOrEmpty(departmentIdStr))
{
var id = int.Parse(departmentIdStr);
businessId = context.vwAreas.FirstOrDefault(x => x.DepartmentID == id)?.BusinessID.ToString() ?? "";
}
else if (!string.IsNullOrEmpty(areaIdStr))
{
var id = int.Parse(areaIdStr);
businessId = context.vwAreas.FirstOrDefault(x => x.AreaID == id)?.BusinessID.ToString() ?? "";
}
}
}
var businessIDScript = string.IsNullOrEmpty(businessId) ? "0" : businessId;
var groupIDScript = string.IsNullOrEmpty(groupIdStr) ? "0" : groupIdStr;
var departmentIDScript = string.IsNullOrEmpty(departmentIdStr) ? "0" : departmentIdStr;
}
<div id="idler-grid-toolbar" class="toolbarGridContainer">
<div class="pull-left">
@(Html.Kendo().DropDownList()
.Name("GridFilter")
.HtmlAttributes(new { data_column = "IsAtRisk" })
.Items(items =>
{
items.Add().Text(IdlerManagement.IdlerTag_Dropdown_HideReplaced).Value("active");
items.Add().Text(General.All).Value("all");
items.Add().Text(IdlerManagement.IdlerTag_Dropdown_AtRisk).Value("atrisk");
})
.Events(ev => ev.Change("PDS.IdlerManagement.activeIdlerDashboardFilterChanged"))
)
@(Html.Kendo().DropDownList()
.Name("IdlerGridFilter")
.HtmlAttributes(new { data_column = "Idler" })
.Items(items =>
{
items.Add().Text(IdlerManagement.Idlers).Value("true");
items.Add().Text(IdlerManagement.Structures).Value("false");
items.Add().Text(General.All).Value("all");
})
.Events(ev => ev.Change("PDS.IdlerManagement.activeIdlerDashboardFilterChanged2"))
)
@if (!CurrentLevelIsDashboard)
{
<span class="pull-right">
<button type="button" id="schematicsButton" class="btn btn-default" title='@IdlerManagement.Schematics_Button' onclick="PDS.IdlerManagement.editSchematic(this, '@areaId')">
@IdlerManagement.Schematics_Button
</button>
</span>
}
@if (User.IsInRole("Power User") || User.IsInRole("Business Administrator") || User.IsInRole("System Administrator"))
{
<div class="pull-right">
<div class="dropdown shutdown-planner-dropdown">
<button type="button" id="shutdownPlannerTags" class="btn btn-default dropdown-toggle" title='@IdlerManagement.ShutdownPlanner_Button' data-toggle="dropdown">
@IdlerManagement.ShutdownPlanner_Button
<span role="button" unselectable="on" class="k-select" aria-label="select">
<span class="k-icon k-i-arrow-60-down"></span>
</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" style="transform:translate3d(0px, 51px, 0px); overflow-y:auto">
<li>
<a href="#" class="addShutdown" onclick="PDS.IdlerManagement.shutdownPlannerAdd(this, '@businessId', '@breadcrumbTitle', '@User.Identity.Name')" id="shutdownPlannerTags">@IdlerManagement.ShutdownPlanner_Button_Add</a>
</li>
<li>
<a href="#" class="removeShutdown" onclick="PDS.IdlerManagement.shutdownPlannerRemove(this, '@User.Identity.Name')" id="shutdownPlannerTags">@IdlerManagement.ShutdownPlanner_Button_Remove</a>
</li>
</ul>
</div>
</div>
@Html.Partial("_IdlerShutdownPlannerTemplate")
}
@if (!User.IsInRole("Read Only User"))
{
<button class="btn btn-default " onclick="PDS.IdlerManagement.closeOutIdlerTags(this, @EnforceUserDropDown, '@User.Identity.Name')" disabled="disabled" id="closeOutIdlerTags">@IdlerManagement.IdlerTag_Button_CloseOut</button>
<button class="btn btn-default @isLaidOutHide" onclick="PDS.IdlerManagement.laidOutIdlerTags(this, @EnforceUserDropDown, '@User.Identity.Name')" disabled="disabled" id="laidOutIdlerTags">@IdlerManagement.IdlerTag_Button_LaidOut</button>
}
</div>
@if (WorkOrderDashboardParameters != null)
{
<span class="pull-right">
<button type="button" data-role="close" id="viewAsset" class="btn btn-default" title="@General.Close" onclick="PDS.Common.UrlHistory.navigateBack()">
<i class="fa fa-times"></i>
</button>
</span>
}
<span class="pull-right">
@Html.Partial("_QuickReport", new ViewDataDictionary() { { "groupName", "Idler Management" } })
</span>
@Html.Partial("_ImportExportButtons", new ViewDataDictionary() { { "DownloadTemplateUrl", $"/GlobalImportExport/ImportWizard/DownloadImportTemplateByEntity?entityName=IdlerTag" }, { "EntityName", "IdlerTag" } })
@if (!User.IsInRole("Read Only User"))
{
if (!CurrentLevelIsDashboard)
{
<div class="pull-right">
<div class="dropdown create-idlerstructure-button-dropdown">
<button type="button" id="createIdlerButton" class="btn btn-default dropdown-toggle" title="@IdlerManagement.IdlerTag_Tooltip_CreateRecord" data-toggle="dropdown"><i class="fa fa-plus"></i></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a href="#" class="addIdler-Idler" onclick="PDS.IdlerManagement.createIdlerTag(this, true, '@areaId', @Html.Raw(WorkOrderDashboardParameters != null && WorkOrderDashboardParameters.workOrderTaskId.HasValue ? WorkOrderDashboardParameters.workOrderTaskId.ToString() : "null"))" id="laidOutIdlerTags">@IdlerManagement.IdlerTag_Button_CreateIdler</a>
</li>
<li>
<a href="#" class="addIdler-structure" onclick="PDS.IdlerManagement.createIdlerTag(this, false, '@areaId', @Html.Raw(WorkOrderDashboardParameters != null && WorkOrderDashboardParameters.workOrderTaskId.HasValue ? WorkOrderDashboardParameters.workOrderTaskId.ToString() : "null"))" id="laidOutIdlerTags">@IdlerManagement.IdlerTag_Button_CreateStructure</a>
</li>
</ul>
</div>
</div>
}
}
</div>
@Html.Partial("_ImportTemplate", new ViewDataDictionary() { { "importTemplateUrl", importTemplateUrl }, { "importActionUrl", importActionUrl } })
<script>
var bID = @businessIDScript;
var gID = @groupIDScript;
var dID = @departmentIDScript;
var aID = @areaIDScript;
if (!(aID > 0)) {
$("#createIdlerButton").attr("disabled", "disabled");
$("#importIdlerButton").attr("disabled", "disabled");
}
if (@sapEnabled == true) {
$("#sapIdlerReport").show();
$("#sapIdlerReportAnchor").removeAttr('onClick');
$("#sapIdlerReportAnchor").attr('onClick', 'PDS.IdlerManagement.sapIdlerReport(' + bID + ',' + gID + ',' + dID + ',' + aID + ')');
} else {
$("#sapIdlerReport").hide();
}
</script>
The display looks like this: As you can see in the image below some of the js code is being rendered in the main page. I am having hard time fixing this issue.
Note: There is no issue with the functionality of the code it works perfectly fine. Even tried doing console.log("Hello World"). Throws the same dark half baked js in the page. Any help would be appreciated.
Thank you in advance.
What i have tried:
Initially, I thought this issue was due to some missing tags and closure in html tags but i fixed those issues and resolved up the console errors and warnings that i was getting for those tags. Also, i found out that "display none" on the script tag fixed that issue but my senior won’t allow it saying its not the solution just a hack. I don’t have a clue what is causing this issue because there are no warning nor any errors in VS. also i tried doing document.Ready function for this script but that failed miserably as well. Now i am out of depth and have no idea what is causing this error. Another solution i discovered was if i move this whole script inside a new <div> tag, it resolves the issue.
Expectation:
–> The js should not be rendered in the page.
3
Answers
It looks like the page is rending the script tag as html.
A quick and simple fix would be to hide the script tag like so:
If you could move that functionality outside of the razor page and into a dedicated javascript/typescript page it would probably fix the render issue aswell.
Below will help
can you please try it with script rendering section on you layout page and then render your script on that scope.
// use this on your layout page– bottom of page once all plugin scripts are rendered
// use below on your partial
}
Have you tried moving the script to a different location and see what happens? Kendo template might be rendering that JavaScript snippet to the datagrid columns/header as text. I guess what you can do is do first is do a trial and error determine where the code would work and the same time wont render as text. Maybe somewhere common like the layout page or something? Afterwards you can then do a proper fix like where the code should be best placed.