Setting display in .NET code

Question

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)
    {
        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

Answer 1

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.

Answer 2

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 :)

Answer 3

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>