從Issue后面的代碼調用JS函數

Question

我有一個JS函數（顯示警報框），並且在ASP頁中有一個鏈接按鈕，在單擊鏈接后的代碼中的單擊事件時，我想調用此函數，然后重定向到某些頁面。

ASP代碼

 <script type="text/javascript" language="javascript">
     function myFunction() {
         // executes when HTML-Document is loaded and DOM is ready
         alert("document is ready!");
     }                   
 </script>
 <div>
     <asp:LinkButton ID="lnkbtnChangePassword" runat="server" Text="Change Passwrod" OnClick="lnkbtnChangePassword_Click" ></asp:LinkButton>
 </div>

C＃代碼

 protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
 {
     ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "myFunction()", true);
     Response.Redirect("myPage.aspx");
 }

在這里，當我單擊鏈接按鈕時，它只是不顯示警報框/窗口並重定向到頁面。

Answer 1

您應該使用LinkButton.ClientClick而不是LinkButton.Click事件。

Click事件在服務器上處理。 當用戶單擊該按鈕時，頁面將發布回服務器，並且在服務器端執行代碼。

ClientClick事件實際上是應該執行的JavaScript函數的名稱。

您可能應該執行以下操作：

<asp:LinkButton ID="lnkbtnChangePassword" runat="server" Text="Change Passwrod" OnClientClick="showMyAlertAndSubmit()"></asp:LinkButton>

<script type="text/javascript">
function showMyAlertAndSubmit(){
    alert("Your password is being changed");
    // submit your form
}
</script>

為什么您當前的代碼不起作用

當前，您發送用於顯示消息的腳本，並同時重定向。 這意味着瀏覽器會收到顯示消息和重定向的指令，並且會在顯示消息之前重定向用戶。 一種方法是從客戶端重定向。 例如：

 protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
 {
     ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "myFunction()", true);
 }

在客戶端

function myFunction() {
    // show your message here
    // do other things you need
    // and then redirect here. Don't redirect from server side with Response.Redirect
    window.location = "http://myserver/myPage.aspx";
}

其他選擇

由於需要先在服務器端執行檢查，然后再保存數據和重定向，因此可以使用ajax調用服務器而無需執行回發。 刪除Click處理程序，僅使用ClientClick：

function myFunction() {
    $.ajax({
      type: "POST",
      url: "myPage.aspx/MyCheckMethod",
      data: "{}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(msg) {
          ShowAlert();
          window.location = "http://myserver/mypage.aspx";
      }
    });
}

有關更多詳細信息，請查看本教程。

Answer 2

像這樣更改代碼：

ASP代碼

<script type="text/javascript" language="javascript">
  function myFunction() {
     // executes when HTML-Document is loaded and DOM is ready
     alert("document is ready!");
    }                   
</script>
<div>
     <asp:LinkButton ID="lnkbtnChangePassword" runat="server" Text="Change Passwrod" OnClick="lnkbtnChangePassword_Click" OnClientClick="myFunction()" ></asp:LinkButton>
</div>

C＃代碼

protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
{
    Response.Redirect("myPage.aspx");
}

Answer 3

將您的JavaScript函數更改為：

<script type="text/javascript" language="javascript">
     function myFunction() {
         // alert will stop js execution
         alert("document is ready!");
         // then reload your page
         __doPostBack('pagename','parameter');
     }                   
 </script>

並使用此函數從代碼后面調用它：

protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
 {
     //do your job here
     //then call your js function
     ScriptManager.RegisterStartupScript(this,this.GetType(), "CallMyFunction", "myFunction();", true);
 }

Answer 4

您缺少的是等待JavaScript警報對話框彈出，然后重定向到頁面。 為此，您需要告訴按鈕等待JavaScript警報對話框彈出，然后再執行服務器端工作。

ASPX：

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function alertBeforeSubmit() {
           return alert('Document Ready');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button Text="Do" runat="server" ID="btnSubmit" OnClick="btnSubmit_Click" OnClientClick="return alertBeforeSubmit();" />
    </div>
    </form>
</body>

CS：

 protected void btnSubmit_Click(object sender, EventArgs e)
    {
        Response.Redirect("Default.aspx");
    }

從Issue后面的代碼調用JS函數

問題描述

4 個解決方案

解決方案1
2 2014-02-05 08:43:55

解決方案2
1 2014-02-05 08:47:09

解決方案3
1 2014-02-05 09:35:25

解決方案4
0 2014-02-05 10:56:35

從Issue后面的代碼調用JS函數

問題描述

4 個解決方案

解決方案1 2 2014-02-05 08:43:55

解決方案2 1 2014-02-05 08:47:09

解決方案3 1 2014-02-05 09:35:25

解決方案4 0 2014-02-05 10:56:35

解決方案1
2 2014-02-05 08:43:55

解決方案2
1 2014-02-05 08:47:09

解決方案3
1 2014-02-05 09:35:25

解決方案4
0 2014-02-05 10:56:35