ASP.NET MVC Helper Html Extensions de Rendu et de Leur Nécessaire “inclure”s

J'ai monter un custom Html Helper extension comme suit:

public static string DatePicker(this HtmlHelper helper, string name, string value)
{
        return string.Format(@"<script type='text/javascript'>
$(document).ready(function(){{
    $('#{0}').datepicker({{ 
        changeMonth: true, 
        changeYear:true, 
        dateFormat: 'd-M-yy', 
        firstDay: 1, showButtonPanel: 
        true, 
        showWeek: true 
    }});
}});
</script>
<input type='text' name='{0}' id='{0}' value='{1}'>", name, value);
}

Le problème est que cela exige maintenant la page d'inclure les éléments suivants:

<script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.ui.datepicker.min.js" type="text/javascript"></script>

Et quelques autres articles. Les questions sont les suivantes:

  1. Est-il sérieux de traitement
    les frais généraux si j'étais à ces
    articles dans CHAQUE page (comme dans le
    Site.Master par exemple) ainsi
    en niant la nécessité de la HtmlHelper
    pour organiser la "comprend" -
    vu qu'il n'y aurait finissent par être
    environ 20 comporte, pour tous les
    les différents types de widgets jQuery UI
    utilisé sur tout le site.
  2. Si le HtmlHelper trie les
    "comprend", il va ajouter un tous les
    le temps de cette DatePicker est utilisé (souvent
    il y a deux sur une page) personne Ne
    ont une façon de déterminer si oui ou
    pas que l'utilisateur a déjà rendu
    le même type de contrôle sur le
    page, donc pas de re-y compris le même
    bibliothèques jquery lorsque plusieurs
    les instances de la DatePicker (pour
    exemple) sont-ils utilisés?
Vous pouvez également faire la même chose dans MVC 2 avec l'affichage et l'édition de modèles sans codage spécial dans votre point de vue. Découvrez ceci post pour plus de détails.

OriginalL'auteur Jimbo | 2010-05-03

  1. 3

    Peut-être quelque chose de ces morceaux de code va vous aider à obtenir une idée ou deux à ce sujet:

    private static readonly SortedList<int, string> _registeredScriptIncludes = new SortedList<int, string>();

    public static void RegisterScriptInclude(this HtmlHelper htmlhelper, string script)
    {
        if (!_registeredScriptIncludes.ContainsValue(script))
        {
            _registeredScriptIncludes.Add(_registeredScriptIncludes.Count, script);
        }
    }

    public static string RenderScript(this HtmlHelper htmlhelper, string script)
    {
        var scripts = new StringBuilder();
        scripts.AppendLine("<script src='" + script + "' type='text/javascript'></script>");
        return scripts.ToString();
    }

    public static string RenderScripts(this HtmlHelper htmlhelper)
    {
        var scripts = new StringBuilder();
        scripts.AppendLine("<!-- Rendering registered script includes -->");
        foreach (string script in _registeredScriptIncludes.Values)
        {
            scripts.AppendLine("<script src='" + script + "' type='text/javascript'></script>");
        }
        return scripts.ToString();
    }
    Quel est le point de l'utilisation de SortedList?
    Quel est le point de la StringBuilder? Chaîne de retour.Format et + script + est amusant aussi.
    Pour le trouble obsessionnel-compulsif des gens qui veulent que leurs scripts dans l'ordre alphabétique? lol

    OriginalL'auteur mare

  2. 5

    Réponse Directe

    1) Oui 20 demandes de scripts sur chaque page de réduire les performances pour les clients considérablement - voir Yahoo /Google docs sur le web, optimisation pour plus d'info

    Mise en Cache du navigateur aide, mais c'est tellement facile de faire mieux.

    2) Pourquoi rouler votre propre solution de dépendances?

    Il existe de nombreuses excellentes bibliothèques qui le font déjà très bien - avec des avantages?

    En profondeur :

    Similaire à la suggestion de @Mare , mais je pense que certains bons avantages - je voudrais vous recommandons de changer votre approche légèrement. Refactoriser !

    Envisager ces questions de base :

    1) Pourquoi écrire en HTML .fichiers cs?

    => beaucoup mieux conserver votre code HTML dans aspx /ascx (ou un autre moteur d'affichage) des fichiers
    découvrez l'éditeur et des modèles d'affichage par exemple

    Brad Wilson Intro de modèles

    c'est à dire le commentaire de @admsteck ci-dessus

    2) pourquoi écrire du code Javascript .fichiers cs?

    => beaucoup mieux pour garder votre Javascript .js fichiers

    3) notez Aussi - Pourquoi utiliser HtmlHelper les méthodes d'extension lorsque vous ne l'utilisez pas tout de l'état de l'information à partir de la classe HtmlHelper?

    => Pour une solution simple, pourquoi ne pas plutôt utiliser simplement une assistance statique de la classe (et non pas une extension de HtmlHelper) voir cette réponse ici

    Mais surtout :

    4) Si vous avez un des problèmes de performance, pourquoi ne pas rapetisser et de combiner tous vos scripts (et le CSS pendant que vous y êtes).

    =>Alors vous pouvez avoir un seul petit fichier CSS et un seul fichier JS pour l'ensemble de votre application.

    Cependant, 4) conduit alors à quelques autres questions :

    a) Comment envisagez-vous de débogage combiné + minifiés JS

    b) Comment travailler efficacement avec des combinés + "minimisé" CSS?

    c) De se concentrer sur l'original de votre demande pour une nouvelle façon de gérer les dépendances, comment vous assurez-vous de son claire de ce code dépend de ce code, et comment vous assurer que le code est demandé qu'une seule fois lorsque son besoin?

    J'ai trouvé que cette bibliothèque open source Client De Dépendance Cadre un excellent ajout à ma boîte à outils pour MVC, lorsque vous déboguez vous obtenez des fichiers individuels, lorsque vous exécutez, vous obtenez combinée des fichiers (pour des gains de performance dans la production).

    Il fournit également une excellent moyen pour vos composants de l'INTERFACE utilisateur à inscrire leurs dépendances, de sorte que son évident pour les développeurs de ce qui est requis, et donc la bonne js + css est correct vers le client (et obtient seulement demandé une fois) !

    OriginalL'auteur MemeDeveloper

  3. 1

    De réponse à la question 2, vous pourriez faire quelque chose comme ce qui suit

    <script type='text/javascript'>
    if (typeof jQuery == 'undefined') //test to see if the jQuery function is defined
        document.write("<script type='text/javascript' src='jquery.js'></script>");
</script>
    Utile de savoir que l'on peut faire 🙂 cependant, si une grille de ligne d'articles contenant de 50 éléments, il y aurait en fin de BEAUCOUP de la redondance de code jscript 🙁

    OriginalL'auteur AdmSteck

  4. 0

    Sujet:

    1: pas de traitement du tout, et pas de la taille importante des frais généraux (comme dans: les fichiers sont normalement chargés seulement une première fois par le navigateur). Normalement, je voudrais aller à cette approche.

    2: aucune idée, désolé 😉 Quelqu'un d'autre va ramasser ça, je pense.

    Hehe, j'aime #1 trop paresseux, mais simple - merci 🙂

    OriginalL'auteur TomTom