这是基于用户输入生成的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周围创建一个面板,在其中生成带有输入字段的表。因此,虽然它不检测控件列表中的输入字段,但仅检测表标签。我想我必须以某种方式通过表访问它们
答案 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将其删除