Merge _Layout.cshtml with Kendo Client Side Resources

3 posts, 0 answers
  1. JoeThomas
    JoeThomas avatar
    10 posts
    Member since:
    Jun 2019

    Posted 07 Jun 2019 Link to this post

    I am trying to modify _Layout.cshtml to allow for Telerik Net Core UI. Need to add Client side resources to the page, By merging Layout with Telerik recommendations. Have been attempting for a long time, but not working. How would I conduct this properly? Looking for a final result page.

    https://docs.telerik.com/aspnet-core/getting-started/getting-started-copy-client-resources


    Here is a Default Project Net Core 

    **_Layout.cshtml**


        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>@ViewData["Title"] - WebApplication8</title>
        
            <environment include="Development">
                <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
                <link rel="stylesheet" href="~/css/site.css" />
            </environment>
            <environment exclude="Development">
                <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
                      asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                      asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
                <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
            </environment>
        </head>
        <body>
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication8</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                            <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                            <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        
            <partial name="_CookieConsentPartial" />
        
            <div class="container body-content">
                @RenderBody()
                <hr />
                <footer>
                    <p>&copy; 2019 - WebApplication8</p>
                </footer>
            </div>
        
            <environment include="Development">
                <script src="~/lib/jquery/dist/jquery.js"></script>
                <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
                <script src="~/js/site.js" asp-append-version="true"></script>
            </environment>
            <environment exclude="Development">
                <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                        asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                        asp-fallback-test="window.jQuery"
                        crossorigin="anonymous"
                        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
                </script>
                <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                        asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                        asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                        crossorigin="anonymous"
                        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
                </script>
                <script src="~/js/site.min.js" asp-append-version="true"></script>
            </environment>
        
            @RenderSection("Scripts", required: false)
        </body>
        </html>


    **Telerik Recommends doing this, merging into the Layout Page:**

        <head>
            ...
        
            <environment include="Development">
                ...
        
                <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" />
                <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.min.css" />
            </environment>
            <environment exclude="Development">
                ...
        
                <link rel="stylesheet"
                    href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-nova.min.css"
                    asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
                    asp-fallback-test-class="k-common-test-class"
                    asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
        
                <link rel="stylesheet"
                    href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.nova.min.css"
                    asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
                    asp-fallback-test-class="k-theme-test-class"
                    asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
            </environment>
        
            <environment include="Development">
                ...
        
                <script src="~/lib/jquery/dist/jquery.js"></script>
        
                @* Place Kendo UI scripts after jQuery *@
                <script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
                <script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
            </environment>
            <environment exclude="Development">
                ...
        
                <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                        asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                        asp-fallback-test="window.jQuery"
                        crossorigin="anonymous"
                        integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
                </script>
        
                @* Place Kendo UI scripts after jQuery *@
                <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"
                        asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
                        asp-fallback-test="window.kendo">
                </script>
                <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.aspnetmvc.min.js"
                        asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
                        asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
                </script>
            </environment>
        
            ...
        </head>

    **Final Result Page:?**
  2. JoeThomas
    JoeThomas avatar
    10 posts
    Member since:
    Jun 2019

    Posted 07 Jun 2019 in reply to JoeThomas Link to this post

    also posted here, https://stackoverflow.com/questions/56490132/net-core-merge-layout-cshtml-with-kendo-client-side-resources
  3. Martin
    Admin
    Martin avatar
    278 posts

    Posted 12 Jun 2019 Link to this post

    Hello Joe,

    Thank you for contacting us. According to the article you are referring, you need to load the Kendo scripts within the <head> tag. Also, you need to have jQuery loaded first. Attached you will find a sample project showing how to include Kendo in your Layout page.

    Don't hesitate to contact us if you have further questions.

    Regards,
    Martin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top