如何在回发时保存动态html输入数据?

时间:2019-01-06 13:13:39

标签: javascript c# jquery asp.net

当您输入数字时,我会有一个文本框,它会生成一个表,每行3个文本框。像这样

Dynamic input 这是它的产生方式

$(function () {

$("[id*=txtNumComponentes]").keyup(function () {

    debugger
    var ComponentesTable = $('.ComponentesContainer');

    $('.ComponentesContainer > tbody').empty();
    var txt = $("[id*=txtNumComponentes]").val();

    if (txt != "" || txt != 0) {

        ComponentesTable.removeClass('componentes-table-invisible');
        var table;

        for (var i = 0; i < txt; i++) {
            table += '<tr>' +
                '<td >' +
                (i + 1) +
                '</td>' +
                '<td>' +
                '<input type="text" runat="server" name="Componente' +
                (i + 1) +
                '" class="form-control form-control-sm rounded border border-dark" id="txtComponente' +
                (i + 1) +
                '" placeholder="Componente"/>' +
                '<asp:RequiredFieldValidator ID="rfvComponente' +
                (i + 1) +
                '" ControlToValidate="Componente' +
                (i + 1) +
                '" ValidationGroup="vgInformacaoInicial" ErrorMessage="Campo necessário." /> ' +
                '</td>' +
                '<td><input type="text" runat="server" name="Base' +
                (i + 1) +
                '" class="form-control form-control-sm rounded border border-dark" id="txtBase' +
                (i + 1) +
                '" placeholder="Base" /></td>' +
                '<td>' +
                '<div class="input-group input-group-sm">' +
                '<input type="text" runat="server" name="Comprimento' +
                (i + 1) +
                '" class="form-control form-control-sm rounded border border-dark" id="txtComprimento' +
                (i + 1) +
                '" placeholder="Comprimento" />' +
                '<div class="input-group-append">' +
                '<span class="input-group-text border border-dark text-dark"><strong>mm</strong></span>' +
                '</div>' +
                '</div>' +
                '</td>' +
                '</tr>';
        }

        $('.ComponentesContainer > tbody').append(table);
    } else {
        ComponentesTable.addClass('componentes-table-invisible');
    }
});
});

,这里是我如何读取数据。

Componente[] comp = new Componente[req.NumComponentes];

            for (int i = 0; i < req.NumComponentes; i++)
            {
                double comprimento;
                if (double.TryParse((Request.Form["Comprimento" + (i + 1)]), out comprimento))
                {
                    comp[i] = new Componente
                    {
                        ID = (i + 1),
                        NomeComponente = Request.Form["Componente" + (i + 1)],
                        Base = Request.Form["Base" + (i + 1)],
                        Comprimento = comprimento
                    };
                }
            }

            req.Componentes = comp;

和用于动态输入的容器

<asp:Table ID="tblComponentes" runat="server" Caption="Tabela de Componentes" Width="60%" CssClass="mx-auto componentes-table-invisible ComponentesContainer table table-bordered text-center" BorderColor="#212529" BorderWidth="2" BorderStyle="Solid" BackColor="#eaecf1" Style="min-width: 700px;">
    <asp:TableHeaderRow runat="server" CssClass="thead-dark" TableSection="TableHeader">
        <asp:TableHeaderCell Scope="Column" Width="5%" runat="server">#</asp:TableHeaderCell>
        <asp:TableHeaderCell Scope="Column" Width="25%" runat="server">Componente *</asp:TableHeaderCell>
        <asp:TableHeaderCell Scope="Column" Width="25%" runat="server">Base *</asp:TableHeaderCell>
        <asp:TableHeaderCell Scope="Column" Width="20%" runat="server">Comprimento *</asp:TableHeaderCell>
    </asp:TableHeaderRow>
    <asp:TableRow TableSection="TableBody" runat="server">
    </asp:TableRow>
</asp:Table>

我的问题是,当由于验证错误而发生回发时,表的内容将丢失,并且我不知道如何将其取回,因为它们都是纯HTML。

有没有办法在回发时保留表的内容?也许我应该用asp文本框替换输入内容?

编辑:

如果我打开javascript,似乎主要的问题实际上是在发回邮件后显示表格

0 个答案:

没有答案