0

3 つの部分で構成されるフォームを作成する必要があります。

  1. 「番号の追加」セクション
    ここでは、キーボードからいくつかの番号を入力します。これらの番号は、特定の形式を持ち、重複を除外する必要があります。フォーマットと重複の検証は、jquery 検証プラグインを介して行われます。
  2. "Numbers" セクション
    このセクションは 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

ラベル内で利用可能なデータを取得することはできません。できることは、各行のラベルとともに隠しフィールドを追加することです。この非表示フィールドにも、ラベルと同じ値が含まれます。次に、サーバー側で非表示フィールドの値を解析します。

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 に答える