Question

我有一个带有formview的模态弹出窗口，默认模式为Edit。表单内的控件绑定到数据。我JavaScript只有在从下拉列表中选择某个值时才显示文本框和标签。我也想在加载时这样做。

<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';
        }
    }
}

如果4是C＃中Dropdownlist的绑定值的值，如何将tr标记设置为visible？添加Runat =“server”不是一个选项，因为我想通过document.getelementbyid访问JavaScript中的控件

Answer 1

一些选择：

在服务器端添加样式（display：none）（这意味着您在C＃和Javascript中有重复的逻辑）
检查表单加载时下拉列表的值（如下所示：showifother('12',document.getElementById('ddl5').value in your javascript可能有帮助）

我真的建议你下载并学习使用jQuery，dojo或Prototype .js这样的框架 - 它们会加速你的开发并为你提供许多工具，让你的生活更轻松。

Answer 2

如果您正在使用MasterPage，我认为这样做：

1）将Master Page或Page的body标签设置为runat =“server”并为其指定id：id =“MainBody”

2）像往常一样引用javascript文件：＆lt; -script src =“yourJavascriptFile.js”type =“text / javascript”＆gt;

3）现在，在代码隐藏中，您可以将onload属性附加到body标签：

protected void Page_Load（object sender，EventArgs e）
{

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

}

请记住，我没有测试过上面的例子：）

Answer 3

您可以使用快速脚本块和三元运算符

设置TR的显示样式


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

另外作为一个FYI，你仍然可以在javascript中访问runat =“server”元素，你只需要提供带有clientID元素的javascript。你可以通过将id注入javascript来实现这一点：

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

Answer 4

使用jQuery！从http://jquery.com/下载.js或从Google的CDN http://code.google.com/apis/libraries/devguide.html#jquery

链接jQuery lib

以下是我的示例代码：

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

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

使用Asp.Net 4，您可以使用clientidmode 否则使用：

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

在.NET代码中设置显示

4 个答案: