Question

我已经探索了多个不同的指南，以便在使用JQuery客户端单击按钮时隐藏asp文本框。

然而，我仍然无法让它工作，我已经测试了它，而更简单的代码版本仅使用html，所以我不确定asp的哪个部分不允许这样做。

提前致谢。

下面是jQuery和ASP

    <script type="text/javascript">
    $(document).ready(function () {
        $("#TxtBx").hide();
        $('#btn2').click(function () {
            $('#TxtBx').toggle();
            return false;
        });
    });
</script>

<asp:Panel runat="server" ID="panel1">
    <br /><br />
    <table>
    <tr>
        <td>
            <asp:Button ID="btn2" Text="Hide/Show" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
            <asp:TextBox ID="TxtBx" runat="server" Width="100%" TextMode="MultiLine" Rows="20" Text="Something will go here"></asp:TextBox>
        </td>
    </tr>

Answer 1

使用Asp.Net，您可能会发现在呈现HTML时您的ID正在被更改。查看页面的来源以查看是否为真。此外，您还需要停止将Button发布回服务器的默认行为。通过在函数中传递对象e并添加e.preventDefault();

来完成此操作

在这种情况下，您有几个选择。

一。更改jQuery代码以从呈现的元素中获取正确的ID。您可以使用代码执行此操作;

$(document).ready(function () {
    $("#<%=(TxtBx.ClientID)%>").hide();
    $('#<%=(btn2.ClientID)%>').click(function (e) {
        e.preventDefault(); // prevent the button from posting back the page.
        $('#<%=(TxtBx.ClientID)%>').toggle();
        return false;
    });
});

两个。您可以更改Asp.Net控件以使用Static <tr> <td> <asp:Button ID="btn2" Text="Hide/Show" runat="server" ClientIdMode="Static" /> </td> </tr> <tr> <td> <asp:TextBox ID="TxtBx" runat="server" Width="100%" TextMode="MultiLine" Rows="20" Text="Something will go here" ClientIdMode="Static"></asp:TextBox> </td> </tr>。这将呈现HTML元素与您在控件中使用的相同ID;

<tr>
    <td>
        <asp:Button ID="btn2" Text="Hide/Show" runat="server" CssClass="btn2" />
    </td>
</tr>
<tr>
    <td>
        <asp:TextBox ID="TxtBx" runat="server" Width="100%" TextMode="MultiLine" Rows="20" Text="Something will go here" CssClass="TxtBx"></asp:TextBox>
    </td>
</tr>

$(document).ready(function (e) {
    e.preventDefault(); // prevent the button from posting back the page.
    $(".TxtBx").hide();
    $('.btn2').click(function () {
        $('.TxtBx').toggle();
        return false;
    });
});

三。您可以使用类名而不是ID。这样Asp.Net就不会改变任何东西。 e.g。

{{1}}

Answer 2

除非您向控件添加ClientIDMode="Static"，否则无法通过控件的ID访问asp.net控件。

<asp:TextBox ID="TxtBx" runat="server" Width="100%" TextMode="MultiLine" Rows="20" Text="Something will go here" ClientIDMode="Static"></asp:TextBox>

现在你可以这样做：

$("#TxtBx").hide();

如果您不使用ClientIDMode，则可以使用ClientID属性在jQuery中访问它。

$('#<%= TxtBx.ClientID %>').hide();

jQuery隐藏ASP元素

2 个答案: