VOVOLQ 2021-10-15 02:39 采纳率: 50%
浏览 68
已结题

.net如何使得点击button不刷新页面又更新数据

一个小程序,选择下拉项之后Label会显示和选项一样的数据,点击清除会清除两者的数据,同时下方的表格会记录操作。
问题是,每次点击清除和选择下拉之后,表格中的数据仅仅一闪而过,随后就变为了空白,如果把下拉栏的autoPushBack关闭并且按钮变为input方式布置,这时候表中数据会一直存留,但“选择下拉项之后Label会显示和选项一样的数据,点击清除会清除两者的数据” 这个功能完全失效。
请问有什么办法解决,如果可以请尽可能详细一点,谢谢!

img


我是.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 = "";
       
    }
}

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2021-10-15 14:02
    关注

    题主这个功能不需要服务器端方法,用的话需要结合scriptmanger,这样才能无刷新更新dom对象,不过就题主这个效果上完全没必要scriptmanger,除非要无刷新保存操作记录数据到服务器。用服务器端方法会刷新页面,导致js生成的内容全部没有了。

    以下为js实现的效果,不需要和服务端通信刷新,有帮助或启发麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~

    img

     <%@ 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>
     
    
    

    scriptmanger参考

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 10月23日
  • 已采纳回答 10月15日
  • 创建了问题 10月15日

悬赏问题

  • ¥15 有人懂怎么做大模型的客服系统吗?卡住了卡住了
  • ¥20 firefly-rk3399上启动卡住了
  • ¥15 如何删除这个虚拟音频
  • ¥50 hyper默认的default switch
  • ¥15 网站打不开,提示502 Bad Gateway
  • ¥20 基于MATLAB的绝热压缩空气储能系统代码咨询
  • ¥15 R语言建立随机森林模型出现的问题
  • ¥15 中级微观经济学,生产可能性边界问题
  • ¥15 TCP传输时不同网卡传输用时差异过大
  • ¥15 请各位看看我写的属于什么算法,或者有更正确的写法?