如何使用jQuery时，同时触发的OnClick和事件的OnClientClick在ASP.NET？ [英] How to trigger OnClick and OnClientClick events simultaneously in ASP.NET when using jQuery?

问题描述

我试图回传显示在消息栏。我使用的是jQuery脚本我在网上找到这里。一切都很正常分开，但在jQuery是添加到页面上我的服务器端事件不会被调用。

I am trying to display a message bar during postback. I am using a jQuery script I found online here. Everything works great separately, but when the jQuery is added to the page my server side event is never called.

下面是我的按钮code：

Here is my button code:

<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文件：

This is the related external .js file:

(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属性的功能，但没有一个似乎工作。我看了看那里人有这个，但他们没有问题，其他的例子似乎于事无补。

I have also tried calling the function with the OnClientClick property, but neither one seems to work. I looked at other examples where people were having issues with this but none of them seemed to help either.

任何想法，将大大AP preciated！

Any thoughts would be greatly appreciated!

推荐答案

你试过喜欢简单的东西：

Have you tried something simple like:

OnClientClick="return YourJavaScriptFunction();"

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

和在你的JavaScript函数返回真正末

and in your JavaScript function return true at the end

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>

这篇关于如何使用jQuery时，同时触发的OnClick和事件的OnClientClick在ASP.NET？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！