Réglage de l'affichage dans le code .NET

Question

J'ai un popup modal avec un formview avec un mode d'édition par défaut. Les contrôles à l'intérieur du formulaire sont liés à des données. J'ai JavaScript qui montre une zone de texte et une étiquette seulement si une certaine valeur est sélectionnée à partir d'une liste déroulante. Je veux faire cela en charge aussi.

<tr> 
    <td align="left"> 
     <asp:DropDownList 
      ID="ddl5" 
      AutoPostBack ="false" 
      onchange = showifother('12',this.value);" 
      SelectedValue='<%# Eval("event_type") %>' 
      runat="server" 
      DataSourceID="SqlDataSource5" 
      AppendDataBoundItems ="true" 
      DataTextField="Description" 
      DataValueField="ID"> 

      <asp:ListItem 
       Selected="True" 
       style="color:gray" 
       Value="" >Causes of Damage</asp:ListItem> 
     </asp:DropDownList> 


<tr id="treditpropdamage" style="display:none"> 
    <td align="left"> 
     <asp:TextBox 
      ID="txt2" 
      runat="server" 
      TextMode ="MultiLine" 
      ondatabinding="TextBox2_DataBinding" 
      ValidationGroup ="Editprop" 
      Text = '<%# Bind("bounddata") %>'></asp:TextBox> 
    </td> 
</tr> 

function showifother(num, value) 
{ 
    var treditpropdamage = document.getElementById('treditpropdamage'); 
    if (num == '12') 
    { 
     if (value == '4') 
     { 
      treditpropdamage.style.display = ''; 
     } 
     else 
     { 
      treditpropdamage.style.display = 'none'; 
     } 
    } 
} 

Comment puis-je régler la balise tr pour visible si 4 est la valeur de la valeur limite pour la DROPDOWNLIST en C#? Ajout Runat = "server" est pas une option parce que je veux accéder aux commandes en JavaScript via document.getElementById

Answer 1

Quelques choix:

• Ajouter le style (display: none) du côté du serveur (cela signifie que vous avez une logique double en C# et Javascript)
• Vérifiez la valeur de votre menu déroulant lorsque les charges de forme (mettre quelque chose comme: showifother('12',document.getElementById('ddl5').value in your javascript pourrait aider)

Je vous recommande vraiment de télécharger et d'apprendre utiliser un cadre travail, comme jQuery, dojo ou Prototype .js - ils accélèreront votre développement et vous fourniront de nombreux outils pour vous faciliter la vie.

Answer 2

Si vous utilisez un MasterPage Je pense que ce serait faire:

1) définir la balise body de votre page maître ou page à runat = "server" et lui donner un id: id = "mainBody"

2) Référence du fichier javascript comme vous le feriez normalement faire: < -script src = "yourJavascriptFile.js" type = "text/javascript">

3) maintenant, dans le code-behind vous pouvez joindre l'attribut onload à l'étiquette body:

protégée void Page_Load (object sender, EventArgs e)
{

MasterPageBodyTag = (HtmlGenericControl)Page.Master.FindControl("MainBody"); 
MasterPageBodyTag.Attributes.Add("Onload", "YourJSFunction()"); 

}

Gardez à l'esprit que je ne l'ai pas testé l'exemple ci-dessus :)

Answer 3

Vous pouvez régler l'affichage du TR style à l'aide d'un bloc de script rapide et un opérateur ternaire

<tr id="treditpropdamage" 
style="display:<%= ddl5.SelectedValue == "12" ? "" : "none" %>"> 

également comme FYI vous pouvez toujours ac Si vous utilisez javascript, il vous suffit de fournir javascript avec les éléments clientID. Vous pouvez le faire en injectant l'id dans le javascript comme suit:

<script> 
var element = document.getElementById(""); 
</script> 

Answer 4

Utilisez jQuery! Télécharger le .js de http://jquery.com/ ou lier le répertoire lib jQuery de CDN http://code.google.com/apis/libraries/devguide.html#jquery Google

Voici mon exemple de code:

http://jsfiddle.net/jphellemons/rPK52/

if ($("#ddl5").val() == 4) 
    $("#treditpropdamage").show(); 

Avec Asp.Net 4, vous pouvez utiliser clientidmode utiliser autrement:

if ($("#<%=ddl5.ClientId%>").val() == 4) 
    $("#treditpropdamage").show();