如何在使用jQuery时在ASP.NET中同时触发OnClick和OnClientClick事件？

Question

我正在尝试在PostBack期间显示消息栏。 我正在使用在线找到的jQuery脚本（在此处）。 一切工作都很好，但是当将jQuery添加到页面时，我的服务器端事件从未被调用。

这是我的按钮代码：

<asp:Button ID="btnGetReport" CssClass="float-left" runat="server" 
Text="<%$ Glossary:GetReport %>" OnClick="btnGetReport_Click" />

这是内联脚本：

<script type="text/javascript">
$(document).ready(function () {
    $('#<%=btnGetReport.ClientID%>').click(function (event) {
        event.preventDefault();
        $('#message_bar').displayMessage({
            position: 'fixed',
            skin: 'modern',
            message: 'We are fetching your report. Please wait...',
        });
    });
});
</script>

这是相关的外部 .js 文件:

(function( $ ){

$.fn.displayMessage = function(options) {

    // Default configuration properties.
     var defaults = {
              message       : 'Error message',
              speed         : 'fast',
              position      : 'fixed', // relative, absolute, fixed
              autohide      : true
     }

    var options = $.extend( defaults, options );
    $(this).slideUp('fast');
    $(this).removeClass().empty();
    return this.each(function() {

      var sticky = (options.sticky == false) ? 'relative' : 'absolute';
      $(this).addClass('messagebar-skin-'+options.skin+'_bar').css('position',options.position).css('background-color',options.background);
      $(this).append('<div class="messagebar-skin-'+options.skin+'_inner"><span class="messagebar-skin-'+options.skin+'_text"></span></div>').css('color',options.color);
      $(this).find('span').html(options.message);

      $(this).slideDown(options.speed ,function(){

         var parent = ($(this).attr('id')) ? "#"+$(this).attr('id') : "."+$(this).attr('class');
         var close_button = ($(this).find('a').attr('id')) ? "#"+$(this).find('a').attr('id') : "."+$(this).find('a').attr('class');

         if(options.autohide == true)
         {
            $(this).delay(2400).fadeOut('slow');
         }

         $(parent+">div>"+close_button).bind("click", function (event) {
            event.preventDefault();
            $(parent+">div>"+close_button).animate({"opacity": "hide"}, function(){
                $(parent+">div>span").fadeOut("slow").html("");
                $(parent+">div>"+close_button).parent().parent().slideUp(options.speed);
            });
         });

  });

});

};
})( jQuery );

我还尝试使用OnClientClick属性调用函数，但两种方式似乎都不起作用。我查看了其他人遇到问题的例子，但它们都没有帮助。

如果您有任何想法，请不吝赐教！

- jfielaidof

Answer 1

你尝试过像这样简单的东西吗：

OnClientClick="return YourJavaScriptFunction();"

<asp:Button ID="btnGetReport" CssClass="float-left" runat="server" 
    Text="<%$ Glossary:GetReport %>" OnClick="btnGetReport_Click" 
    OnClientClick="return YourJavaScriptFunction();" />

在你的JavaScript函数中，在结尾处返回true

function YourJavaScriptFunction () {
    // your cool stuff
    return true;
}

编辑1

这行：

OnClientClick="return YourJavaScriptFunction();"

这相当于：

$('#<%=btnGetReport.ClientID%>').click(function () {

你的脚本应该是这样的：

<script type="text/javascript">

function YourJavaScriptFunction (){
        $('#message_bar').displayMessage({
            position: 'fixed',
            skin: 'modern',
            message: 'We are fetching your report. Please wait...'
        });    

        // this will prevent the postback, equivalent to: event.preventDefault();
        return false;
}

</script>

- Jupaol

---

我对jQuery的经验不是很丰富，所以我不太确定如何做到这一点。我该如何调用函数并绕过内联脚本中的"$ ('＃<％= btnGetReport.ClientID％>').click（function（event）"？ - jfielaidof

我将我的按钮放置在一个面板控件中，并添加了DefaultButton属性，以允许用户按下回车键。jQuery函数被触发，但服务器端仍然没有响应。如果我点击它，它可以正常工作，但按下回车键时却不行。有什么想法吗？ - jfielaidof

我成功解决了这个问题，如果有类似的问题可以参考一下。我的DefaultButton的原始OnClientClick属性为OnClientClick="return testClick();"。我将其改为OnClientClick="if(!testClick()){return true;}"后，它运行得非常好！ - jfielaidof

Answer 2

试试这个：

   <script type="text/javascript">
    $(document).ready(function () {
        $('#<%=btnGetReport.ClientID%>').click(function (event) {
            event.preventDefault();
            $('#message_bar').displayMessage({
                position: 'fixed',
                skin: 'modern',
                message: 'We are fetching your report. Please wait...',
            });
         __doPostBack("btnGetReport", "");
        });
    });
    </script>

如果使用主页面，则尝试以下操作：

 __doPostBack("ctl00$MainContent$btnGetReport", "");

- Kapil Khandelwal

---

我尝试了这个，但它没有起作用。回发已经发生，但客户端和服务器端的函数都没有触发。不过还是谢谢你的帮助。 - jfielaidof