【问题标题】:Hide/Show table in UpdatePanel in asp.net在 asp.net 的 UpdatePanel 中隐藏/显示表
【发布时间】:2013-12-04 00:58:05
【问题描述】:

我正在开发一个基于 ASP.NET 的 Web 应用程序。

我有一个 UpdatePanel,在该 UpdatePanel 内部有一个表,在该表中我有一个 DropDownList 和一个另外的表。所以我的要求是根据 DropDownList 中的项目选择隐藏/显示表格。

假设如果我在 DropDown 中选择索引 1,我想显示表格。如果我选择索引 2,我想隐藏该表。

如果我没有使用 UpdatePanel,所需的功能在其他页面中可以正常工作,但是使用 UpdatePanel,我无法实现相同的功能,所以请帮助我。

这是我的下拉列表

<asp:TableCell>
  <asp:DropDownList Width="205px" CssClass="merchant_area_name1" ID="DropDownListConnectionType"
  runat="server" onchange="HideBlockHTTPSParameters()">
    </asp:DropDownList>
</asp:TableCell>

这是我正在使用的javascript函数

function HideBlockHTTPSParameters() {
    if (document.getElementById('ContentPlaceHolder1_DropDownListConnectionType').options[document.getElementById('ContentPlaceHolder1_DropDownListConnectionType').selectedIndex].value == "2") {
        document.getElementById('ContentPlaceHolder1_TableHTTPSDetails').style.display = "table";
    } else {
        document.getElementById('ContentPlaceHolder1_TableHTTPSDetails').style.display = "none";
    }
}

这是我想要的桌子

<asp:Table ID="TableHTTPSDetails" runat="server" Width="100%">
    <asp:TableRow>
        <asp:TableCell ColumnSpan="4" Style="font-size: 20px; text-align: center; font-weight: bold;color: #0866C6;">
            HTTPS Connection Details
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell ColumnSpan="4">
            <hr />
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell>
            <asp:Label CssClass="search_area_textfeild1" ID="LabelInitializationURLBankPanel" runat="server" Text="Initialization URL "></asp:Label>
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox Width="200px" CssClass="merchant_area_name1" ID="TextBoxInitializationURLBankPanel" runat="server" MaxLength="49"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?" ControlToValidate="TextBoxInitializationURLBankPanel" ErrorMessage="Input valid Initialization URL!"></asp:RegularExpressionValidator>
        </asp:TableCell>
        <asp:TableCell>
            <asp:Label CssClass="search_area_textfeild1" ID="LabelTransactionURLBankPanel" runat="server" Text="Transaction URL"></asp:Label>
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox Width="200px" CssClass="merchant_area_name1" ID="TextBoxTransactionURLBankPanel" runat="server" MaxLength="49"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?" ControlToValidate="TextBoxTransactionURLBankPanel" ErrorMessage="Input valid Transaction URL!"></asp:RegularExpressionValidator>
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell>
            <asp:Label CssClass="search_area_textfeild1" ID="LabelRouteIndicatorBankPanel" runat="server" Text="Route Indicator"></asp:Label>
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox Width="200px" CssClass="merchant_area_name1" ID="TextBoxRouteIndicatorBankPanel" runat="server" MaxLength="9"></asp:TextBox>
        </asp:TableCell>
        <asp:TableCell>
            <asp:Label CssClass="search_area_textfeild1" ID="LabelCountryCodeBankPanel" runat="server" Text="Country Code"></asp:Label>
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox Width="200px" CssClass="merchant_area_name1" ID="TextBoxCountryCodeBankPanel" runat="server" MaxLength="9"></asp:TextBox>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

那么我可以在 UpdatePanel 中使用 javascript 吗?还是我犯了一些错误?

【问题讨论】:

  • 在浏览器中打开页面后,查看其源代码并检查您要隐藏的控件的全名。我认为你从名字中遗漏了一些东西。像 ct100_ContentPlaceHolder1_TableHTTPSDetails_DropDownListConnectionType

标签: c# javascript asp.net updatepanel


【解决方案1】:

您可以通过编程方式为服务器端控件分配事件。见HERE

yourDropDownList.Attributes["onChange"] = "someJavaScriptFunction();";

【讨论】:

  • 感谢您的回复,但它不适用于我的情况。我的 DropDownList 的 document.getelementbyid 给出了 null 值。
  • 如果您尝试在 Javascript 中引用服务器控件,则需要使用 而不是您分配给控件的 id。
猜你喜欢
  • 2018-09-12
  • 1970-01-01
  • 1970-01-01
  • 2021-12-01
  • 2017-07-16
  • 1970-01-01
  • 2014-09-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多