Question

我有一个简单的问题：我有一个ASP.NET控件按钮，我想让它淡出，然后使用JQuery调用一些函数（如警报）。以下是我到目前为止的情况：

按钮的ASP代码：

<div id="begin">
        <span id="startButtonSpan">
            <asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/>
        </span>
    </div>

JavaScript的：

function startButtonClick()
{
    $("#startButtonSpan > input").fadeOut(500, callAlert());
}

function callAlert()
{
    alert("Made it here...");
}

当我点击按钮时，警报会显示，但页面似乎甚至没有尝试执行fadeOut。当我关闭警报时，按钮仍在那里，盯着我。

任何人都可以看到任何错误，或者有没有人对我如何实现淡出按钮的预期目标有任何建议？ Fadeout实际上只是我测试是否可以使用jQuery操作ASP控件的方式，所以不仅仅是简单的fadeOut，这是我试图学习如何做到这一点。

我使用下面的代码尝试了一个稍微简单的jQuery调用，但它似乎也不起作用：

ASP部分：

<div id="begin">
        <span id="startButtonSpan">
            <asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/>
        </span>
    </div>

    <div id="jQueryTest" style="display:none;">
        Block for testing jQuery.
        <h1 id="testMessage">Child element for the ASP div.</h1>
    </div>

Javascript部分：

function startButtonClick()
{
    $("#jQueryTest").css("display", "block");
    $("#jQueryTest").show();
}

对于此示例，文本会显示，但会立即消失。

对于我可能做错的任何帮助或建议将不胜感激。

Answer 1

使用该类作为选择器$('.startButton')而不是ID，因为ASP.Net控件在呈现时动态更改其ID，方法是附加其页面＆amp;控制信息。

$(".startButton").fadeOut(500, callAlert);

或者，如果您坚持使用ID，这是另一种处理选择器的方法，

$("#<%=startButton.ClientID %>")

或者，正如Jacob在his answer中建议的那样，您可以ClientIDMode="Static"，但这仅适用于您的应用程序是.Net 4.0或更高版本。

另外，请使用CssClass代替class

<asp:Button ID="startButton" Csslass="startButton" runat="server" Text="Click Me!" />

Answer 2

第一个例子有两个问题。

1。你应该写

$("#startButton").fadeOut(500, callAlert);

而不是

$("#startButton").fadeOut(500, callAlert());

2. 对于ASP.NET，您必须设置ClientIDMode =“静态”，否则asp.net将改变您的ID。

<asp:Button ID="startButton" ClientIDMode="Static" ... OnClientClick="startButtonClick()"/>

Answer 3

如果可以的话，我想为那些使用 MasterPages 的人提供另一个答案，并发现在使用内容控件时你不能总是使用$("#<%= SomeContentControl.ClientID %>")。

我所做的是在我的Init()中设置MasterPage ID，如下所示：

protected void Page_Init( object sender, EventArgs e ) 
{
    // this must be done in Page_Init or the controls 
    // will still use "ctl00_xxx", instead of "Mstr_xxx"

    this.ID = "Mstr"; 
}

然后，您可以使用jQuery执行类似的操作：

var masterId = "Mstr",
    $startButton = getContentControl("startButton"),
    $message = $("#jQueryTest");

function getContentControl( ctrlId )
{
    return $("#" + masterId + "_" + ctrlId);
}

function hideStartButton()
{
    $startButton
        .stop(true, true)
        .fadeOut("slow", showMessage);
}

function showMessage()
{
    $message
        .stop(true, true)
        .fadeIn("slow");
}

$startButton.on("click",  hideStartButton);

这是jsFiddle，其中已插入Mstr_前缀，就像ASP.NET呈现它一样。

Answer 4

你的代码很好的事实怎么样（虽然这里应该考虑其他答案）但是你的按钮正在回发到服务器并且只是你的浏览器没有足够的时间来渲染淡入淡出效果。

要对此进行测试，请在return false;属性中添加OnClientClick。这当然会取消您在服务器上的操作，但您将获得淡入淡出效果：

 <asp: Button ... OnClientClick="startButtonClick();return false;"></asp:Button>

要解决此问题并仍然提交您的请求，您可以尝试在JavaScript中使用ASP.NET __doPostBack方法

ASP.NET：

<asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick(this);return false;"/>

JavaScript的：

function startButtonClick(button)
{
    $("#startButtonSpan > input").fadeOut(500, function(){__doPostBack(button.name, "")});
}

__doPostBack方法有两个参数：执行回发的控件的名称和可用于在服务器上发送更多信息的回发参数。在asp:Button的情况下，按钮的名称应该足以发送请求而没有问题。

使用此技术，您将淡化客户端上的按钮，并触发服务器上的操作。我不能保证这个确切的代码能够正常工作（我现在无法访问开发环境），但你应该明白这一点。

无法使用JQuery使ASP.NET控件按钮淡出

4 个答案: