Est-il possible d'interpoler mon angle de vue, pourcentage, est la syntaxe <%= %> dans les fichiers javascript externes?

Question

Souvent lorsque vous mixez jQuery avec asp.net, j'ai besoin d'utiliser la syntaxe asp .net angle bracket pour cent, <%%>, dans un sélecteur jQuery.

Si je souhaite séparer le JavaScript du balisage en différents fichiers, y a-t-il encore un moyen d'évaluer mon fichier JavaScript afin que les pourcentages d'angle soient interpolés avant d'atteindre le navigateur client?

Answer 1

Non, vous aurez besoin de refactoriser votre JavaScript pour accepter cette information en tant que paramètres.

Ainsi, au lieu de

jQuery('#<%=MainPanel.ClientId%>').hide('slow'); 

faire quelque chose comme ceci:

function hidePanel(panelId) { 
     jQuery('#' + panelId).hide('slow'); 
} 

que vous pouvez appeler à partir de votre page avec

hidePanel('<%=MainPanel.ClientId%>'); 

Answer 2

Si vous souhaitez évaluer <% code blocks %> comme ASP Code .NET dans un fichier JavaScript, vous pouvez simplement mettre le JavaScript dans un fichier ASPX et le référencer à partir d'un SCRIP Élément T

script.js.aspx:

function hideElements() 
{ <% foreach(var elementId in Request.QueryString["hide"].Split(',') { %> 
    jQuery('#' + <%= elementId %>).hide('slow'); 
    <% } %> 
} 

page.aspx:

<script src="script.js.aspx?hide=<%= GetElementsIds() %>" 
     type='text/javascript'></script> 

page.aspx.cs:

public string GetElementIds() 
{ 
    return string.Join(",", new []{control1.ClientID, control2.ClientID}); 
} 

Answer 3

Vous pouvez également gérer les fichiers .js sous forme de fichiers .aspx; De cette façon, vous ne perdrez pas l'intellisense et le formatage de code pendant que vous les éditez. Il suffit de l'ajouter à web.config:

<system.webServer> 
    <handlers> 
     <add name="Dynamic JS" path="*.js" verb="*" type="System.Web.UI.PageHandlerFactory" resourceType="Unspecified"/> 

Answer 4

J'ai fait une tentative de séparer le javascript sur le contrôle de l'utilisateur du réseau de recherche à partir du html dans le fichier .ascx. Lors de la première itération, j'ai utilisé la fonction jQuery (document) .onReady pour attacher mon initialisation. Le problème avec ceci est que <% =%> les balises utilisées dans les sélecteurs jQuery n'ont pas été interpolées correctement et les commandes sur lesquelles le javascript a été utilisé n'ont pas été trouvées avec les sélecteurs jQuery.

Ensuite, j'ai tenté de créer un objet json dans l'initialisation de la page et de l'écrire en utilisant la méthode asp.net Page.ClientScript.RegisterClientScriptBlock. Cela a bien fonctionné, mais avec des inconvénients: le nom et les clés de l'objet json dans le fichier asp.net et le fichier javascript. Ceci est désavantageux car maintenant il existe "deux points de vérité" à maintenir et plus encore il y a un risque de collision de noms dans la page finale.

La solution la plus élégante au sein d'asp .net et l'utilisation de jQuery consiste à créer un comportement de script ajax en javascript. Ensuite, dans le code aspbebehind, inscrivez les propriétés du comportement du script dans la méthode GetScriptDescriptors() de l'interface IScriptControl, en ajoutant le ClientID du contrôle côté serveur en tant que propriété au descripteur de script.

// Ajax Javacsript Code below: 

Type.registerNamespace('SearchGrid'); 

// Define the behavior properties 
// 
ButtonBehavior = function() { 
    ButtonBehavior.initializeBase(this); 
    this._lnkSearchID = null; 
} 

// Create the prototype for the behavior 
// 
// 
SearchGrid.ButtonBehavior.prototype = { 
initialize: function() { 
    SearchGrid.ButtonBehavior.callBaseMethod(this, 'initialize'); 
    jQuery('#' + this._lnkSearchID).click(function() { alert('We clicked!'); }); 
}, 

dispose: function() { 
    SearchGrid.ButtonBehavior.callBaseMethod(this, 'dispose'); 
    jQuery('#' + this._lnkSearchID).unbind(); 
    } 
} 

// Register the class as a type that inherits from Sys.Component. 
SearchGrid.ButtonBehavior.registerClass('SearchGrid.ButtonBehavior', Sys.Component); 


if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded(); 

---

Asp Code .Net ci-dessous:

public partial class SearchGrid : System.Web.UI.UserControl, IScriptControl 
    {   
     // Initialization  
     protected override void OnPreRender(EventArgs e) 
     { 
      if (!this.DesignMode) 
      { 
       // Test for ScriptManager and register if it exists 
       ScriptManager sm = ScriptManager.GetCurrent(Page);  
       if (sm == null) 
        throw new ApplicationException("A ScriptManager control must exist on the current page.");  
       sm.RegisterScriptControl(this); 
      }  
      base.OnPreRender(e); 
     } 
     protected override void Render(HtmlTextWriter writer) 
     { 
      if (!this.DesignMode) 
       sm.RegisterScriptDescriptors(this); 

      base.Render(writer); 
     } 

     // IScriptControl Members 
     public IEnumerable<ScriptDescriptor> GetScriptDescriptors() 
     { 
      ScriptBehaviorDescriptor desc = new ScriptBehaviorDescriptor("SearchGrid.ButtonBehavior", this.ClientID);   
      desc.AddProperty("lnkSearchID", this.lnkSearch.ClientID); 
      yield return desc; 
     } 

     public IEnumerable<ScriptReference> GetScriptReferences() 
     { 
      ScriptReference reference = new ScriptReference(); 
      reference.Path = ResolveClientUrl("SearchGrid.ButtonBehavior.js"); 
      return new ScriptReference[] { reference }; 
     }  
    } 

---

L'avantage est que vous pouvez créer des contrôles réutilisables autonomes avec javascript comportement contenu dans son propre fichier séparé (ou une ressource web) tout en passant l'état et le contexte, qui pourraient sinon être interpolés avec l'angle, le pourcentage, la syntaxe égale, nécessaire pour que jQuery fasse son travail.