[MVC Newbie] Sections - script

[PdeBie]

Hoi allen,

momenteel ben ik bezig met de asp.net MVC 4 tutorial. (http://www.asp.net/mvc/tu...vc4/intro-to-aspnet-mvc-4)

Ik ben momenteel bij stap 6 (http://www.asp.net/mvc/tu...dit-methods-and-edit-view) en daarin zijn we de edit method en views aan het bestuderen.

Omdat wij hier in NL met de cultureCode nl-NL werken, leek het mij wel handig om dit in te bouwen. In de pagina hierboven vermeld geven ze daar ook een tip voor.

Note to support jQuery validation for non-English locales that use a comma (",") for a decimal point, you must include globalize.js and your specific cultures/globalize.cultures.js file(from https://github.com/jquery/globalize ) and JavaScript to use Globalize.parseFloat. The following code shows the modifications to the Views\Movies\Edit.cshtml file to work with the "fr-FR" culture:

code:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/globalize.js"></script>
    <script src="~/Scripts/globalize.culture.fr-FR.js"></script>
    <script>
        $.validator.methods.number = function (value, element) {
            return this.optional(element) ||
                !isNaN(Globalize.parseFloat(value));
        }
        $(document).ready(function () {
            Globalize.culture('fr-FR');
        });
    </script>
    <script>
        jQuery.extend(jQuery.validator.methods, {    
            range: function (value, element, param) {        
                //Use the Globalization plugin to parse the value        
                var val = $.global.parseFloat(value);
                return this.optional(element) || (
                    val >= param[0] && val <= param[1]);
            }
        });

    </script>
}

Alleen geven zij aan dat je dit op elke pagina moet doen waar het nodig is. Beetje onzin dacht ik, dat moet prima in de layout view kunnen. Anders moet je straks (mochten er ineens meerdere talen ondersteund worden) op tig plaatsen aanpassingen doen.

Onderin de layout view van de tutorial staat het volgende:

code:

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

Ik dacht heel simpel het voorbeeld wat de site aangaf hieronder te plakken en dat het dan wel zou werken. Maar helaas. De site rendered mijn script niet. Dat komt (denk ik) doordat hij overschreven wordt door de volgende code op de Edit view.

code:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Klopt dit?


Daarna dacht ik 'ow, maar ik kan natuurlijk die scripts ook buiten de section plaatsen. Dus:

code:

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
        
        <script src="~/Scripts/globalize/globalize.js"></script>
        <script src="~/Scripts/globalize/cultures/globalize.culture.nl-NL.js"></script>
        <script>
            $.validator.methods.number = function (value, element) {
                return this.optional(element) ||
                    !isNaN(Globalize.parseFloat(value));
            };
            $(document).ready(function () {
                Globalize.culture('nl-NL');
            });
        </script>
        <script>
            jQuery.extend(jQuery.validator.methods, {
                range: function (value, element, param) {
                    //Use the Globalization plugin to parse the value        
                    var val = $.global.parseFloat(value);
                    return this.optional(element) || (
                        val >= param[0] && val <= param[1]);
                }
            });
        </script>

Maar dan begint hij te mekkeren dat hij jQuery.validator.methods niet kent.
En dat terwijl @Scripts.Render("~/bundles/jqueryval") eerder wordt ingeladen op de edit view naar wat ik zo zie.

Hoop vragen, maar hoop dat het een beetje duidelijk is

[D-Raven]

De fout die je maakt is dat sections worden op een hiërarchische wijze gemerged.

Dus de volgorde van rendering is:

- Layout
- View
(tegelijkertijd)
- Partials
- sections in de view

Dus als je dit wilt oplossen moet je het volgende doen:

In je layout:

code:

@Scripts.Render("~/bundles/jqueryval");
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize.culture.fr-FR.js"></script>
    <!-- ik zou bovenstaande gewoon in een bundle opnemen oid -->
@RenderSection("scripts", required: false);

en dan in je view

code:

@section Scripts {
    <script>
        $.validator.methods.number = function (value, element) {
            return this.optional(element) ||
                !isNaN(Globalize.parseFloat(value));
        }
        $(document).ready(function () {
            Globalize.culture('fr-FR');
        });
    </script>
    <script>
        jQuery.extend(jQuery.validator.methods, {    
            range: function (value, element, param) {        
                //Use the Globalization plugin to parse the value        
                var val = $.global.parseFloat(value);
                return this.optional(element) || (
                    val >= param[0] && val <= param[1]);
            }
        });

    </script>
}

Op deze manier kun je dus ook de volgende structuur opzetten

layout -> view -> andere view

waarbij de layout file van 'andere view' wijst naar view, en view weer naar 'layout'.

Je laatste voorbeeld gaat fout omdat je het script 'jquery' rendered, en niet 'jqueryval'

[PdeBie]

D-Raven schreef op donderdag 17 oktober 2013 @ 16:54:

en dan in je view

code:

@section Scripts {
    <script>
        $.validator.methods.number = function (value, element) {
            return this.optional(element) ||
                !isNaN(Globalize.parseFloat(value));
        }
        $(document).ready(function () {
            Globalize.culture('fr-FR');
        });
    </script>
    <script>
        jQuery.extend(jQuery.validator.methods, {    
            range: function (value, element, param) {        
                //Use the Globalization plugin to parse the value        
                var val = $.global.parseFloat(value);
                return this.optional(element) || (
                    val >= param[0] && val <= param[1]);
            }
        });

    </script>
}

Maar je ziet in dit script ook nog fr-FR staan. Dit zou je dan kunnen parameteriseren om het flexibel te maken? Hiermee bedoel ik dat hij de cultureCode fr-FR automagisch aanpast naar de gewenste cultureCode.


Die volgorde van rendering is nog niet uitgelegd in de tutorial, maar dat verklaart wel het een en ander ja.
Afijn, we gaan weer eens puzzelen.

[Megamind]

Je kan in princiepe je script section zo hergebruiken:

_Layout.cshtml

code:

@section Script {
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
       // Hier al je JS die je dus in je layout wilt hebben
    </script>
    @RenderSection("Script", false)
}

die laatste regel zorgt ervoor dat de script sectie in je view hierin gezet wordt.

[Grijze Vos]

Als dat script op alle pagina's nodig is, zet hem dan in een losse js file en maak hem onderdeel van je bundle. Sowieso zou je geen javascript in je views moeten willen hebben.

[Afvalzak]

Inderdaad, nooit begrepen waarom ze dat bij die tutorial "aanleren"

[PdeBie]

Grijze Vos schreef op vrijdag 18 oktober 2013 @ 08:41:
Als dat script op alle pagina's nodig is, zet hem dan in een losse js file en maak hem onderdeel van je bundle. Sowieso zou je geen javascript in je views moeten willen hebben.

Uiteraard, maar ik wil eerst de tutorial enigzins volgen en het principe van de sections etc. snappen.

[ Voor 5% gewijzigd door PdeBie op 18-10-2013 08:43 ]

[D-Raven]

pdebie schreef op donderdag 17 oktober 2013 @ 17:03:
[...]


Maar je ziet in dit script ook nog fr-FR staan. Dit zou je dan kunnen parameteriseren om het flexibel te maken? Hiermee bedoel ik dat hij de cultureCode fr-FR automagisch aanpast naar de gewenste cultureCode.

...

Ja dit kan. Jou zou dit bv via een ActionFilter kunnen regelen, welke op de ViewBag een variabele zet welke dan wordt uitgelezen in je view.

code:

 $(document).ready(function () {
            Globalize.culture('@ViewBag.Culture');
        });

[sig69]

Grijze Vos schreef op vrijdag 18 oktober 2013 @ 08:41:
Als dat script op alle pagina's nodig is, zet hem dan in een losse js file en maak hem onderdeel van je bundle. Sowieso zou je geen javascript in je views moeten willen hebben.

Als ik een klein stukje js nodig heb in een bepaalde view, dat verder nergens anders nodig is, dan zet ik dat gewoon in de view hoor. Als het wat groter wordt of herbruikbaar is stop ik het wel in een aparte js file.

[Megamind]

Grijze Vos schreef op vrijdag 18 oktober 2013 @ 08:41:
Als dat script op alle pagina's nodig is, zet hem dan in een losse js file en maak hem onderdeel van je bundle. Sowieso zou je geen javascript in je views moeten willen hebben.

En als je dynamische parameters in je JS wilt hebben?

[Grijze Vos]

Megamind schreef op vrijdag 18 oktober 2013 @ 18:45:
[...]

En als je dynamische parameters in je JS wilt hebben?

then you're doing it wrong™


Ok, wat meer info dan. Je hebt een aantal manieren om je JS te parametriseren. Een daarvan is data attributen op je html nodes die je aan het bewerken bent. Een andere optie is script islands die je uitleest. De derde optie is iets als requirejs' module config gebruiken.

Die eerste is vaak het makkelijkst, die andere twee gebruik je eerder voor globale config dingetjes die je wilt injecteren.

[ Voor 48% gewijzigd door Grijze Vos op 19-10-2013 00:01 ]

[Megamind]

Grijze Vos schreef op vrijdag 18 oktober 2013 @ 23:59:
[...]

then you're doing it wrong™


Ok, wat meer info dan. Je hebt een aantal manieren om je JS te parametriseren. Een daarvan is data attributen op je html nodes die je aan het bewerken bent. Een andere optie is script islands die je uitleest. De derde optie is iets als requirejs' module config gebruiken.

Die eerste is vaak het makkelijkst, die andere twee gebruik je eerder voor globale config dingetjes die je wilt injecteren.

Ik heb bv wat settings in mijn database staan, oa de culture en bv een facebook app id.

Ik zet dit zo in mijn _Layout.cshtml:

code:

<script>
  var culture = "nl-NL";
  var fbId = 123123123;
</script>

De scripts de geïnclude worden kunnen dan prima deze variabele gebruiken. Waarom zou je moeilijk doen en ze in tags gaan verbergen?

[R4gnax]

Megamind schreef op zaterdag 19 oktober 2013 @ 02:22:
Ik heb bv wat settings in mijn database staan, oa de culture en bv een facebook app id.

Ik zet dit zo in mijn _Layout.cshtml:

code:

<script>
  var culture = "nl-NL";
  var fbId = 123123123;
</script>

De scripts de geïnclude worden kunnen dan prima deze variabele gebruiken. Waarom zou je moeilijk doen en ze in tags gaan verbergen?

Omdat je nu een blok javascript hebt waar de HTML parser op blokkeert totdat de JavaScript parser en JavaScript runtime synchronous hun werk gedaan hebben en de HTML parser weer door mag. Als je voldoende van dat soort blokjes door je hele pagina heen hebt staat wordt je initiële pagina opbouw daar lekker traag van.

Daarnaast vervuil je de global scope en dankzij de nogal arbitraire namen loop je een verhoogd risico op een collisie met andere stukken script die dezelfde malpractice aanhangen. Overigens heb je die culture variabele ook helemaal niet nodig. Je kunt ook gewoon <html lang="nl-NL"> in je markup gebruiken en daarna waar je het nodig hebt document.documentElement.lang uitlezen...


Zet daar bijv. eens RequireJs tegenover. Daarmee maak je maar één keer een blok configuratie boven in je <head> element, en laad je één script synchroon in (wat RequireJs zelf bevat). Alle rest laad je out-of-band of on-demand in via RequireJs. Alle configuratie staat overzichtelijk bij elkaar en de time-to-first-paint voor je pagina is stukken lager.


Als je anno 2013 je JavaScript nog steeds als half-verstoten onderdeel van je server-side applicatie beschouwt i.p.v. als een applicatie an sich (die toevallig door de server applicatie afgeleverd wordt en/of er mee kan communiceren), dan doe je het gewoon fout.
(Of je bent enkel blootgesteld aan triviale stukjes script.)

[ Voor 9% gewijzigd door R4gnax op 19-10-2013 12:28 ]

[PdeBie]

R4gnax schreef op zaterdag 19 oktober 2013 @ 12:26:
[...]

Je kunt ook gewoon <html lang="nl-NL"> in je markup gebruiken en daarna waar je het nodig hebt document.documentElement.lang uitlezen...

Je zou de HTML tag runat=server kunnen maken en dan het lang attribuut server-side kunnen bepalen. Maar is dit wel gewenst?

[R4gnax]

pdebie schreef op maandag 21 oktober 2013 @ 08:59:
[...]


Je zou de HTML tag runat=server kunnen maken en dan het lang attribuut server-side kunnen bepalen. Maar is dit wel gewenst?

In een MVC applicatie met Razor views is runat=server sowieso niet gewenst...

[PdeBie]

ow sorry, dat is de webforms developer nog in mij