如何将ASP.NET表单数据发送至另一页面作为历史记录？

核心实现思路 #

要完成两个核心目标：一是把表单提交的完整记录存入localStorage（而非单个输入框的实时值），二是让另一页面能读取这些记录并展示为可快速访问的历史列表。

原代码的不足 #

当前代码仅实现了单个文本框的实时本地存储，未处理下拉框的值，也没有把一次提交的所有字段作为一条完整记录保存，更缺少跨页面读取历史的逻辑。

分步修改与实现 #

1. 原表单页面修改：保存完整提交记录到localStorage #

修改按钮触发逻辑，阻止服务器回发（避免页面刷新丢失客户端状态），改用JavaScript处理提交：

<!-- 保留原表单结构，修改按钮为客户端事件触发 -->
<div>
    <label>Auditor</label>
    <asp:dropdownlist runat="server" id="ddlAuditor"></asp:dropdownlist>
</div>
<div>
    <label>Tablet</label>
    <asp:dropdownlist runat="server" id="ddlTablet"></asp:dropdownlist>
</div>
<div>
    <label>Bateria</label>
    <asp:TextBox ID="txtBateria" runat="server"></asp:TextBox>
</div>
<div>
    <label>Cargador </label>
    <asp:TextBox ID="txtCargador" runat="server"></asp:TextBox>
</div>
<div>
    <center>
        <!-- 替换ASP.NET按钮为普通按钮，绑定客户端点击事件 -->
        <button id="btnEnCarga" class="btn btn-green" style="font-size:large;">En carga</button>
        <button id="btnEnUso" class="btn btn-warning" style="font-size:large;">En uso</button>
    </center>
</div>

<table id="listado" class='hide'>
    <thead>
        <th>Auditor</th>
        <th>Tablet</th>
        <th>Movimiento</th>
        <th>Eliminar</th>
    </thead>
    <tbody>
    </tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // 页面加载时恢复表单输入状态
    window.addEventListener('load', () => {
        // 恢复文本框值
        document.querySelectorAll('input[type="text"]').forEach(input => {
            const savedVal = localStorage.getItem(input.id);
            if (savedVal) input.value = savedVal;
        });
        // 恢复下拉框值
        document.querySelectorAll('select').forEach(select => {
            const savedVal = localStorage.getItem(select.id);
            if (savedVal) select.value = savedVal;
        });
    });

    // 实时保存单个字段的输入值
    document.querySelectorAll('input[type="text"], select').forEach(el => {
        el.addEventListener('change', () => {
            localStorage.setItem(el.id, el.value);
        });
    });

    // 保存完整记录到localStorage的核心函数
    function saveRecord(movimiento) {
        // 获取所有表单字段值
        const auditor = document.getElementById('ddlAuditor').value;
        const tablet = document.getElementById('ddlTablet').value;
        const bateria = document.getElementById('txtBateria').value;
        const cargador = document.getElementById('txtCargador').value;

        // 构造记录对象，添加时间戳作为唯一标识
        const record = {
            id: Date.now(),
            auditor,
            tablet,
            bateria,
            cargador,
            movimiento,
            createTime: new Date().toLocaleString()
        };

        // 读取已有的历史记录数组，无数据则初始化空数组
        let historyRecords = JSON.parse(localStorage.getItem('auditHistory')) || [];
        // 添加新记录
        historyRecords.push(record);
        // 存回localStorage
        localStorage.setItem('auditHistory', JSON.stringify(historyRecords));

        // 显示成功提示
        Swal.fire({
            position: 'top-end',
            icon: 'success',
            title: 'Has guardado un registro',
            showConfirmButton: false,
            timer: 1500
        });

        // 清空表单及对应本地存储
        document.getElementById('ddlAuditor').value = '';
        document.getElementById('ddlTablet').value = '';
        document.getElementById('txtBateria').value = '';
        document.getElementById('txtCargador').value = '';
        ['ddlAuditor', 'ddlTablet', 'txtBateria', 'txtCargador'].forEach(key => localStorage.removeItem(key));
    }

    // 绑定按钮点击事件
    document.getElementById('btnEnCarga').addEventListener('click', () => saveRecord('En carga'));
    document.getElementById('btnEnUso').addEventListener('click', () => saveRecord('En uso'));
</script>

2. 历史记录页面：读取并展示localStorage中的记录 #

新建页面（如History.aspx），添加以下代码展示历史记录：

<h1>Historial de Registros</h1>
<table id="historyTable" border="1" cellpadding="8" cellspacing="0">
    <thead>
        <tr>
            <th>Auditor</th>
            <th>Tablet</th>
            <th>Bateria</th>
            <th>Cargador</th>
            <th>Movimiento</th>
            <th>Fecha</th>
            <th>Acción</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    // 页面加载时渲染历史记录
    window.addEventListener('load', renderHistory);

    function renderHistory() {
        const tbody = document.getElementById('historyTable').querySelector('tbody');
        tbody.innerHTML = ''; // 清空现有内容

        const historyRecords = JSON.parse(localStorage.getItem('auditHistory')) || [];
        // 按时间倒序排列，最新记录优先
        historyRecords.sort((a, b) => b.id - a.id);

        // 渲染每条记录到表格
        historyRecords.forEach(record => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${record.auditor}</td>
                <td>${record.tablet}</td>
                <td>${record.bateria}</td>
                <td>${record.cargador}</td>
                <td>${record.movimiento}</td>
                <td>${record.createTime}</td>
                <td><button onclick="deleteRecord(${record.id})">Eliminar</button></td>
            `;
            tbody.appendChild(tr);
        });
    }

    // 删除单条历史记录
    function deleteRecord(recordId) {
        let historyRecords = JSON.parse(localStorage.getItem('auditHistory')) || [];
        // 过滤掉目标记录
        historyRecords = historyRecords.filter(record => record.id !== recordId);
        localStorage.setItem('auditHistory', JSON.stringify(historyRecords));
        // 重新渲染列表
        renderHistory();
    }
</script>

关键注意点 #

• localStorage存储规则：仅支持字符串存储，需用JSON.stringify将对象数组转为字符串，读取时用JSON.parse解析。
• 避免页面回发：原ASP.NET按钮会触发页面刷新，改用普通按钮+客户端事件可保留客户端状态。
• 记录唯一标识：用时间戳Date.now()作为记录ID，方便删除和排序。
• 跨页面共享：localStorage为同源页面共享资源，同一域名下的历史页面可直接读取表单页面保存的记录。

内容的提问来源于stack exchange，提问作者Saza.P