.net如何使得点击button不刷新页面又更新数据
问题描述：
一个小程序，选择下拉项之后Label会显示和选项一样的数据，点击清除会清除两者的数据，同时下方的表格会记录操作。
问题是，每次点击清除和选择下拉之后，表格中的数据仅仅一闪而过，随后就变为了空白，如果把下拉栏的autoPushBack关闭并且按钮变为input方式布置，这时候表中数据会一直存留，但“选择下拉项之后Label会显示和选项一样的数据，点击清除会清除两者的数据” 这个功能完全失效。
请问有什么办法解决，如果可以请尽可能详细一点，谢谢！
我是.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 type="text/javascript" language="javascript">
function left()
{
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var t = new Date();
var h = t.getHours();
var m = t.getMinutes();
var s = t.getSeconds();
var time = h + ((m < 10) ? ":0" : ":") + m + ((s < 10) ? ":0" : ":") + s + ((h > 12) ? ".pm" : ".am");
td1.innerHTML = time;
td2.innerHTML = "点击了清除";
document.getElementById("mytable").appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
}
function right() {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var t = new Date();
var h = t.getHours();
var m = t.getMinutes();
var s = t.getSeconds();
var time = h + ((m < 10) ? ":0" : ":") + m + ((s < 10) ? ":0" : ":") + s + ((h > 12) ? ".pm" : ".am");
td1.innerHTML = time;
td2.innerHTML = "点击了下拉";
document.getElementById("mytable").appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
}
</script>
<style type="text/css">
.auto-style1 {
margin-bottom: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:DropDownList ID="xiala" runat="server" Height="63px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
Width="134px"
AutoPostBack="True"
CssClass="auto-style1">
<asp:ListItem></asp:ListItem>
<asp:ListItem>345345</asp:ListItem>
<asp:ListItem>32321</asp:ListItem>
<asp:ListItem>123123</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label ID="Label1" runat="server" Text="" > </asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="清除" OnClick="Button1_Click" />
<%--<input type="button" id="Button2" runat="server" value="Очистить" onclick="Button1_Click" /><br />--%>
<br />
<div>
<table border="1" id="mytable">
<tr><td><asp:Label ID="Label3" runat="server" Text="时间"> </asp:Label></td>
<td><asp:Label ID="Label2" runat="server" Text="行为"> </asp:Label></td></tr>
</table>
</div>
</form>
</body>
</html>
我是.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes["onclick"] = "left()";
xiala.Attributes ["onclick"] = "right()";
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = xiala.Text;
}
protected void Button1_Click(object sender, EventArgs e)
{
xiala.Text = "";
Label1.Text = "";
}
}
答
题主这个功能不需要服务器端方法，用的话需要结合scriptmanger，这样才能无刷新更新dom对象，不过就题主这个效果上完全没必要scriptmanger，除非要无刷新保存操作记录数据到服务器。用服务器端方法会刷新页面，导致js生成的内容全部没有了。
以下为js实现的效果，不需要和服务端通信刷新,有帮助或启发麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~
<%@ Page Language="C#" AutoEventWireup="true"%>
<!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>
<style type="text/css">
.auto-style1 {
margin-bottom: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:DropDownList ID="xiala" runat="server" Height="63px" onclick="right()"
Width="134px"
CssClass="auto-style1">
<asp:ListItem></asp:ListItem>
<asp:ListItem>345345</asp:ListItem>
<asp:ListItem>32321</asp:ListItem>
<asp:ListItem>123123</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label ID="Label1" runat="server" Text="" > </asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="清除" OnClientClick="left();return ClearText()" />
<%--<input type="button" id="Button2" runat="server" value="Очистить" onclick="Button1_Click" /><br />--%>
<br />
<div>
<table border="1" id="mytable">
<tr><td><asp:Label ID="Label3" runat="server" Text="时间"> </asp:Label></td>
<td><asp:Label ID="Label2" runat="server" Text="行为"> </asp:Label></td></tr>
</table>
</div>
</form>
<script type="text/javascript" language="javascript">
function ClearText() {
document.getElementById('Label1').innerHTML = '';
document.getElementById('xiala').value = '';
return false;//由于asp:Button生成的按钮是submit会提交表单，所以用return false阻止表单提交，注意绑定的事件也需要return ClearText()返回false
}
document.getElementById('xiala').onchange = function () {//添加下拉框change事件更新Label的内容
document.getElementById('Label1').innerHTML = this.value;
}
function left() {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var t = new Date();
var h = t.getHours();
var m = t.getMinutes();
var s = t.getSeconds();
var time = h + ((m < 10) ? ":0" : ":") + m + ((s < 10) ? ":0" : ":") + s + ((h > 12) ? ".pm" : ".am");
td1.innerHTML = time;
td2.innerHTML = "点击了清除";
document.getElementById("mytable").appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
}
function right() {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var t = new Date();
var h = t.getHours();
var m = t.getMinutes();
var s = t.getSeconds();
var time = h + ((m < 10) ? ":0" : ":") + m + ((s < 10) ? ":0" : ":") + s + ((h > 12) ? ".pm" : ".am");
td1.innerHTML = time;
td2.innerHTML = "点击了下拉";
document.getElementById("mytable").appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
}
</script>
</body>
</html>
答
使用Ajax技术，异步或同步通信，可以实现局部刷新功能。
答
如果不涉及到数据库操作，要么这个功能完全前端实现（完全用JavaScript实现），要么完全后端实现（C#的方法）