Question

我需要制作一个由3部分组成的表格：

“添加号码”部分
在这里，我从键盘输入一些数字他们应该有一定的格式并排除重复。格式和重复的验证将通过jquery验证插件完成。
“数字”部分
这部分是通过js动态填充的。如果“添加数字”部分中的数字有效，并且用户点击“添加”按钮，我们会在表格元素（标签和“删除”按钮）中添加一个带数字的行。它有最大尺寸 - 50个数字（或行，因为它是<table>）
提交按钮
在提交我们做回发我不明白的事情 - 如何使用服务器端的数字处理动态添加的标签

这是我为表格制作的草稿：

这是aspx布局：

<table>
    <tr>
        <td>
            <table id="AddPanel">
                <tr>
                    <th>AddNumber</th>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="txt1" runat="server" />
                    </td>
                </tr>..... .....</table>
        </td>
        <td>
            <asp:LinkButton ID="btnAdd" runat="server" OnClientClick="AddNumber();return false;">Add</asp:LinkButton>
        </td>
        <td>
            <table id="numberList">
                <tr>
                    <th>Numbers</th>
                </tr>
            </table>
        </td>
    </tr>
</table>
<asp:ImageButton ID="Submit" runat="server" onclick="btnSubmit_Click" />

这里是js代码：

function AddNumber() {
    $("#AddPanel input[type=text]")
        .filter(function () {
        return this.value.length !== 0;
    })
        .each(function () {

        // find table and insert row
        var table = document.getElementById('numberList');
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var lbl = document.createElement("label");
        lbl.innerHTML = this.value;
        cell1.appendChild(lbl);

        var cell2 = row.insertCell(1);
        var removeBtn = document.createElement("img");
        removeBtn.src = "imgs/Buttons/delete.png";
        removeBtn.title = "Remove";
        removeBtn.name = "Remove";
        removeBtn.onclick = function () {
            Remove(this);
            return false;
        };
        cell2.appendChild(removeBtn);
    });
    // clear all inputs
    $('#AddPanel').find('input:text').val('');
}

function Remove(src) {
    var oRow = src.parentElement.parentElement;

    //once the row reference is obtained, delete it passing in its rowIndex   
    document.all("numberList").deleteRow(oRow.rowIndex);
}

我知道代码很难看。您对如何改进它的意见将受到高度赞赏！

Answer 1

您无法在服务器端处理标签。通常在标签的同时添加隐藏输入，以便将数据发送到服务器端代码。

以下是您需要创建的示例隐藏输入：

<input type="hidden" name="number-field" value="234" />

这是一个JS小提琴示例http://jsfiddle.net/vmH7P/1/

在服务器端，您无需为输入命名。 ASP.NET将把它变成一个数组。您可以使用以下代码访问：

if(this.Request.Form["number-field"] != null)
{
    foreach(var numberString in this.Request.Form["number-field"])
    {
        int numberValue;
        if(int.TryParse(numberString, out numberValue))
        {
            processNumber(numberValue);
        }
    }
}

Answer 2

您无法获取标签内可用的数据。你可以做的是在每一行添加一个隐藏字段和标签。此隐藏字段还将包含与标签相同的值。然后在服务器端解析隐藏字段中的值。

var cell1 = row.insertCell(0);
var lbl = document.createElement("label");
var hf = document.createElement('input');
hf.setAttribute('type','hidden');
hf.setAttribute('name', 'hf'+rowCount);//this will create unique name for each hiddenfield
hf.setAttribute('value',this.value);
lbl .innerHTML = this.value;
cell1.appendChild(lbl );
cell1.appendChild(hf);

现在在服务器端，您将处理隐藏字段中的值。像这样的东西

for(int i=0;;i++)//considering your first row starts from 0
{
    if(Request["hf"+i] == null) break;
    string value = Request["hf"+i].ToString(); //process the value
}

如何通过服务器端的javascript控件动态添加进程

2 个答案: