<body style="background-image: url('image/1.jpg');"> <div id="login-box"> <h1>Login</h1> <div class="input-box"> <i class="iconfont"></i> <input type="text" id="txtUsername" placeholder="UserName" runat="server" /> </div> <div class="input-box"> <i class="iconfont"></i> <input type="password" id="txtUserPassword" placeholder="UserPassword" runat="server"/> </div> <button id="btnSignIn" runat="server" OnClick="Button_Click()">Sign in</button> </div> </body> protected void Button_Click(object sender, EventArgs e) { Response.Redirect("about:blank"); string username = txtUsername.Value; string password = txtUserPassword.Value; try { Connect1 connector = new Connect1(); MySqlConnection connection = connector.getMySqlCon(); // 构建查询命令 string query = "SELECT * FROM users WHERE username = @username AND password = @password"; MySqlCommand command = new MySqlCommand(query, connection); command.Parameters.AddWithValue("@username", username); command.Parameters.AddWithValue("@password", password); using (MySqlDataReader reader = command.ExecuteReader()) { if (reader.Read()) // 账号密码匹配 { // 验证成功,执行跳转操作或其他逻辑 Response.Redirect("HomePage.aspx"); } else { Response.Write("<script>alert('Invalid username or password')</script>"); } } } catch (Exception ex) { // 处理数据库连接和操作异常 Response.Write("<script>alert('Database Connection Error: " + ex.Message + "')</script>"); } } } } 为什么按钮没有效果
时间: 2024-02-14 09:33:25 浏览: 133
根据提供的代码,按钮没有效果的可能原因有以下几点:
1. 按钮点击事件未正确绑定:请确保在前端代码中将按钮的 OnClick 属性设置为 "Button_Click()",并且在后端代码中定义了名为 Button_Click 的事件处理方法。
2. 按钮未设置 runat="server" 属性:请确认按钮的 HTML 代码中包含 runat="server" 属性,以确保按钮可以被服务器端代码访问。
3. 页面跳转逻辑问题:在事件处理方法 Button_Click 中,代码执行了 Response.Redirect("about:blank"),这会导致页面跳转到空白页。请检查是否需要执行该跳转操作,或者将其注释掉,以便能够执行其他逻辑或正确的页面跳转。
4. 数据库连接问题:请确保数据库连接配置正确,且数据库能够正常访问。如果数据库连接出现问题,可能导致事件处理方法中的代码无法执行。
如果以上解决方法都没有解决问题,请提供更多关于你的代码或错误提示的信息,以便更好地帮助你解决问题。
相关问题
.input-group { margin-bottom: 10px; } .input-group label { display: block; margin-bottom: 5px; } .input-group input { width: 100px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .input-group select { width: 100px; padding: 5px; border: 1px solid #B0E0E6; border-radius: 4px; box-sizing: border-box; } .login-btn { width: 100%; height: 10px; background-color: #aaffaa; color: #fff; padding: 30px 25px; border-radius: 4px; cursor: pointer; float: right; box-sizing: border-box; } .container div input:focus { background-color: #ffe4e1; } .login-btn:hover { background-color: #45a049; } </style> <script> function showAdminInput() { var userType = document.getElementById("user-type").value; if (userType == "admin") { document.getElementById("username-label").innerHTML = "管理员用户名:"; } else { document.getElementById("username-label").innerHTML = "请输入用户名:"; } } function login() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; var userType = document.getElementById("user-type").value; } </script> </head> <body style="background-image: url(image/bk8.gif); background-size: cover; background-repeat: no-repeat;color: pink;"> <div class="container" > <h1 style="font-size: 40px; text-align: center; text-color: #B0E0E6">Login</h1> <div class="input-group" > <label id="username-label">请输入用户名:</label> <input type="text" id="username" name="username" style="border-bottom: 1px solid black;padding-bottom: 2px;display:inline-block;"> </div> <div class="input-group" > <label>请你输入密码:</label> <input type="password" id="password" name="password" style="border-bottom: 1px solid black;padding-bottom: 2px;display:inline-block;"> </div> <div class="input-group" > <label>选择用户类型:</label> <select id="user-type" name="user-type" onchange="showAdminInput()" style="color: blue;"> <option value="normal">普通用户</option> <option value="admin">管理员</option> </select> </div> <button class="login-btn" onclick="login()" >GO</button> </div>为什么标签和输入框不能在同一行
标签和输入框不能在同一行是因为它们都被包含在一个class为“input-group”的div元素中,而该div元素默认的display属性是block,即块级元素,会自动换行。如果想让它们在同一行,可以将该div元素的display属性设置为inline-block或者使用CSS的flexbox布局。例如可以在.input-group样式中添加"display: inline-block;"。
<!DOCTYPE html><html><head> <title>嵌入式设备登录</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div class="login-box"> <img src="background.jpg" class="background"> <h1>设备登录</h1> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <input type="submit" value="登录"> </form> </div></body></html>body { background-color: #f2f2f2;}.login-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; padding: 50px; border-radius: 10px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);}.background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter: blur(5px);}h1 { margin: 0 0 30px; padding: 0; font-size: 28px; text-align: center; color: #333; text-shadow: 2px 2px 2px rgba(0,0,0,0.2);}form { display: flex; flex-direction: column;}label { margin-bottom: 10px; font-size: 18px; color: #333; text-shadow: 2px 2px 2px rgba(0,0,0,0.2);}input[type="text"], input[type="password"] { padding: 10px; border: none; border-radius: 5px; background-color: #f2f2f2; color: #333; box-shadow: inset 0 0 5px rgba(0,0,0,0.2);}input[type="submit"] { margin-top: 20px; padding: 10px; border: none; border-radius: 5px; background-color: #f90; background-image: linear-gradient(to bottom, #f90, #f60); color: #fff; font-size: 18px; cursor: pointer; box-shadow: 0 2px 2px rgba(0,0,0,0.2);}input[type="submit"]:hover { background-image: linear-gradient(to bottom, #f60, #f90);}合并以上代码
以下是整合后的完整代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>嵌入式设备登录</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<img src="background.jpg" class="background">
<h1>设备登录</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
<style>
body {
background-color: #f2f2f2;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
padding: 50px;
border-radius: 10px;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
filter: blur(5px);
}
h1 {
margin: 0 0 30px;
padding: 0;
font-size: 28px;
text-align: center;
color: #333;
text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 10px;
font-size: 18px;
color: #333;
text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}
input[type="text"],
input[type="password"] {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #f2f2f2;
color: #333;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
input[type="submit"] {
margin-top: 20px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #f90;
background-image: linear-gradient(to bottom, #f90, #f60);
color: #fff;
font-size: 18px;
cursor: pointer;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
input[type="submit"]:hover {
background-image: linear-gradient(to bottom, #f60, #f90);
}
</style>
```
阅读全文