从Codebehind ASP Net中的动态输入文本html获取价值

时间:2019-01-01 21:27:00

标签: javascript asp.net

这是基于用户输入生成的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();
    }
})

});

这是到目前为止我在代码隐藏中测试的内容,它返回null。

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

        }
        else
        {

        }
    }

我做过类似的事情,但是都是在服务器端使用中继器,但是我想在客户端这样做,因为生成字段的速度更快。我也在主页上的表单中添加了method =“ POST”,但没有帮助

编辑:

我还添加了名称属性,但仍然获得空值

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

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

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

我也尝试使用javascript获取输入值,并且它们确实出现在其中,即使在表单内部也是如此,这很奇怪为什么在代码隐藏中不会发生...也许我必须通过ID或其他方式访问表单?

EDIT2:

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

1 个答案:

答案 0 :(得分:0)

我设法解决了问题,但花了点时间才找出原因。显然,您需要一个可以在服务器端呈现的容器,例如已经在页面上声明过的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');
    }
})

});

使用表并指向表体是很重要的,因为jquery选择器会注入html,因为直接在TableBody部分执行此操作只会在一行中添加一行。

现在我可以获取这些值

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

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