Setting display in .NET code

I have a modal popup with a formview with a default mode of Edit. The controls inside the form are bound to data. I have JavaScript that shows a textbox and a label only if a certain value is selected from a dropdownlist. I want to do this on load also.

<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)开发者_如何学JAVA
{
    var treditpropdamage = document.getElementById('treditpropdamage');
    if (num == '12')
    {
        if (value == '4')
        {
            treditpropdamage.style.display = '';
        }
        else
        {
            treditpropdamage.style.display = 'none';
        }
    }
}

How can I set the tr tag to visible if 4 is the value of the bound value for the Dropdownlist in C#? Adding Runat="server" is not an option because I want to access the controls in JavaScript via document.getelementbyid

A few choices:

• Add the style (display:none) on the server side (this means you have duplicate logic in the C# and Javascript)
• Check the value of your dropdown when the form loads (putting something like: showifother('12',document.getElementById('ddl5').value in your javascript might help)

I'd really recommend you download and learn to use a framework, like jQuery, dojo or Prototype .js - they'll speed up your development and provide you with lots of tools to make your life easier.

If you're using a MasterPage I think this would do:

1) set the body tag of your Master Page or Page to runat="server" and give it an id: id="MainBody"

2) Reference the javascript file like you would normally do: <-script src="yourJavascriptFile.js" type="text/javascript">

3) Now, in code-behind you can attach the onload attribute to the body tag:

protected void Page_Load(object sender, EventArgs e)
{

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

}

Keep in mind that I have not tested the above example :)

You can set the TR's display style using a quick script block and a ternary operator

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

Also as an FYI you can still access runat="server" elements in javascript, you just need to provide javascript with the elements clientID. You can do that by injecting the id into the javascript like so:

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

Use jQuery! Download the .js from http://jquery.com/ or link the jQuery lib from Google's CDN http://code.google.com/apis/libraries/devguide.html#jquery

Here is my sample code:

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

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

With Asp.Net 4 you can use clientidmode otherwise use:

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