有時候在表單送出前，我們可能會檢查使用者輸入空白字元或未選擇下拉選單，此時就能在表單執行前先判斷是否正確。另外，我們可能會有一些按鈕改變輸入選項的文字，例如按下按鈕後清除輸入框的文字或將輸入框的值變更為預設值。

ASP按下按鈕後會呼叫設定好的JScrip副程式，而另外兩種是用JQuery則是透過索引ID方式讀取按下的按鈕，所以必須載入jquery。

 

第一種 ASP按鈕會發生Postback，也就是會觸發事件時會刷新頁面。

<asp:Button ID="Button1" runat="server" OnClientClick="subFunction1();" Text="頁面會更新" />

第二種ASP按鈕不會發生頁面刷新狀況

<asp:Button ID="Button2" runat="server" OnClientClick="event.returnValue=false; subFunction1();" Text="頁面不會更新" />

※OnClick是在server端執行 | OnClientClick是在Client端執行 | event.returnValue=false是不要回傳就不會發生頁面刷新狀況

 

第三種HTML按鈕使用JQuery不會發生頁面刷新狀況

<button id="Button3" type="button">使用JQuery</button>

※也可使用此方式<asp:Button ID="Button3" 使用JQuery/>

 

第四種 利用div標籤作為按使用JQuery不會發生頁面刷新狀況

<div id="mydiv"> div標籤按鈕 </div>

 

如果發生JQuery未執行或按下按鈕沒反應的狀況，請確認是否有加上$(document).ready(function () { 按鈕事件  });。

http://www.w3school.com.cn/jquery/jquery_ref_events.asp

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="web_button.aspx.cs" Inherits="testWeb.web_button" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="JS/jquery-3.3.1.min.js"></script> <!-- 載入JQuery-->

<script type="text/javascript">

    function subFunction1()
    {
        alert('ASP Button1頁面會更新'); 
    }

    function subFunction2()
    {
        alert('ASP Button2頁面會更新'); 
    }

 

   // 使用JQuery

    $(document).ready(function () {   // 可縮寫為$(function(){
        $('#Button3').click(function() {
            alert('Html Button3使用JQuery頁面不會更新');  
        });
         $('#mydiv').click(function() {
        alert('div標籤Button使用JQuery頁面不會更新');  
        });

    });

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>按鈕測試</title>
</head>
<body>
    <form id="form1" runat="server">
            <asp:Button ID="Button1" runat="server" OnClientClick="subFunction1();" Text="頁面會更新" />
            <asp:Button ID="Button2" runat="server" OnClientClick="event.returnValue=false; subFunction1();" Text="頁面不會更新" />
            <button id="Button3" type="button">使用JQuery</button>
            <div id="mydiv"> div標籤按鈕 </div>
    </form>
</body>
</html>
 
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 門外漢 的頭像
    門外漢

    門外漢的筆記

    門外漢 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄