0

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

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

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

    形式

这是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);
}

我知道代码很难看。您对如何改进它的意见将不胜感激！

4

2 回答 2

0

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

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

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

这是一个 JS Fiddle 示例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);
        }
    }
}
于 2013-10-31T16:57:04.980 回答
0

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

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
}
于 2013-10-31T17:01:43.173 回答