jQuery的隐藏ASP元 [英] jQuery Hide ASP element

问题描述

我已经探索多种不同的导游来获得一个asp文本框使用JQuery客户端中单击按钮时隐藏。

不过，我仍然不能得到它的工作，我已经测试它，一个简单的code版本只有HTML的工作，所以我不知道什么是ASP的一部分，是不是不允许这样做。

先谢谢了。

下面是jQuery和ASP

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（＃TxtBx），隐藏（）。
        $（'＃BTN2'）。点击（函数（）{
            $（'＃TxtBx'）切换（）。
            返回false;
        }）;
    }）;
＆LT; / SCRIPT＆GT;＆LT; ASP：面板=服务器ID =PANEL1＆GT;
    ＆LT; BR /＆GT;＆LT; BR /＆GT;
    ＆LT;表＆gt;
    ＆所述; TR＆GT;
        ＆所述; TD＆GT;
            ＆LT; ASP：按钮的ID =BTN2文本=隐藏/显示=服务器/＆GT;
        ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
        ＆所述; TD＆GT;
            ＆LT; ASP：文本框ID =TxtBx=服务器WIDTH =100％的TextMode =多行行=20文本=有些事情会在这里＆GT;＆LT; / ASP：文本框＆GT;
        ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
 

解决方案

通过Asp.Net，你可能会发现，当HTML渲染正在改变你的ID。查看页面的源代码，看看是否是真的。此外，您将要停止按钮发布的默认行为回服务器。 电子在函数中，加入电子preventDefault（）做到这一点>

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

一。改变你的jQuery code从中渲染元素得到正确的ID。您与code做到这一点;

  $（文件）。就绪（函数（）{
    $（＃＆LT;％=（TxtBx.ClientID）％GT;）。隐藏（）;
    $（'＃＆LT;％=（btn2.ClientID）％GT;'）。点击（函数（五）{
        亦即preventDefault（）; // prevent从回发的页面的按钮。
        $（'＃＆LT;％=（TxtBx.ClientID）％GT;'）。切换（）;
        返回false;
    }）;
}）;
 

二。你可以改变你的Asp.Net控制使用的 静态中的ClientIDMode 。这将渲染你已经在控制范围内使用的相同ID的HTML元素;

 ＆LT; TR＆GT;
    ＆所述; TD＆GT;
        ＆LT; ASP：按钮的ID =BTN2文本=隐藏/显示=服务器的ClientIDMode =静态/＆GT;
    ＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
    ＆所述; TD＆GT;
        ＆LT; ASP：文本框ID =TxtBx=服务器WIDTH =100％的TextMode =多行行=20文本=有些事情会在这里的ClientIDMode =静态＆GT;＆LT; / ASP ：文本框＆GT;
    ＆LT; / TD＆GT;
＆LT; / TR＆GT;
 

三。您可以使用类名称，而不是标识的。这Asp.Net方式不会改变任何东西。例如。

 ＆LT; TR＆GT;
    ＆所述; TD＆GT;
        ＆LT; ASP：按钮的ID =BTN2文本=隐藏/显示=服务器的CssClass =BTN2/＆GT;
    ＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
    ＆所述; TD＆GT;
        ＆LT; ASP：文本框ID =TxtBx=服务器WIDTH =100％的TextMode =多行行=20文本=有些事情会在这里的CssClass =TxtBx＆GT;＆LT; / ASP ：文本框＆GT;
    ＆LT; / TD＆GT;
＆LT; / TR＆GT;$（文件）。就绪（函数（五）{
    亦即preventDefault（）; // prevent从回发的页面的按钮。
    $（TxtBx）隐藏（）。
    $（'。BTN2'）。点击（函数（）{
        $（'TxtBx。'）切换（）。
        返回false;
    }）;
}）;
 

I've explored multiple different guides to get an asp text box to hide when a button is clicked using JQuery client side.

However I still can't get it to work, I have tested it and a simpler code version worked with just html so I'm not sure what part of the asp isn't allowing this.

Thanks in advance.

Below is the jQuery and 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>

解决方案

With Asp.Net, you might find that your IDs are being changed when the HTML is rendered. View the source of the page to see if this is true. Also, you will want to stop the default behaviour of the Button posting back to the server. Do this by passing the object e within your function and adding e.preventDefault();

In this case, you have a few options.

One. Change your jQuery code to get the correct ID from the element which is rendered. You do this with the code;

$(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;
    });
});

Two. You can change your Asp.Net controls to use a ClientIdMode of Static. This will render the HTML elements with the same ID that you have used within the control;

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

Three. You can use Class names instead of Id's. This way Asp.Net will not change anything. e.g.

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

这篇关于jQuery的隐藏ASP元的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！