newbie best practice for scripts

2 posts, 0 answers
  1. Robert
    Robert avatar
    1 posts
    Member since:
    Feb 2014

    Posted 03 Mar 2014 Link to this post

    You've all been doing this for a bit, so please be patient...

    Please follow along to see the logic…don't assume the initial error is my issue...

    In MVC - I have a part view and wanted a datepicker on it.

    So in my _PartialFormName.cshtml I had (from the  sample) the following:

    <input id="datepicker" />
            <script>
                $(function() {
                    $("#datepicker").kendoDatePicker();
                });
    </script>
     
    This reports the error $ not defined.

    That's because the render scripts call hasn't loaded the JQuery library at the bottom of the _Layout.cshtml page:

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

    AND the script is not in a @section Script section that will be rendered by the call: 

        @RenderSection("scripts", required: false)

    So, I put the script for datetimepicker it in the @section Script block...

    BUT that's in the main MainPage.cshtml razor page, NOT the _PartialFormName.cshtml partial page…
     
    So I need to know and collect all the control scripts of ALL partial views and put their scripts in the containing page?

    ******************************************
    Now the best practice question...

    Should I reference a child script named for that partial view containing all of the kendo scritps for that page?

    How do we best contain kendo scripts? Is there a best practice?

    Thanks

     

     

    Thanks

    R

  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 04 Mar 2014 Link to this post

    Hello Robert,

    I understand your desire to register script files at the bottom of the page, but this automatically brings up the requirement to reorganize all jQuery-dependent scripts.

    You have two options:

    1. Move jQuery to the page <head>

    2. Move all jQuery-dependent scripts below the jQuery registration statement.

    Generally, the "best practice" is (2), but I am not sure it is worth it in all scenarios or at all costs.

    If you are using the Kendo UI MVC wrappers, you will need to defer the rendering of initialization scripts in order to control their placement:

    http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/fundamentals#deferred-initialization

    Before reorganizing the scripts, you can make a simple performance test - locate the generated HTML output of each Kendo UI widget wrapper. Replace the server widget declaration with the rendered HTML and <script> tag. Once you have this running OK, move the <script> tags below the jQuery file registration. Compare this setup with option (1) above, when you change nothing, but only move the script files to the <head>.

    Another possible option, which may seem more complex at first glance, but more effective and less error-prone in the long run, is to wrap the Kendo UI initialization statements in custom functions, which will be registered to some global array and then executed in bulk after jQuery is registered. In this way you will not have to move any scripts or script files.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top