Puis-je arrêter .NET de manger des Id?

Question

Je suis un Architecte de l'Information et de développeur JavaScript par le commerce de nos jours, mais récemment, j'ai été de se remettre en programmation back-end de nouveau.Et, tout en essayant d'obtenir un prototype HTML intégré et de travailler avec nos C#CMS, j'ai en venir aux mains avec nos programmeurs sur le code HTML attributs ID arbitrairement réécrit par .NET pour les éléments de formulaire.

Je peux comprendre le code-behind de raisonnement pour .NET changement de Id, mais le fait que vous ne pouvez plus utiliser les Id lorsque vous essayez d'établir par exemplejQuery enhanced interfaces est à l'origine de certaines frictions.Que puis-je faire pour contourner ce problème?

J'ai essayé d'utiliser l'attribut class à la place, mais c'est vraiment de la merde, pas ce qu'il doit et ne pas contourner le problème de l' .NET effectivement de changer le rendu de la source à la volée.Cela signifie également que CSS est moins utile et moins efficace pour créer et maintenir.

Des conseils ou des conseils grandement apprécié--n'importe quoi pour un peu moins de nuits blanches...

Answer 1

La réponse courte est non, avec les formulaires web le code peut toujours être réécrite en fonction de la nidification de l'élément.Vous pouvez obtenir l'accès à l'id de la propriété ClientID, de sorte que vous pouvez définir l'id dans une variable dans un script à la fin de la page/de contrôle puis de les mettre en jQuery.

quelque chose comme ceci:

<asp:button id="ImAButton" runat="server">Click Me</asp:button>

<script type="text/javascript">
var buttonId = "<%=ImAButton.ClientId%>";
$("#"+buttonId).bind('click', function() { alert('hi); });
</script>

C'est un hack, je sais, mais il faudra travailler.(Je note pour les non-initiés, je suis en utilisant le Prototype $ get par l'id de méthode il n')

Answer 2

Une méthode consiste à remplacer l'ID de la main:

public override string UniqueID
{
  get { return this.ID; }
}
public override string ClientID
{
  get { return this.ID; }
}

Rick Strahl a écrit un billet de blog avec plus d'information sur cette démarche.

Answer 3

Regarder ASP.Net MVC - elle traite de la sur-tuer objet hiérarchies ASP.Net génère par défaut.

Ce site est écrit en MVC (je crois) - regarder la structure.Je travaille sur un nouveau projet je pense qu'il serait premier

Si vous êtes coincé avec base ASP.Net alors soyez prudents substitution de la ClientID et id unique - il a tendance à briser de nombreux contrôles web.

Le meilleur moyen que j'ai trouvé est de passer à l'illisible ClientID pour le Javascript.

Answer 4

Vous pouvez étendre .net contrôles et les faire revenir réelle id lorsque les propriétés sont appelées.

ClientID est l'attribut id et l'id unique est le nom de l'attribut d'éléments html.Ainsi, lorsque vous créez une zone de texte comme le suivant et en l'utilisant à la place de la zone de texte dans cadre, vous assurez les attributs id et name rendu comme le même que le côté serveur, id.

public class MyTextBox : TextBox
{
    public override string ClientID { get { return ID; } }
    public override string UniqueID { get { return ID; } }
}

Pour utiliser ce nouveau contrôle utilisateur, fondamentalement vous inscrire à ce contrôle, comme vous le feriez pour une mesure de contrôle de l'utilisateur (que vous pouvez faire est dans le web.config de sorte que vous n'aurez pas à le faire dans toutes vos pages):

<%@ Register Assembly="MyLibrary" NameSpace="MyLibrary.WebControls" TagPrefix="MyPrefix" %>

Et l'utiliser comme vous le feriez utiliser une zone de texte:

<MyPrefix:MyTextBox ID="sampleTextBox" runat="server" />

Answer 5

Personnellement, j'utilise un ensemble de méthodes que j'ai développé pour combler le côté serveur ASP.NET "de la magie" (je n'ai pas encore utiliser le MS MVC choses encore) et mon code côté client en raison de la munging de l'IDs qui se passe.Ici est juste un qui peut ou peut ne pas s'avérer utiles:

public void RegisterControlClientID(Control control)
{
   string variableDeclaration = string.Format("var {0} = \"{1}\";", control.ID, control.ClientID);
   ClientScript.RegisterClientScriptBlock(GetType(), control.ID, variableDeclaration, true);
}

Donc, dans votre code côté serveur il vous suffit d'appeler cela et de passer dans l'instance de contrôle pour lequel vous souhaitez utiliser une plus convivial nom pour.En d'autres termes, au cours de moment de la conception, vous pouvez avoir une zone de texte avec l'ID de "m_SomeTextBox" et vous voulez être capable d'écrire votre code JavaScript à l'aide du même nom - il vous suffit d'appeler cette méthode dans votre code côté serveur:

RegisterControlClientID(m_SomeTextBox);

Et puis sur le client suivant est affiché:

var m_SomeTextBox = "ctl00_m_ContentPlaceHolder_m_SomeTextBox";

De cette façon, l'ensemble de votre code JavaScript peut être assez ignorant de ce qui ASP.NET décide de nommer la variable.Certes, il ya quelques mises en garde, comme lorsque vous avez plusieurs instances d'un contrôle sur une page (en raison de l'utilisation de plusieurs instances de l'utilisateur, les contrôles qui ont tous une instance de m_SomeTextBox en leur sein, par exemple), mais en général, cette méthode peut être utile pour vos besoins les plus élémentaires.

Answer 6

Ce que j'ai l'habitude de le faire est de créer une fonction générale qui reçoit le nom du champ.Il ajoute de l'habituel "asp.net" le préfixe et le renvoie l'objet.

var elemPrefix = 'ctl00-ContentPlaceHolder-'; //replace the dashes for underscores

var o = function(name)
{    
    return document.getElementById(elemPrefix + name)
}

Avec cela, vous pouvez utiliser ce type d'appels à jQuery

$(o('buttonId')).bind('click', function() { alert('hi); });

Answer 7

Vous ne voulez certainement pas à coder en dur le asp.net-ID généré dans votre CSS, car cela peut changer si vous réorganisez les choses sur votre page de manière à ce que votre arborescence de contrôle des changements.

Vous avez raison, CSS Id ont leur place, et je voudrais donc ignorer les suggestions d'utiliser les classes.

Les différents javascript hacks décrites ici sont overkill pour un petit problème.Donc, hérite d'une classe et de substitution de la propriété ID.Et ce n'est certainement pas utile de suggérer à MVC quand tout ce que vous voulez faire est de revoir certaines CSS.

Juste séparé de la vrd et de l'espérance de vous la cible avec le CSS.Ne ciblez pas la ASP.NET contrôle directement si vous souhaitez utiliser des Id.

  <div id="DataGridContainer">
     <asp:datagrid runat=server id="DataGrid" >
         ......
     <asp:datagrid>
  </div>

Answer 8

Si vous utilisez jQuery, vous avez des charges de Les sélecteurs CSS et jQuery custome sélecteurs à votre disposition pour cible des éléments sur votre page.Donc, plutôt que de chercher le bouton envoyer, c'est id, vous pourriez faire quelque chose comme:

$('fieldset > input[type="submit"]').click(function() {...});

Answer 9

Je peux voir comment l' .NET système est moins intuitive, mais lui donner une chance.Dans mon expérience, il finit réellement par la création de nettoyeur de code.Assurez-vous

<asp:button id="ImAButton" runat="server">Click Me</asp:button>

<script type="text/javascript">
var buttonId = <%=ImAButton.ClientId%>
$(buttonId).bind('click', function() { alert('hi); });
</script>

fonctionne très bien.Mais ce n'est souffre de ne pas être modulaire.Ce que vous voulez vraiment est quelque chose comme ceci:

<script type="text/javascript">
function MakeAClick(inid)
{
  $(inid).bind('click', function() { alert('hi); });
}
</script>

et puis plus tard avec votre code sur le java côté ou le C#, côté vous appelez MakeAClick.Des cours sur le C#, côté il fait plus de sens, vous venez de ClientID là.

Peut-être que ce est le vrai problème avec le code en question.

Answer 10

Une meilleure approche serait d'utiliser ClientIDMode et mis à static.Vous pouvez même le mettre sur une page spécifique ou à l'échelle mondiale dans le web.fichier de configuration.Ensuite, vous n'aurez jamais à faire face à ce problème, encore et votre JQuery est beaucoup plus propre.

Haut de la page:

<%@ Page Title="" ClientIDMode="Static" Language="C#" CodeBehind="..." Inherits="WebApplication1.WebForm2"  %>

Sur commande uniquement:

<asp:Panel runat="server"  ClientIDMode="Static"></asp:Panel>