2010-07-02 66 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/