2019年9月19日 星期四

前端js/後端cs互相傳值

https://leofunlife3.blogspot.com/2019/01/jscs.html

前端js/後端cs互相傳值


//新增一個hidden變數, 前後端pass value可透過此變數(常用手法)

<input type="hidden" id="abc" runat='server' />



//新增一個js, 把要傳給後端的參數寫到hidden變數

<script type="text/javascript">

function setvalue() {

  var a = document.getElementById("abc");

  a.value = "這是js要給後端的參數";

}

</script>


test.aspx.cs(後端)


Label1.Text = "承接js傳過來的參數是 "+ Request.Params["abc"];


後端CS傳值給前端JS 

test.aspx.cs(後端)

protected void Page_Load(object sender, EventArgs e) {

  form1.InnerHtml = "";

  for (int i = 0; i < 10; i++) {

    form1.InnerHtml += "<button onclick='send(" + i + ")'>click</button>";

  }

}

test.aspx(前端)

<script type="text/javascript">

  function send(id) {

    alert(id);

  }


</script>










Javascript 事件處理

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script>
        var over = function (element) {
            element.style.color = "red";
        }
        var out = function (element) {
            element.style.color = "black";
        }
        //javascript動態的註冊事件處理器
        function init() {
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("Clicked");
            }
            //javascript動態的註冊事件處理器
            var btn2 = document.getElementById("btn2");
            var handler = function () { //準備一個事件處理器(對應事件的函式)
                alert("Clicked");
            }
            btn2.addEventListener("click"/*事件的名稱*/, handler);

            var btn3 = document.getElementById("btn3");
         
            var handler3 = function (e) {
                //1.使用者點擊了按鈕, 觸發click事件
                //2.瀏覽器主動收集和事件有關的資訊, 並製造出Event Object事件物件
                //var eventObj = 事件物件;
                //3.呼叫已經註冊的事件處理器(事件處理函式)
                //handler(eventObj);
                alert(e.clientX+","+e.clientY);
            }
            btn3.addEventListener("click"/*事件的名稱*/, handler3);

            document.addEventListener("keydown", function (e) {//匿名函式:用來直接當作事件處理器
                alert(e.keyCode);
            });
        }
    </script>
</head>
<%--onload下載時觸發事件--%>
<body onload="init();">
    <form id="form1" runat="server">
        <div>
            <button id="btn">按我一下 </button>
        </div>
        <div>
            <button id="btn2">再按我一下 </button>
        </div>
        <div>
            <button id="btn3">事件event </button>
        </div>
        <div>
            <button onclick="alert('Clicked');">Clicked</button>
            <span onmouseover="this.style.color='red'"
                onmouseout="this.style.color='black'">Test</span>
        </div>
        <div>
            <%--this代表span物件--%>
            <span onmouseover="over(this);"
                onmouseout="out(this);">HELLO</span>
        </div>
    </form>
</body>
</html>