This is a migrated thread and some comments may be shown as answers.

How to include in html a script file that is contained in a folder with a special caracter

4 Answers 614 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Ivan asked on 12 Jun 2018, 03:20 PM

    After including the node_modules folder as part of my solutions I downloaded kendo- from Telerik running an command, it ended creating a folder structure like this:

node_modules
--@progress
----kendo-
------js
--------kendo.all.js

The thing is that I want to include those files as part of my HTML view.

**1-** I would like to know which is the approach if you need to include kendo.all.js in the without razor

**2-** I would like to know if exist a better way in razor than the one I am using below that allows me to use the files

@{
var kendoPath = "@progress";
}

@section Styles{
<link href="~/node_modules/@kendoPath/kendo-ui/css/web/kendo.common.min.css" rel="stylesheet" />
<link href="~/node_modules/@kendoPath/kendo-ui/css/web/kendo.default.min.css" rel="stylesheet" />
<link href="~/node_modules/@kendoPath/kendo-ui/css/web/kendo.default.mobile.min.css" rel="stylesheet" />
}

@section Scripts
{
<script src="~/node_modules/jquery/dist/jquery.min.js"></script>
<script src="~/node_modules/@kendoPath/kendo-ui/js/kendo.all.js"></script>
<script src="~/node_modules/@kendoPath/kendo-ui/js/kendo.all.js"></script>
}

4 Answers, 1 is accepted

answered on 14 Jun 2018, 08:30 AM

Hello Ivan,

You can load the script files and the CSS as you would do with any other script files. You can place them directly in the head section as plain HTML:

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-nova.min.css" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.nova.min.css" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.nova.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>

The above references the files from the CDN, but you can change the path to point to your location.

Let us know if you have something different in mind.

Regards,
Konstantin Dikov
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 18 Jun 2018, 11:31 AM

Hello Ivan,

In general, if you do not want to expose any of your internal paths when referencing the scripts and styles, you can make the desired folder a static route in your server that fetches its files from whatever directory they happen to reside in. Thus, if your files are in "./node_modules/kendo/js/". Then, the script tag in your pages just looks like this:

<script src="/scripts/kendo.all.min.js"></script>

Alternative approach for loading the resources is by bundling them together in App_Start/BundleConfig.cs:

// The Kendo JavaScript bundle

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(

"~/node_modules/@progress/kendo-ui/js/kendo.all.js",

"~/node_modules/@progress/kendo-ui/js/kendo.aspnetmvc.js*")

);

// The Kendo CSS bundle

bundles.Add(new StyleBundle("~/Content/kendo").Include(

"~/node_modules/@progress/kendo-ui/css/kendo.common-material.css",

"~/node_modules/@progress/kendo-ui/css/kendo.material.css")

);

And then render the bundles:

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title - My ASP.NET MVC Application</title>

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<meta name="viewport" content="width=device-width" />

@Styles.Render("~/Content/kendo")

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/kendo")

</head>

Regards,
Dimitar
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.