使用jquery隐藏asp.net formview中的按钮
[英]Hide button in asp.net formview using jquery
问题描述
I want to hide a button control inside a FormView trough JQuery . 
我想在FormView槽JQuery隐藏一个按钮控件。 The form section is defined in this way: 表单部分以这种方式定义：
<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');" />
I use this code: 我用这个代码：
$(function () {
var _btnOk = $("#_btnOk");
_btnOk.hide();
});
but it's not working. 但它不起作用。 If I debug this script I found the hidden property of the _btnOk object to remain false even after the .hide() call. 如果我调试这个脚本，我发现_btnOk对象的hidden属性即使在_btnOk .hide()调用之后也保持为false。
BTW I cannot hide the button using the class reference since it will hide _btnCancel also and I need this to remain visibile. 顺便说一下，我无法使用类引用隐藏按钮，因为它也会隐藏_btnCancel ，我需要这个才能保持可见性。
8 个解决方案
解决方案1
4 2016-04-06 19:04:10
Your problem is that asp:FormView create an iframe . 你的问题是asp：FormView创建一个iframe 。
So jquery can't find your button, because it's not in main frame. 所以jquery找不到你的按钮，因为它不在主框架中。
As said in this tutorial, to access element in an iframe with jquery you have to do something like this: 如本教程所述，要使用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
Your JQuery code is fine. 你的JQuery代码很好。 Its probably a problem with the following: 它可能是以下问题：
Begin Edit 开始编辑
Are you sure that the id is resolving to the correct html tag? 你确定id正在解析为正确的html标签吗？ You should use the debug tools in the browser to navigate to the button and check the id. 您应该使用浏览器中的调试工具导航到该按钮并检查ID。 It might be that you are resolving to a different element on the form with the same name which is why you are not seeing the change. 可能是您正在解析表单上具有相同名称的不同元素，这就是您没有看到更改的原因。 See Select an element in Chrome ( ctrl+shift+C ). 请参阅在Chrome中Select an element （ ctrl+shift+C ）。
Also as I mentioned and everyone else did too using <%= _btnOk.ClientID %> is the best way to select the element id of an ASP.NET control. 另外正如我所提到的，其他人也使用<%= _btnOk.ClientID %>是选择ASP.NET控件的元素id的最佳方法。 However, this will only resolve on the .ascx or .aspx form. 但是，这只会在.ascx或.aspx表单上解析。 This means that it will fail if you are using a javascript file like MyExternalScript.js which you reference in the page/control. 这意味着如果您使用的是像在页面/控件中引用的MyExternalScript.js这样的javascript文件，它将会失败。 This is because when the control/page is renederd by the ASP.NET engine it will replace the <%= _btnOk.ClientID %> string with the correct generated client id. 这是因为当ASP.NET引擎重新执行控件/页面时，它将使用正确生成的客户端ID替换<%= _btnOk.ClientID %>字符串。 It will not do this for external files like javascript files which means that <%= _btnOk.ClientID %> will stay as is in that file and JavaScript will correctly throw an exception as it has no idea what to do with that string. 它不会对javascript文件之类的外部文件执行此操作，这意味着<%= _btnOk.ClientID %>将保留在该文件中，并且JavaScript将正确抛出异常，因为它不知道如何处理该字符串。
Ways around this: 方法围绕这个：
- Resolve the Id you want on the page itself in a
<script>element and assign it to a global variable.在<script>元素中解析页面本身所需的ID，并将其分配给全局变量。 Then load your custom javascript file right after which can reference the now resolved client id.然后加载您的自定义javascript文件，之后可以引用现在已解析的客户端ID。 - Use a css class as a pointer to the control. 使用css类作为控件的指针。 There does not have to be any actual css markup for that class, just add it to the control and reference it from the javascript (jquery). 该类不必具有任何实际的css标记，只需将其添加到控件并从javascript（jquery）引用它。
- If using AJAX then use a pure HTML button control and also omit the
runat="server"tag, this will ensure that ASP.NET will render the control as is without changing the client id.如果使用AJAX然后使用纯HTML按钮控件并省略runat="server"标记，这将确保ASP.NET将按原样呈现控件而不更改客户端ID。
End Edit 结束编辑
- You are setting the button to hidden correctly but this is part of a form post operation back to the server. 您正在将按钮设置为正确隐藏，但这是返回服务器的表单发布操作的一部分。 ASP.NET server side code does not keep track of the button state with a form post so when the form is reloaded from the server the state is actually reset including the state of the button. ASP.NET服务器端代码不会使用表单发布跟踪按钮状态，因此当从服务器重新加载表单时，实际上会重置状态，包括按钮的状态。 This makes it appear as if the JQuery action had no effect on the button. 这使得看起来好像JQuery操作对按钮没有影响。
- There is more than one script that executes OR your script is executed 2 times. 执行的脚本不止一个，或者您的脚本执行了两次。 This could happen if you have multiple events setup to fire. 如果您要触发多个事件设置，则可能会发生这种情况。
- You are not loading JQuery before you try to hide the button. 在尝试隐藏按钮之前，您没有加载JQuery。 Make sure that you have a script reference to JQuery and that it is being loaded before your script, this is as simple as making sure the order on the page is correct, JQuery should be at the top and then scripts that rely on it. 确保你有一个脚本引用JQuery并且它在脚本之前被加载，这就像确保页面上的顺序是正确的一样简单，JQuery应该在顶部，然后是依赖它的脚本。
- Make sure that the JQuery selector actually resolves. 确保JQuery选择器实际解析。 I provided 2 ways to resolve your JQuery selector in the sample below. 我在下面的示例中提供了两种方法来解析您的JQuery选择器。
- Make sure your script is actually running by debugging it in your browser. 通过在浏览器中调试脚本，确保您的脚本实际运行。 With Chrome you use F12 to open the development console, find you script and place a break point. 使用Chrome，您可以使用F12打开开发控制台，找到脚本并设置断点。 Alternatively you can also add
debugger;或者你也可以添加debugger;on a new line to your script which will stop processing at that point in your script if you have the development console open and you can step through starting at that point.在脚本的新行上，如果您打开了开发控制台，那么将在脚本中的该点停止处理，并且您可以逐步完成此操作。 - Last possibilities is that you are trying to run your script when your page is loaded but the script is at the top of your page without a wrapper around document ready. 最后的可能性是，您正在尝试在加载页面时运行脚本，但脚本位于页面顶部而没有文档准备好的包装器。 This means you try to resolve a button that has not yet been loaded in your html. 这意味着您尝试解析尚未在html中加载的按钮。 To fix this wrap your script with
$(document).ready(function(){/*your code*/});要解决此问题，请使用$(document).ready(function(){/*your code*/});包装脚本$(document).ready(function(){/*your code*/});which makes sure your script waits for the page to finish loading before executing.这确保您的脚本在执行之前等待页面完成加载。 - JQuery version - make sure you are using the latest, I think this functionality was added in version 1.4. JQuery版本 - 确保您使用的是最新版本，我认为1.4版本中添加了此功能。
- Alternate to show/hide - you can also use
_btnOk.toggle(false);替代显示/隐藏 - 您也可以使用_btnOk.toggle(false);and_btnOk.toggle(true);和_btnOk.toggle(true);to hide and show the button respectively.分别隐藏和显示按钮。 Or just btnOk.toggle();或者只是btnOk.toggle();to switch the button to hidden or visible depending on the current state.根据当前状态将按钮切换为隐藏或可见。
Here is a self contained working example to show that the JQuery call itself is correct. 这是一个自包含的工作示例，以显示JQuery调用本身是正确的。 The 2nd button hides or shows the first depending on the first buttons state. 第二个按钮根据第一个按钮状态隐藏或显示第一个按钮。
<%@ 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
In the Asp.net you need to call the buttons using the following way 在Asp.net中，您需要使用以下方式调用按钮
$("#<%= _btnOk.ClientID %>");
You can use by CSS class also. 您也可以使用CSS类。
Create a Dummy CSS class 创建一个虚拟CSS类
<style>
.test{
}
</style>
Assign this .test class to the _btnOk so you can hide only that button not the _btnCancel 将此.test类分配给_btnOk这样您就可以只隐藏那个按钮而不是_btnCancel
$(".test").hide();
解决方案6
1 2016-04-01 09:22:43
I see two conditions that would cause the hide function to fail: 我看到两个会导致hide功能失败的情况：
A parent of the button is already hidden when your function is called ( Why doesn't jQuery UI hide element with hidden parent? )
调用函数时，按钮的父级已经隐藏（ 为什么jQuery UI不隐藏隐藏父级的元素？ ） Your
butt_orange_smallclass style has adisplayproperty with the!importantflag.您的butt_orange_small类样式具有带有!important标志的display属性。 One solution would be to remove the!importantflag.一种解决方案是删除!important标志。 If, for any reason, you must keep it in the class style, you can do this to hide the button:如果出于任何原因，您必须将其保留在类样式中，则可以执行此操作以隐藏按钮： $("#_btnOk").attr('style','display:none !important');
解决方案7
1 2016-04-05 17:07:54
You have to call your function after jquery loads. 你必须在jquery加载后调用你的函数。 You can do that putting "()" after your function. 你可以在你的功能之后加上“（）” 。
This is an example: 这是一个例子：
$(function () {
var _btnOk = $("#_btnOk");
_btnOk.hide();
})();
解决方案8
1 2016-04-06 00:22:37
I believe this approach will be efficient: 我相信这种方法会很有效：
$(document).ready(function(){
$("button[id*='_btnOk']").hide();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.