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

5 posts, 0 answers
  1. Ivan
    Ivan avatar
    12 posts
    Member since:
    Feb 2017

    Posted 12 Jun Link to this post

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

        node_modules
        --@progress
        ----kendo-ui
        ------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 html 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>
        }
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2351 posts

    Posted 14 Jun Link to this post

    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>
     

    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.
  3. Ivan
    Ivan avatar
    12 posts
    Member since:
    Feb 2017

    Posted 14 Jun in reply to Konstantin Dikov Link to this post

    The question is related to my relative files, not to the cdn, that is the easiest one.
  4. Dimitar
    Admin
    Dimitar avatar
    484 posts

    Posted 18 Jun Link to this post

    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.
  5. Ivan
    Ivan avatar
    12 posts
    Member since:
    Feb 2017

    Posted 18 Jun in reply to Dimitar Link to this post

    Dimitar: 

    I agree with you about putting the content in any other folder, that works, but in that way, I will fall maintaining all the css and js that can be generated from npm and copying all the ones I use every time I update the npm folder to the new folder I created.

    This was what I was trying to achieve

    <script src="~/node_modules/@@progress/kendo-ui/js/kendo.all.js"></script>

    the @progress can't be used as part of the URL because it is part of the razor syntax, that's why you need to use the double @@.

    Anyways, thanks for your help

Back to Top