web-dev-qa-db-fra.com

Existe-t-il un moyen d'utiliser "<% = someObject.ClientID%>" dans un fichier javascript externe?

Existe-t-il un moyen d'utiliser "<% = someObject.ClientID%>" dans un fichier javascript externe?

Si j'utilise le code

<%= someObject.ClientID %>

dans une balise de script à l'intérieur de ma page as (c/p) x, cela fonctionne très bien. Sur la page rendue, le ClientID est résolu. Cependant, si je mets un fichier JS externe et ajoute simplement:

Ce n'est pas le cas. Existe-t-il un moyen de le faire ou suis-je obligé de laisser ce code dans le fichier as (c/p) x?

Question secondaire - quel est l'acte de faire <% = ...%> dans votre fichier de balisage appelé?

32
Matt

C'est tout à fait possible.

Dans votre couche de présentation (votre page .aspx), créez une référence de script à une page aspx qui contient votre code javascript:

<script src="../MyJavaScriptFile.js.aspx" type='text/javascript'></script>

Ensuite, dans MyJavaScriptFile.js.aspx, vous pouvez écrire ce qui suit:

<%@ Page Language="C#" AutoEventWireup="false"  ContentType="text/javascript" %>

    <% 
        CustomPersonObject cpt = new CustomPersonObject();
        cpt.firstname = "John";
        cpt.lastname  = "Smith";
    %>

// Start Javascript
var personFirstName = '<% HttpContext.Current.Response.Write(cpt.name);%>';
var personLastName = '<% HttpContext.Current.Response.Write(cpt.lastname);%>'

Une technique que j'utilise fréquemment consiste à transmettre la valeur dont j'ai besoin évaluée dans mon fichier javascript en tant que paramètre url dans la référence de script initiale:

 <script src="../MyJavaScriptFile.js.aspx?username=<% somevalue %>" 
       type='text/javascript'></script>

Ensuite, dans MyJavaScriptFile.js.aspx, je peux référencer la valeur avec

<% Request.QueryString["username"] %>

Ce n'est pas la façon de faire les "meilleures pratiques", mais cela fait le travail d'une manière que mon cerveau d'homme des cavernes peut comprendre sans avoir à recourir à des solutions de contournement sophistiquées et à du code supplémentaire.

20
Daniel Szabo

Si vous voulez vraiment le faire, vous pouvez le faire en suivant

<%@ Page ContentType="text/javascript" Language="C#" AutoEventWireup="false" %>
<%@ OutputCache Duration="86400" Location="Any" VaryByParam="None" %>

var time = "<%= DateTime.Now.ToString() %>";
alert(time);

Et puis référencez-le dans votre page

<script src="Scripts/file.aspx" type="text/javascript"></script>

Remarque Lors de l'utilisation de la méthode mentionnée, la seule façon de passer les contrôles de la page cible contrôle les identifiants client, est de stocker l'identifiant client en tant que chaîne dans une propriété publique, puis de la référencer en utilisant une nouvelle instance de cette page

Si la seule chose qui vous a poussé à le faire est l'ID client, vous pouvez utiliser la fonctionnalité ASP.NET 4 suivante

<any-tag ID="myCustomId" runat="server" ClientIDMode="Static" />

Vous pouvez également mettre tous vos identifiants clients dans la classe C #, puis les sérialiser en utilisant JSON et les rendre dans la balise de script, pourrait être un moyen intelligent pour ASP.NET avant la version 4.

Remarque en utilisant la méthode de sérialisation que vous avez possibilité de changer n'importe quel identifiant de balise sans vous soucier de l'utilisation des éléments javascript, n'oubliez pas que ce n'est même pas possible avec ASP.NET 4 ClientIDMode

Voir

Page-Code-Fichier

public partial class About : System.Web.UI.Page
{
    ...

    protected string GetTagIds()
    {
        return new JavaScriptSerializer()
                    .Serialize(new
                     {
                            myButton = Button1.ClientID,
                            myCalendar = Calendar1.ClientID
                     });
    } 

    ...
}

Page-ASPX

<script type="text/javascript">
    var IDs = <%= GetTagIds() %>;
</script>

Nulle part

<script type="text/javascript">
    IDs.myCalendar.doSomthing...
</script>

Il existe une autre option que vous pouvez passer tous les fichiers javascript au gestionnaire ASP.NET mais je ne le recommande pas, car à cause d'un seul fichier javascript vous rendez le gestionnaire asp.net occupé.

Blocs de code

<% code en ligne%>

Il s'agit d'une définition de code en ligne dans laquelle vous pouvez exécuter des codes:

<% Response.Write("Hi"); %>

<% while(i < 0) { %>
      <% 
         Response.Write(i.ToString()); 
         i++;
      %>
<%}%>

Remarque Vous devez inclure ';' à la fin de chaque instruction lors de l'utilisation de code en ligne avec le langage C #, vous pouvez changer le langage en ligne en utilisant l'attribut de langage de directive de page

<% = expression inline%>

Celui-ci équivaut à appeler Response. Écrivez-vous, voir:

<%= "Hi" %> equals to <% Response.Write("Hi"); %>

Remarque Vous ne devez pas inclure ';' lors de l'utilisation de l'expression en ligne

<%: expression en ligne encodée%>

Celui-ci équivaut à:

Response.Write(HttpUtility.HtmlEncode("<script type="text/javascript">alert('XSS');</script>"))

Et est utilisé pour des raisons de sécurité - XSS , tout code HTML d'entrée vers celui-ci génère un texte codé HTML qui est sûr d'afficher le contenu saisi par l'utilisateur dans la page.

Remarque Vous ne devez pas inclure ';' lors de l'utilisation d'une expression en ligne codée

<% $ expressionPrefix: expressionField%>

Celui-ci est une expression que vous pouvez utiliser pour lier des valeurs de ConnectionStrings, Resources et AppSettings

expressionPrefix possibilités est

  • AppSettings
  • ConnectionStrings
  • Ressources

expressionField est la propriété du expressionPrefix spécifié dont vous avez besoin, voir:

// AppSettings
<asp:Label ... Text="<%$ AppSettings: version %>" />

// ConnectionStrings
<asp:SqlDataSource ... ConnectionString="<%$ ConnectionStrings:dbConnectionString %>" />

// Resources
<asp:Label ... Text="<%$ Resources: Messages, Welcome %>" />

Remarque Vous ne devez pas inclure ';' et vous pouvez utiliser des expressions uniquement sur les attributs des contrôles ASP.Net

<% # expression de liaison de données%>

Vous pouvez l'utiliser n'importe où dans les contrôles avec prise en charge de la liaison de données, et est généralement utilisé par les méthodes Eval et Bind.

<asp:DropDownList SelectedValue='<%# Bind("CategoryID") %>' 
                  DataSourceID="CategoriesDataSource"
                  DataTextField="CategoryName"
                  DataValueField="CategoryID"
                  runat="Server" />

Lequel Eval ou Bind?

En utilisant Bind, vous avez défini une liaison bidirectionnelle sur l'attribut spécifié du contrôle ASP.NET voir la liste déroulante mentionnée, il utilise Bind cela signifie que si l'utilisateur final sélectionne une valeur puis soumet la page, la liste déroulante ne perdra pas son valeur sélectionnée.

Utilisez Eval uniquement pour afficher les données.

<asp:FormView ...>
     <ItemTemplate>
          <a href='Eval("Link")'>Eval("LinkText")</a>
     </ItemTemplate>
</asp:FormView>

<% @ directive de modèle de texte%>

<%@ Page ...%>
This one is Page Directive

<%@ OutputCache...%>
This one is OutputCache Directive and so on...
33
Beygi

Cela ajoute un peu plus de HTML mais cela fonctionne; envelopper chaque contrôle serveur dans une div ...

<div id="myContainer">
    <asp:HiddenField ID="hdMyControl" runat="server" /></div>

Définissez la valeur de HiddenField dans le code derrière

hdMyControl.Value = "something";

Ensuite, dans votre fichier JS externe, vous pouvez obtenir la valeur du contrôle serveur

$(document).ready(function () {
    var myValue= $('#myContainer input[type=hidden]').val();

Je ne suis pas sûr que cela importe, mais j'ajoute la référence du script à la page via le codebehind en utilisant RegisterClientScriptBlock

3
Mark B

J'aime intégrer une seule ligne de javascript sur ma page.

<script type="text/javascript">
   Application.init({variable1: "value1", variable2: "value2"...});
</script>

C'est une mauvaise pratique d'avoir une tonne de javascript affiché sur votre page, mais il est courant de devoir transmettre des valeurs d'initialisation à votre javascript depuis le serveur. Cela vous permet de le faire sans tout un tas de code inutile et sans polluer l'espace de noms global avec des fonctions de rappel. Je remplace généralement Application par un wrapper global spécifique au projet.

3
jesse reiss

Vous pouvez créer une fonction de rappel vide dans le fichier externe:

var MyCallback = function () { };

Et puis dans l'asp/cx faire quelque chose comme:

MyCallback = function () {return "<%= someObject.ClientID %>";}

Et puis, de retour dans votre fichier externe:

var myClientID = MyCallback();
1
Michael

Non, cela ne fonctionnera pas comme ça car le fichier javascript est transmis indépendamment en tant que fichier séparé et il n'est pas analysé par ASP.NET à la sortie, tandis que votre fichier aspx IS en cours d'analyse et le moteur .NET remplace la balise w/la valeur réelle.

Maintenant, lorsque vos objets appellent ces fonctions JS, ce qu'ils pourraient faire, c'est se passer des références à eux-mêmes dans la fonction, ou même passer dans une liste de dictionnaires avec votre propre clé pour ce qu'est le contrôle et le nom attribué.

Une chose à laquelle penser également - SI vous allez créer un fichier JS indépendant d'une page ASPX, alors ce fichier JS absolument ne devrait pas présumer de rien savoir sur les contrôles spécifiques du fichier aspx qui l'appelle - parce que plus tard, quelqu'un d'autre pourrait décider, "Oh, c'est un bon fichier JS, je vais l'incorporer aussi" et cela ne fonctionnera pas pour eux car leurs objets ne correspondront pas aux vôtres. Ainsi, le modèle que vous devriez suivre devrait être plus générique - c'est pourquoi vous voudriez passer des références ou des listes d'identifiants.

1
The Evil Greebo

La balise serveur <%= %> est utilisé pour entrer le code qui est traité sur le serveur.

Vous ne pouvez pas utiliser <%= someObject.ClientID %> dans un fichier js externe car la balise serveur est une chose asp.net et js ne sait pas ce que c'est.

Si vous utilisez ASP.NET 4, vous pouvez définir l'ID client dans les propriétés du contrôle, ce qui le rend prévisible.

Si vous n'utilisez pas ASP.NET 4, vous pouvez placer cet identifiant client dans un champ masqué ou une variable js en ligne.

1
dexter