堆栈内存溢出
  繁体   English   中英

使用jquery隐藏asp.net formview中的按钮

[英]Hide button in asp.net formview using jquery

 原文  2016-03-28 18:53:50  2   8    javascript/ jquery/ asp.net

问题描述

我想在FormView槽JQuery隐藏一个按钮控件。 表单部分以这种方式定义： 

<body>
<div id="main">
    <form id="_frmMain" runat="server">
        <div id="contenitore">
            <asp:FormView
                ID="_fvMain"
                runat="server"
                DefaultMode="Edit"
                Width="100%">
                <EditItemTemplate>
                    <asp:Table CssClass="sub" runat="server">
                        <asp:TableRow CssClass="tr_button_list">
                            <asp:TableCell ColumnSpan="3">
                                <asp:Button
                                    ID="_btnOk"
                                    ClientIDMode="Static"
                                    Text="Ok"
                                    runat="server"
                                    CssClass="butt_orange_small" 
                                    OnClientClick="javascript: return ShowSection('section1');" />
                            <asp:Button
                                    ID="_btnCancel"
                                    ClientIDMode="Static"
                                    Text="Cancel"
                                    runat="server"
                                    CssClass="butt_orange_small" 
                                    OnClientClick="javascript: return ShowSection('section2');" />

我用这个代码： 

$(function () {
    var _btnOk = $("#_btnOk");

     _btnOk.hide();
});

但它不起作用。 如果我调试这个脚本，我发现_btnOk对象的hidden属性即使在_btnOk .hide()调用之后也保持为false。

顺便说一下，我无法使用类引用隐藏按钮，因为它也会隐藏_btnCancel ，我需要这个才能保持可见性。

8 个解决方案

解决方案1
 4  2016-04-06 19:04:10

你的问题是asp：FormView创建一个iframe 。

所以jquery找不到你的按钮，因为它不在主框架中。

如本教程所述，要使用jquery访问iframe中的元素，您必须执行以下操作： 

$("#_fvMain").contents().find("#_btnOk").hide();

参考： 这个答案。

解决方案2
 1  2016-03-28 20:31:20

尝试按下这样的按钮： 

var _btnOk = $("#<%= _btnOk.ClientID %>");

解决方案3
 1  2016-03-31 08:56:07

$(function () {
      $('#contenitore input[type="button"][value="Ok"]').hide();
});

解决方案4
 1 已采纳  2016-03-31 11:59:45

你的JQuery代码很好。 它可能是以下问题：

开始编辑

你确定id正在解析为正确的html标签吗？ 您应该使用浏览器中的调试工具导航到该按钮并检查ID。 可能是您正在解析表单上具有相同名称的不同元素，这就是您没有看到更改的原因。 请参阅在Chrome中Select an element （ ctrl+shift+C ）。

另外正如我所提到的，其他人也使用<%= _btnOk.ClientID %>是选择ASP.NET控件的元素id的最佳方法。 但是，这只会在.ascx或.aspx表单上解析。 这意味着如果您使用的是像在页面/控件中引用的MyExternalScript.js这样的javascript文件，它将会失败。 这是因为当ASP.NET引擎重新执行控件/页面时，它将使用正确生成的客户端ID替换<%= _btnOk.ClientID %>字符串。 它不会对javascript文件之类的外部文件执行此操作，这意味着<%= _btnOk.ClientID %>将保留在该文件中，并且JavaScript将正确抛出异常，因为它不知道如何处理该字符串。

方法围绕这个：

  1. 在<script>元素中解析页面本身所需的ID，并将其分配给全局变量。 然后加载您的自定义javascript文件，之后可以引用现在已解析的客户端ID。
  2. 使用css类作为控件的指针。 该类不必具有任何实际的css标记，只需将其添加到控件并从javascript（jquery）引用它。
  3. 如果使用AJAX然后使用纯HTML按钮控件并省略runat="server"标记，这将确保ASP.NET将按原样呈现控件而不更改客户端ID。

结束编辑

  • 您正在将按钮设置为正确隐藏，但这是返回服务器的表单发布操作的一部分。 ASP.NET服务器端代码不会使用表单发布跟踪按钮状态，因此当从服务器重新加载表单时，实际上会重置状态，包括按钮的状态。 这使得看起来好像JQuery操作对按钮没有影响。
  • 执行的脚本不止一个，或者您的脚本执行了两次。 如果您要触发多个事件设置，则可能会发生这种情况。
  • 在尝试隐藏按钮之前，您没有加载JQuery。 确保你有一个脚本引用JQuery并且它在脚本之前被加载，这就像确保页面上的顺序是正确的一样简单，JQuery应该在顶部，然后是依赖它的脚本。
  • 确保JQuery选择器实际解析。 我在下面的示例中提供了两种方法来解析您的JQuery选择器。
  • 通过在浏览器中调试脚本，确保您的脚本实际运行。 使用Chrome，您可以使用F12打开开发控制台，找到脚本并设置断点。 或者你也可以添加debugger; 在脚本的新行上，如果您打开了开发控制台，那么将在脚本中的该点停止处理，并且您可以逐步完成此操作。
  • 最后的可能性是，您正在尝试在加载页面时运行脚本，但脚本位于页面顶部而没有文档准备好的包装器。 这意味着您尝试解析尚未在html中加载的按钮。 要解决此问题，请使用$(document).ready(function(){/*your code*/});包装脚本$(document).ready(function(){/*your code*/}); 这确保您的脚本在执行之前等待页面完成加载。
  • JQuery版本 - 确保您使用的是最新版本，我认为1.4版本中添加了此功能。
  • 替代显示/隐藏 - 您也可以使用_btnOk.toggle(false); 和_btnOk.toggle(true); 分别隐藏和显示按钮。 或者只是btnOk.toggle(); 根据当前状态将按钮切换为隐藏或可见。

这是一个自包含的工作示例，以显示JQuery调用本身是正确的。 第二个按钮根据第一个按钮状态隐藏或显示第一个按钮。 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AspFormTest.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:Button
        ID="_btnOk"
        ClientIDMode="Static"
        Text="Ok"
        runat="server"/>
    </div>
        <button type="button" onclick="hideShowButton();">Hide or Show ok button</button>
        <button type="button" onclick="hideShowButtonToggle();">Toggle button</button>
    </form>
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script type="text/javascript" language="javascript">
        function hideShowButton() {
            var aspNetWayOfResolvingId = $("#<%= _btnOk.ClientID %>"); // use this if clientidmode is not static
            var _btnOk = $("#_btnOk");
            if(_btnOk.is(":visible"))
                _btnOk.hide();
            else
                _btnOk.show();
        }
        function hideShowButtonToggle() {
            var aspNetWayOfResolvingId = $("#<%= _btnOk.ClientID %>"); // use this if clientidmode is not static
            var _btnOk = $("#_btnOk");
            _btnOk.toggle();
        }
    </script> 
</body>
</html>

解决方案5
 1  2016-04-01 08:10:25

在Asp.net中，您需要使用以下方式调用按钮 

$("#<%= _btnOk.ClientID %>");

您也可以使用CSS类。

创建一个虚拟CSS类 

<style>
.test{
}
</style>

将此.test类分配给_btnOk这样您就可以只隐藏那个按钮而不是_btnCancel 

$(".test").hide();

解决方案6
 1  2016-04-01 09:22:43

我看到两个会导致hide功能失败的情况：

  1. 调用函数时，按钮的父级已经隐藏（ 为什么jQuery UI不隐藏隐藏父级的元素？ ）

  2. 您的butt_orange_small类样式具有带有!important标志的display属性。 一种解决方案是删除!important标志。 如果出于任何原因，您必须将其保留在类样式中，则可以执行此操作以隐藏按钮：

    $("#_btnOk").attr('style','display:none !important');

解决方案7
 1  2016-04-05 17:07:54

你必须在jquery加载后调用你的函数。 你可以在你的功能之后加上“（）” 。

这是一个例子： 

$(function () {
    var _btnOk = $("#_btnOk");

     _btnOk.hide();
})();

解决方案8
 1  2016-04-06 00:22:37

我相信这种方法会很有效： 

$(document).ready(function(){
  $("button[id*='_btnOk']").hide();
});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何隐藏 <div> 在asp.net中使用jquery标记？ 带有Asp.net按钮的jQuery jQuery隐藏与asp.net回发 radiobuttonlist中的单选按钮-取消选中不起作用-asp.net-使用jquery 使用 Jquery 进行编辑和保存的 Asp.net 相同按钮 使用Javascript或Jquery在asp.net中的按钮单击上禁用Imagebutton 使用asp.net中的jQuery更改数据列表中按钮的cssclass ASP.net按钮点击不使用Jquery模态对话框触发 在ASP.NET上使用JQUERY重定向到asp.net页面。 如何使用ASP.NET WebForms中的JavaScript从FormView中的DropDownList获取文本到TextBox中？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM