【问题标题】:Get value from dynamic input text HTML in Codebehind asp net从 Codebehind asp net 中的动态输入文本 HTML 中获取值
【发布时间】:2021-08-19 13:47:26
【问题描述】:

这是根据用户输入生成的 HTML 表格。我正在尝试从输入中获取值,但没有运气。我什至在它们上面添加了runat="server" 标签,但什么也没有。

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

    $('#tblComponentesContainer').empty();
    var txt = $("[id*=txtNumComponentes]").val();
    debugger
    if (txt != "" || txt != 0) {
        var table = '<table id="tblComponentes" class="table table-bordered text-center mx-auto" style="width: 80%; background: #d9deed73; min-width:700px; border: 2px solid #212529;">' +
                                '<caption>Lista de componentes</caption>' +
                                '<thead class="thead-dark">' +
                                    '<tr>' +
                                        '<th scope="col" style="width:10px;">#</th>' +
                                        '<th scope="col" style="width:100px;">Componente *</th>' +
                                        '<th scope="col" style="width:100px;">Base *</th>' +
                                        '<th scope="col" style="width:175px;">Comprimento *</th>' +
                                    '</tr>' +
                                '</thead>' +
                                '<tbody>';



        for (var i = 0; i < txt; i++) {
            table += '<tr>' +
                         '<th scope="row">' + (i + 1) + '</th>' +
                         '<td><input type="text" runat="server" class="form-control form-control-sm rounded border border-dark" id="txtComponente' + (i + 1) + '" placeholder="Componente" style="width:200px;" /></td>' +
                         '<td><input type="text" runat="server" class="form-control form-control-sm rounded border border-dark" id="txtBase' + (i + 1) + '" placeholder="Base"  style="width:200px;" /></td>' +
                         '<td>' +
                            '<div class="input-group input-group-sm">' +
                                '<input type="text" runat="server" class="form-control form-control-sm rounded border border-dark" id="txtComprimento' + (i + 1) + '" placeholder="Comprimento"  style="width:50px;" />' +
                                '<div class="input-group-append">' +
                                    '<span class="input-group-text border border-dark text-dark"><strong>mm</strong></span>' +
                                '</div>' +
                            '</div>'
                         '</td>' +
                     '</tr>';
        }

        table += '</tbody>' +
                 '</table>';

        $('#tblComponentesContainer').html(table);
    }
    else
    {
        ('#tblComponentesContainer').html();
    }
})

});

这是我迄今为止在 Codebehind 上测试过的内容,它返回 null:

 protected void btnCriarArtigo_Click(object sender, EventArgs e)
    {
        if(Page.IsValid)
        {
            string n = Request.Form["txtComponente1"];

        }
        else
        {
           
        }
    }

我做过类似的事情,但都是在服务器端使用转发器,但我想在客户端做,因为生成字段更快。我也在母版页上的表单中添加了method="POST",但没有帮助。

编辑: 我还添加了 name 属性,但仍然得到 null 值:

string n = Request.Form["Componente1"];
            string a = Request.Form["Base1"];
            string b = Request.Form["Comprimento1"];

我只是在每个输入中添加了这样的名称

name="Base' + (i + 1) + '"

另外,我尝试使用 Javascript 获取输入值,它们确实出现在其中,甚至出现在表单中,所以奇怪的是为什么它不会在 Codebehind 上发生。也许我必须通过 ID 或其他方式访问表单?

编辑2: 这是另一个更新,我尝试在 div 周围创建一个面板,在该面板中生成带有输入字段的表。因此,虽然它不检测控制列表上的输入字段,但它只检测表标签。我想我必须以某种方式通过表格访问它们。

【问题讨论】:

  • 尝试将“name”属性放在输入元素中,我相信应该可以。
  • 更新了我的答案。我这样做了,但仍然为空。我什至在 usign debug 表单上都找不到它们

标签: javascript asp.net


【解决方案1】:

我设法解决了这个问题,但花了一点时间才弄清楚是什么原因。显然,您需要一个可以在服务器端呈现的容器,例如已经在页面上声明的 asp.net 表,这就是我所做的,而不是生成一个带有我认为无法检测到的 ID 的 HTML 表,并且在后面的代码中访问内部...

因此,如果有人像我一样尝试在表格中获取动态输入,这就是要走的路。

<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">
         // Dynamic content goes here
     </asp:TableRow>

</asp:Table>

这是用于生成带有输入字段的表格行和单元格的更改后的 Javascript 文件:

$(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"/></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');
    }
})
});

使用表格并将其指向 tbody 作为注入 HTML 的 jQuery 选择器很重要,因为直接在 TableBody 部分执行此操作只会在一行中添加一行。

现在我可以得到这些值:

string n = Request.Form["Componente1"];
string a = Request.Form["Base1"];
string b = Request.Form["Comprimento1"];

另外,如果表格没有数据,它将显示标题,因此只需使用display:none 创建一个类,然后在表格生成器字段上有输入时使用 jQuery 将其添加并删除。

【讨论】:

    猜你喜欢
    • 2015-05-10
    • 1970-01-01
    • 2011-09-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-15
    相关资源
    最近更新 更多