asp.net点击服务端按钮执行js代码的方法(无刷新)

一个服务端的按钮，在执行完一系列任务以后，要弹出一个js对话框，或者执行一段其它的js代码，而这些js代码我并不想写在html端，用下面的函数就能解决这个问题。

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>
        /// 执行一段js代码
        /// </summary>
        /// <param name="jsname">js名称</param>
        /// <param name="jsstrs">js代码内容</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>

运行效果：

HTML+CSS3+JS创意设计——打造炫酷滑动登录页面

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

在Web开发的世界里，优秀的用户体验往往始于一个精心设计的登录界面。HTML5、CSS3以及JavaScript的结合让我们能够创造出极具创意与个性化的滑动登录页面，让用户在首次接触应用时就能留下深刻印象。本篇文章将详细介绍如何利用基础的HTML+CSS3+JS技术，从零开始打造一款令人眼前一亮的滑动登录页面，并通过详细的代码实例解析，带领您领略前端交互设计的魅力。

---

### **一、搭建基础HTML结构**

**标题：** 构建骨骼——登录表单的基础布局

首先，我们需要构建一个简洁明了的HTML结构，包括用户名输入框、密码输入框、登录按钮以及可选的注册链接。为了实现滑动效果，我们还将引入一个容器元素来包裹整个登录区域。

```html

<!DOCTYPE html>

<head>

<title>滑动登录页面</title>

</head>

<body>

</form>

</div>

</body>

</html>

```

---

### **二、CSS3魔法——样式与动画**

**标题：** 点缀肌肤——赋予登录表单灵动之感

接下来，我们将使用CSS3为登录表单添加样式，并利用`@keyframes`规则定义滑动动画效果。同时，我们还需要保证登录表单在不同设备上具有良好的响应式布局。

```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;

}

/* 响应式布局 */

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

#login-slider {

width: 90%;

}

```

---

### **三、JavaScript增强交互**

**标题：** 赋予灵魂——用JavaScript实现滑动触发与验证逻辑

现在我们要借助JavaScript来控制登录表单的滑动行为，例如当用户点击某个链接或者页面加载完成后自动触发滑动动画。同时，可以增加一些简单的表单验证功能。

```javascript

// scripts.js

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

// 页面加载完成后执行滑动动画

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

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

// 表单提交事件处理，此处仅为示例，实际场景下需加入真实验证逻辑

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

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

event.preventDefault(); // 阻止默认提交行为

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

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

// 实现简单验证逻辑，如为空检查

if (!username || !password) {

alert('用户名和密码不能为空!');

} else {

// 这里可以替换为真实的登录请求逻辑

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

}

});

```

---

### **四、创意无限——拓展与优化**

**标题：** 持续创新——更多滑动登录页面的设计思路与实践

除了上述基本的滑动登录形式，还可以进一步丰富设计，比如：

- 添加进度条指示登录滑动完成度；

- 使用CSS变量实现自定义主题切换；

- 结合SVG图标增加视觉吸引力；

- 通过IntersectionObserver API实现视口可见时自动滑动；

- 配合AJAX技术实现实时验证和无刷新登录。

---

**结语：**

通过这次对HTML+CSS3+JS组合技术的探索，我们不仅成功地制作出了一个富有创意的滑动登录页面，还展现了前端技术在交互设计中的无限可能性。学习并灵活运用这些基础知识，可以让您的Web应用更加生动有趣，从而更好地吸引和留住用户。持续关注前端技术的最新发展，不断挑战自我，用代码书写更美好的Web世界。

有两个页面parent.html和child.html，在parent页面里面通过window.open打开了child页面，child页面执行完代码之后想要刷新parent页面，然后立即查看到修改后的效果，那么我们就要在child里面直接能够刷新parent页面，这样就可以实现这样的效果。

1.1打开了parent.html页面

1.2在parent页面打开了child页面

1.3child页面点击确定按钮之后刷新了父页面parent

2 parent.html内容：

<!DOCTYPE html>

<html>

<head>

<title>parents</title>

function openWin() {

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

}

//定义callback方法，用于回调

function callback() {

refreshWin();

}

//刷新当前页面

function refreshWin() {

//调用刷新页面的方法，刷新当前页面，结果会再次弹出222

window.location.reload();

}

//刚记载的时候弹出222

function show(){

alert(222);

}

</script>

</head>

</body>

</html>

3 child.html内容：

<!DOCTYPE html>

<html>

<head>

<title>child</title>

function formSubmit(){

window.opener.callback();//上述执行完成后，调用打开页面的callback方法，此处是调用主页面的callback方法

window.close();//当前页面关闭

}

</script>

</head>

<body>

</body>

</html>

4 通过这样的操作很容易在子页面操作父页面所有的方法，感觉很方便，整理一下供大家参考。

欢迎关注我的头条号，谢谢大家！

在线咨询

上一篇：h5 根据固定的宽度，高度计算一段html的高度
下一篇：前车之鉴-盗取比特币的黑客技术

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

asp.net点击服务端按钮执行js代码的方法(无刷新)

如果觉得刷新的页面，感觉很不好的话，可以套一个updatepanel

运行效果：

您的项目需求