asp.net點(diǎn)擊服務(wù)端按鈕執(zhí)行js代碼的方法(無刷新)

一個服務(wù)端的按鈕，在執(zhí)行完一系列任務(wù)以后，要彈出一個js對話框，或者執(zhí)行一段其它的js代碼，而這些js代碼我并不想寫在html端，用下面的函數(shù)就能解決這個問題。

using System;
using System.Web.UI;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            //直接alert
            JSAlert("Hello!");
        }
        protected void Button3_Click(object sender, EventArgs e)
        {
            //在這里寫你的js代碼
            string jscodestr = "alert('Hello2222');";
            RunJSCode("jsname", jscodestr);
        }

        /// <summary>
        /// 彈出對話框
        /// <para>如 JSAlert("aaa");</para>
        /// </summary>
        /// <param name="Str">要彈出的字符串</param>
        public void JSAlert(string Str)
        {
            try
            {
                ScriptManager.RegisterStartupScript((Page)System.Web.HttpContext.Current.Handler, ((Page)System.Web.HttpContext.Current.Handler).GetType(), "ALERT", "alert('" + Str + "');", true);
            }
            catch (Exception ErrMsg)
            {

            }
        }

        /// <summary>
        /// 執(zhí)行一段js代碼
        /// </summary>
        /// <param name="jsname">js名稱</param>
        /// <param name="jsstrs">js代碼內(nèi)容</param>
        public void RunJSCode(string jsname, string jsstrs)
        {
            ScriptManager.RegisterStartupScript((Page)System.Web.HttpContext.Current.Handler, ((Page)System.Web.HttpContext.Current.Handler).GetType(), jsname, jsstrs, true);
        }
    }
}

如果覺得刷新的頁面，感覺很不好的話，可以套一個updatepanel

<form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="Button" />
                    <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="Button" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>

運(yùn)行效果：

HTML+CSS3+JS創(chuàng)意設(shè)計(jì)——打造炫酷滑動登錄頁面

**引言：探索交互之美**

在Web開發(fā)的世界里，優(yōu)秀的用戶體驗(yàn)往往始于一個精心設(shè)計(jì)的登錄界面。HTML5、CSS3以及JavaScript的結(jié)合讓我們能夠創(chuàng)造出極具創(chuàng)意與個性化的滑動登錄頁面，讓用戶在首次接觸應(yīng)用時(shí)就能留下深刻印象。本篇文章將詳細(xì)介紹如何利用基礎(chǔ)的HTML+CSS3+JS技術(shù)，從零開始打造一款令人眼前一亮的滑動登錄頁面，并通過詳細(xì)的代碼實(shí)例解析，帶領(lǐng)您領(lǐng)略前端交互設(shè)計(jì)的魅力。

---

### **一、搭建基礎(chǔ)HTML結(jié)構(gòu)**

**標(biāo)題：** 構(gòu)建骨骼——登錄表單的基礎(chǔ)布局

首先，我們需要構(gòu)建一個簡潔明了的HTML結(jié)構(gòu)，包括用戶名輸入框、密碼輸入框、登錄按鈕以及可選的注冊鏈接。為了實(shí)現(xiàn)滑動效果，我們還將引入一個容器元素來包裹整個登錄區(qū)域。

```html

<!DOCTYPE html>

<head>

<title>滑動登錄頁面</title>

</head>

<body>

</form>

</div>

</body>

</html>

```

---

### **二、CSS3魔法——樣式與動畫**

**標(biāo)題：** 點(diǎn)綴肌膚——賦予登錄表單靈動之感

接下來，我們將使用CSS3為登錄表單添加樣式，并利用`@keyframes`規(guī)則定義滑動動畫效果。同時(shí)，我們還需要保證登錄表單在不同設(shè)備上具有良好的響應(yīng)式布局。

```css

/* styles.css */

body {

margin: 0;

background-color: #f0f0f0;

}

#login-slider {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 300px;

height: auto;

background-color: white;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

overflow: hidden;

}

.login-form {

display: flex;

flex-direction: column;

padding: 20px;

animation: slideIn 1s ease-in-out forwards;

}

/* 定義滑動動畫 */

@keyframes slideIn {

0% {

transform: translateY(100%);

}

100% {

transform: translateY(0);

}

/* 登錄表單元素樣式 */

input[type="text"],

input[type="password"] {

margin-bottom: 10px;

padding: 10px;

border: none;

border-radius: 5px;

}

button {

cursor: pointer;

background-color: #007bff;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

text-transform: uppercase;

font-weight: bold;

}

/* 響應(yīng)式布局 */

@media screen and (max-width: 768px) {

#login-slider {

width: 90%;

}

```

---

### **三、JavaScript增強(qiáng)交互**

**標(biāo)題：** 賦予靈魂——用JavaScript實(shí)現(xiàn)滑動觸發(fā)與驗(yàn)證邏輯

現(xiàn)在我們要借助JavaScript來控制登錄表單的滑動行為，例如當(dāng)用戶點(diǎn)擊某個鏈接或者頁面加載完成后自動觸發(fā)滑動動畫。同時(shí)，可以增加一些簡單的表單驗(yàn)證功能。

```javascript

// scripts.js

document.addEventListener('DOMContentLoaded', () => {

// 頁面加載完成后執(zhí)行滑動動畫

const loginSlider = document.getElementById('login-slider');

loginSlider.classList.add('slide-active');

// 表單提交事件處理，此處僅為示例，實(shí)際場景下需加入真實(shí)驗(yàn)證邏輯

const form = document.querySelector('.login-form');

form.addEventListener('submit', (event) => {

event.preventDefault(); // 阻止默認(rèn)提交行為

const username = form.querySelector('input[type="text"]').value;

const password = form.querySelector('input[type="password"]').value;

// 實(shí)現(xiàn)簡單驗(yàn)證邏輯，如為空檢查

if (!username || !password) {

alert('用戶名和密碼不能為空!');

} else {

// 這里可以替換為真實(shí)的登錄請求邏輯

console.log('正在登錄...', username, password);

}

});

```

---

### **四、創(chuàng)意無限——拓展與優(yōu)化**

**標(biāo)題：** 持續(xù)創(chuàng)新——更多滑動登錄頁面的設(shè)計(jì)思路與實(shí)踐

除了上述基本的滑動登錄形式，還可以進(jìn)一步豐富設(shè)計(jì)，比如：

- 添加進(jìn)度條指示登錄滑動完成度；

- 使用CSS變量實(shí)現(xiàn)自定義主題切換；

- 結(jié)合SVG圖標(biāo)增加視覺吸引力；

- 通過IntersectionObserver API實(shí)現(xiàn)視口可見時(shí)自動滑動；

- 配合AJAX技術(shù)實(shí)現(xiàn)實(shí)時(shí)驗(yàn)證和無刷新登錄。

---

**結(jié)語：**

通過這次對HTML+CSS3+JS組合技術(shù)的探索，我們不僅成功地制作出了一個富有創(chuàng)意的滑動登錄頁面，還展現(xiàn)了前端技術(shù)在交互設(shè)計(jì)中的無限可能性。學(xué)習(xí)并靈活運(yùn)用這些基礎(chǔ)知識，可以讓您的Web應(yīng)用更加生動有趣，從而更好地吸引和留住用戶。持續(xù)關(guān)注前端技術(shù)的最新發(fā)展，不斷挑戰(zhàn)自我，用代碼書寫更美好的Web世界。

有兩個頁面parent.html和child.html，在parent頁面里面通過window.open打開了child頁面，child頁面執(zhí)行完代碼之后想要刷新parent頁面，然后立即查看到修改后的效果，那么我們就要在child里面直接能夠刷新parent頁面，這樣就可以實(shí)現(xiàn)這樣的效果。

1.1打開了parent.html頁面

1.2在parent頁面打開了child頁面

1.3child頁面點(diǎn)擊確定按鈕之后刷新了父頁面parent

2 parent.html內(nèi)容：

<!DOCTYPE html>

<html>

<head>

<title>parents</title>

function openWin() {

window.open('child.html', '_blank','width=500,height=400,top=200,left=400');

}

//定義callback方法，用于回調(diào)

function callback() {

refreshWin();

}

//刷新當(dāng)前頁面

function refreshWin() {

//調(diào)用刷新頁面的方法，刷新當(dāng)前頁面，結(jié)果會再次彈出222

window.location.reload();

}

//剛記載的時(shí)候彈出222

function show(){

alert(222);

}

</script>

</head>

</body>

</html>

3 child.html內(nèi)容：

<!DOCTYPE html>

<html>

<head>

<title>child</title>

function formSubmit(){

window.opener.callback();//上述執(zhí)行完成后，調(diào)用打開頁面的callback方法，此處是調(diào)用主頁面的callback方法

window.close();//當(dāng)前頁面關(guān)閉

}

</script>

</head>

<body>

</body>

</html>

4 通過這樣的操作很容易在子頁面操作父頁面所有的方法，感覺很方便，整理一下供大家參考。

歡迎關(guān)注我的頭條號，謝謝大家！

在線咨詢

上一篇：h5 根據(jù)固定的寬度，高度計(jì)算一段html的高度
下一篇：前車之鑒-盜取比特幣的黑客技術(shù)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

asp.net點(diǎn)擊服務(wù)端按鈕執(zhí)行js代碼的方法(無刷新)

如果覺得刷新的頁面，感覺很不好的話，可以套一個updatepanel

運(yùn)行效果：

您的項(xiàng)目需求