一般點擊事件：
/* Script section */ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript"> $(document).on('click','#BtnSend',function() { alert('clicked!'); }); </script>
/* HTML section */ <html> .......... <button type="button" id="BtnSend" value="OK" /></button> .......... </html>
點擊後 POST 表單：
/* 一般 HTML 寫法 */ <html> .......... <form id="FormId"> <input type ="submit" value="確認" /> //提交 <input type ="reset" value="重置" /> //重置 </form> .......... </html> /* 使用 Javascript 寫法 */ <html> .......... <form id="FormId"> <button id="BtnId">確認</button> </form> .......... </html> <script type="text/javascript"> document.getElementById("BtnId").addEventListener("click", function () { var form = document.getElementById("FormId"); form.submit(); }); </script>
點擊圖片後 POST 表單：
/* 以圖片當作觸發按鈕時 */ <form id="FormId"> <input type="image" src="submit_image.jpg" onclick="document.getElementById('FormId').submit();"> //提交 <input type="image" src="reset_image.jpg" onclick="document.getElementById('FormId').reset();"> //重置 </form> /* 以圖片超連結方式觸發按鈕時(不建議) */ <form id="FormId"> <a href="#" onclick="document.getElementById('FormId').submit();"><img src="image_1.jpg"></a> //提交 <a href="#" onclick="document.getElementById('FormId').reset();"><img src="image_2.jpg"></a> //重置 </form>
Razor 方式寫法：
/* 方式1 */ <button onclick="location.href='@Url.Action("ActionName","ControllerName", new { /*routeValue*/})'" >連到指定頁面去</button> /* 方式2 */ <input onclick="location.href='@Url.Action("ActionName","ControllerName", new { /*routeValue*/})'" type="button" value="要在按鈕上顯示的字"/> /* 方式3 */ <html> <button onclick="clickLink('@Url.Action("ActionName", "ControllerName", new{ /*routeValue*/ })')" >刪除</button> </html>
<script type="text/javascript"> function clickLink(url) { //todo... } </script>
