2010-09-14 20 views
3

La question est de savoir comment créer des contrôles/vues partielles/edittemplates (fichiers ascx) dans ASP.Net MVC2 afin qu'ils soient "self-containing". Auto-contenir signifie ici que si un code Javascript doit être appliqué sur le contrôle, ce n'est pas inclus dans la page (aspx), mais dans le contrôle lui-même. Exemple spécifique: DateTime.ascx de NerdDinner. Le fichier contient le code JS qui fait de la zone de texte un bon sélecteur DateTime.Meilleure (s) pratique (s) MVC, ascx et Javascript - comment créer des contrôles autonomes? NerdDinner se trompe

Mes problèmes: La page qui contient a jQuery.js, le timepicker.js, le css de jQueryUI et le css de la datepicker. (Dans le cas de NerdDinner, tous sont dans la page maître). Donc, chaque fois que je voudrais utiliser le fantaisie DateTimePicker pour mes types DateTime, la page contenant doit être au courant de ces dépendances et doit ajouter tous les fichiers js et css. Je pense que ce qui me manque ici est une solution qui remplace le ClientScript.RegisterClientScriptBlock.

Autre problème avec le même exemple NerdDinner: Dans le DateTime.ascx, il est indiqué $ ('# Dinner_EventDate') qui dépend à la fois du type de conteneur et du nom de la propriété. Ce n'est pas une solution générale pour un EditorTemplate partagé DateTime.

Des suggestions?

+0

Pour le deuxième problème ma solution est d'ajouter une classe à mes éléments et de me référer à cette classe dans le sélecteur. Pour moi c'est acceptable je pense. Sauf que si le même élément est plusieurs fois sur la page, le code s'exécute aussi plusieurs fois :(Le premier ensemble de problèmes est plus difficile :( – peterfoldi

+0

Voir http://stackoverflow.com/questions/1724166/mvc-registerclientscriptinclude-registerclientscriptblock pour votre premier – queen3

Répondre

0

Vous devez créer un lien vers ces fichiers depuis la page. Sinon, vous allez vous frayer un chemin contre la façon dont ces éléments sont inclus dans html et où votre contrôle est inclus dans la page.

Ce que nous faisons est joindre tous ces fichiers séparés js/css dans un seul fichier avec du code supplémentaire (fait une fois). De cette façon, vous seul lien vers le fichier unique de votre page maître. Tant que vous n'avez rien de particulièrement lourd là-dedans, c'est très raisonnable.

Pour le problème de l'ID, remplacez la requête jquery par la classe css.


réponse originale: ignorer ci-dessous, je pensais que ce n'était pas déjà dans des fichiers séparés.

Déplacez-le dans un fichier .js et remplacez l'utilisation de l'ID par une classe. Si vous voulez le garder structuré/le code .js qui est sur un fichier dédié uniquement au code de ce contrôle, vous pouvez le faire et ajouter un code supplémentaire qui joint tous les différents fichiers .js de votre site à un seul Fichier .js. Cela vous permet de le structurer comme vous le souhaitez, sans avoir besoin de requêtes supplémentaires inutiles.

+1

Ce n'est pas une solution.Je ne veux pas télécharger tout le code js pour toutes les pages (même si mis en cache), car dans 99% des visites de la page, environ 20% du code est utilisé. avec nerddinner: le sélecteur date/heure est utilisé uniquement lorsque vous ajoutez ou modifiez un nouveau dîner, mais la plupart des visites ne sont pas à ajouter/éditer, elles n'ont donc pas besoin de ce code.Sur une page plus complexe, vous pouvez avoir plusieurs composants similaires CKEditor plus de 300K, et les utilisateurs en lecture seule n'auront jamais besoin de cela. 300K est quelque chose que je ne veux pas télécharger inutilement. – peterfoldi

0

Je ne suis pas sûr si c'est une question spécifique à MVC. Si vous voulez un contrôle vraiment autonome, regardez les contrôles du serveur (comme un contrôle composite ou un contrôle de script). Ces contrôles n'utilisent pas les pages ASCX et sont indépendants d'une application Web. De cette façon, vous pouvez intégrer vos feuilles CSS et vos pages JS dans une ressource. Lorsque vous générez le projet, il compile en une seule DLL. De cette façon, vous pouvez créer votre propre bibliothèque de contrôles. L'inconvénient, cependant, est que ces contrôles sont considérablement plus difficiles. Si vous êtes intéressé, faites le moi savoir et je posterai un exemple. Jetez un oeil ici, pour un exemple: http://msdn.microsoft.com/en-us/library/aa719734%28v=vs.71%29.aspx

Mais, si vous voulez vraiment utiliser la page ASCX pour intégrer le javascript et CSS, vous pouvez le faire via le gestionnaire de scripts (enfin, j'ai au moins fait cela avec Javascript, pas CSS).Exemple:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
     dim myScript as new StringBuilder 
     myScript.Append("function helloWorld(){" & vbcrlf) 
     myScript.Append("alert('Hi')" & vbcrlf) 
     myScript.Append("}" & vbcrlf) 

     ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(),"MyScript",myScript.toString, false) 
    End Sub 

Cet exemple crée un texte de fonction javascript simple et l'enregistre dans la page. Non, si vous avez beaucoup de javascript, cela deviendra lourd. En outre, je ne suis pas sûr que cela fonctionnera avec CSS. Faites-moi savoir si cela aide.