2010-07-02 73 views
10

我打电话jQuery的功能插入一条记录到数据库后,jQuery函数...代码调用后面在asp.net似乎不工作

ScriptManager.RegisterClientScriptBlock(LbOk, typeof(LinkButton), "json", 
          "topBar('Successfully Inserted');", true); 

我已经在我的母版页包含在本一回发后执行jQuery函数,

<script type="text/javascript"> 
    function load() { 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
     } 
    function EndRequestHandler() 
     { 
      topBar(message); 
    } 


function topBar(message) { 
    alert(a); 
    var alert = $('<div id="alert">' + message + '</div>'); 
    $(document.body).append(alert); 
    var $alert = $('#alert'); 
    if ($alert.length) { 
     var alerttimer = window.setTimeout(function() { 
      $alert.trigger('click'); 
     }, 5000); 
     $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function() { 
      window.clearTimeout(alerttimer); 
      $alert.animate({ height: '0' }, 200); 
     }); 
    } 
} 
    </script> 

<body onload="load();"> 

但它似乎不工作...任何建议..

+0

被称为警报(一),或什么都没有? – 2010-07-04 08:25:13

+0

@Dave警报来了,但下面的语句没有得到执行 – bala3569 2010-07-04 12:07:30

+0

尝试使用“alert”和“$ alert”的不同变量名称。我不确定,但我会警惕重新定义本地警报功能。至少,这不是很好的编码练习。 – 2010-07-04 15:33:42

回答

3

假设你的代码隐藏在UpdatePanel刷新过程中运行,可以疗法e您的EndRequest处理程序和您的代码隐藏注册之间的交互不良吗? topBar()应该被调用两次,一次使用“Successfully Inserted”消息,然后一次使用EndRequest中的未定义参数(除非消息变量被定义在某处,我们在这里看不到)。

还请记住$('#alert')可以返回多个项目。如果不止一次调用topBar(),那很可能是这种情况。

如何做这样的事情,对于初学者来说,以减轻意想不到的副作用:

function topBar(message) { 
    var $alert = $('<div/>'); 

    $alert.text(message); 

    $alert.click(function() { 
    $(this).slideUp(200); 
    }); 

    $(body).append($alert); 

    // Doesn't hurt anything to re-slideUp it if it's already 
    // hidden, and that keeps this simple. 
    setTimeout(function() { $alert.slideUp(200) }, 5000); 
} 

这不能解决EndRequest和注册*脚本的问题都执行的顶栏(),但应该防止它们发生冲突,以便您可以看到发生了什么变化。

试一试,让我们知道如果这改变了事情。

+0

无效时发生了什么?一点都没有?您是否肯定在异步回发期间没有发生JavaScript错误或服务器端错误(这会阻止Register * Script发送其有效内容)? 如果您使用Firebug在topBar()函数中设置断点,那么当该函数无法正常工作时,是否输入了该函数? – 2010-07-06 05:42:31

3

对于Chrome和Firefox,我唯一遇到的问题是var alertalert()调用的名称相同。

function topBar(message) { 
     alert(message); 
     var alertDiv = $('<div id="alert">' + message + '</div>'); 
     $(document.body).append(alertDiv); 
     var $alert = $('#alert'); 

这有可能是你的body标签不运行脚本,这将意味着$(document.body)参考是空的时加载的 - 它的jQuery就会静悄悄地失败添加警报div来。无论哪种方式,它绝不会伤害在$(document).ready事件来包装你的电话:

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "json", 
         "$(document).ready(function() { topBar('Successfully Inserted');});", true); 
4

这里是一个完整的工作示例:

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" %> 
<script type="text/C#" runat="server"> 
    protected void BtnUpdate_Click(object sender, EventArgs e) 
    { 
     // when the button is clicked invoke the topBar function 
     // Notice the HtmlEncode to make sure you are properly escaping strings 
     ScriptManager.RegisterStartupScript(
      this, 
      GetType(), 
      "key", 
      string.Format(
       "topBar({0});", 
       Server.HtmlEncode("Successfully Inserted") 
      ), 
      true 
     ); 
    }  
</script> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function topBar(message) { 
      var alert = $('<div id="alert">' + message + '</div>'); 
      $(document.body).append(alert); 
      var $alert = $('#alert'); 
      if ($alert.length) { 
       var alerttimer = window.setTimeout(function() { 
        $alert.trigger('click'); 
       }, 5000); 
       $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function() { 
        window.clearTimeout(alerttimer); 
        $alert.animate({ height: '0' }, 200); 
       }); 
      } 
     } 
    </script> 
</head> 
<body> 
    <form id="Form1" runat="server"> 

    <asp:ScriptManager ID="scm" runat="server" /> 

    <asp:UpdatePanel ID="up" runat="server"> 
     <ContentTemplate> 
      <!-- 
       You could have some other server side controls 
       that get updated here 
      --> 
     </ContentTemplate> 
     <Triggers> 
      <asp:AsyncPostBackTrigger 
       ControlID="BtnUpdate" 
       EventName="Click" 
      /> 
     </Triggers> 
    </asp:UpdatePanel> 

    <asp:LinkButton 
     ID="BtnUpdate" 
     runat="server" 
     Text="Update" 
     OnClick="BtnUpdate_Click" 
    /> 

    </form> 
</body> 
</html> 
+0

确认正在工作。我的代码调用UnFreezeScreen()。 'ScriptManager.RegisterStartupScript(BTN_Submit,BTN_Submit.GetType(),“key”,“UnFreezeScreen();”,True)' – 2011-09-09 21:51:39

+0

感谢您的解决方案,但是如果我可以知道如何获得这个功能以使用多个操作并使用消息从代码后面发送的案例?如果你有时间亲切更新或jsFiddle一个小例子..谢谢 – hsobhy 2014-03-05 16:43:04

3

这并不直接回答你的问题,但更意味着通过另一种技术是在不使用更新面板的情况下调用页面方法,而是直接从jQuery中调用。

只是装饰你的页面的方法(在部分类的代码隐藏的),像这样(它必须是静态的):

[WebMethod] 
[ScriptMethod(ResponseFormat=ResponseFormat.Json, XmlSerializeString=true)] 
public static bool UpdateDatabase(string param1 , string param2) 
{ 
    // perform the database logic here... 

    return true; 
} 

然后,你可以调用这个页面的方法直接从jQuery的$就法:

$("#somebutton").click(function() { 

    $.ajax({ 
    type: "POST", 
    url: "PageName.aspx/UpdateDatabase", 
    data: "{ param1: 'somevalue', param2: 'somevalue' }", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function(data) { 
     if (data.d) { 
     topBar("success!"); 
     } else { 
     topBar("fail"); 
     } 
    } 
    }); 

}); 

这很简单,并且尝试注册脚本更加简洁。无需创建Web服务。

这是一个伟大的文章:

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/