1

2列を含むテーブルがあります。また、[行の追加] ボタンを使用して、ユーザーが 2 つのテキスト ボックスを含む新しい行を動的に追加できるようにします (サーバーにポストバックせずにパフォーマンスを向上させるために jJvascript を使用)。

ユーザーがキー入力したすべての値を取得し、データベースに保存したいと考えています。

私の問題は、サーバー側 (.aspx.cs ファイル内) でテーブルの値を取得できなかったことです。これは、テーブルが ではないため、テーブルのrunat="server"場合、runat="server"クライアント側で行を追加できなかったためです。

これを解決するためのアイデアはありますか、それとも別の方法がありますか?

以下は、「行の追加」のコードです。

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        if (rowCount > 10) {
            alert("Only 10 rows allow");
            return false;
        }  

        var cell1 = row.insertCell(0);
        cell1.innerHTML = rowCount;

        var cell2 = row.insertCell(1);
        var element1 = document.createElement("input");
        element1.type = "text";
        element1.name = "txtbox[]";
        element1.style = "width:345px;"
        cell2.appendChild(element1);

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "txtbox[]";
        element2.style = "width:345px;"
        cell3.appendChild(element2);
    }

これはテーブルのコードです

<table id="tblAddNode" width="750px" border="1">
            <tr>
                <th width="10px">No.</th>
                <th width="350px">Description</th>
                <th width="350px"> Keyword </th>
             </tr>
             <tr>
                <td width="10px">1</td>
                <td width="350px"> <input type="text" style="width:345px;"/> </td>
                <td width="350px"> <input type="text" style="width:345px;"/> </td>
             </tr>
        </table>

編集 された行追加ボタン

input type="button" value="Add Row" onclientclick="addRow('tblAddNode')"

送信ボタン

<asp:Button ID="EnterRootNodeButton" runat="server" Text="OK" OnClick="EnterRootNode_Click"/>
4

1 に答える 1

2

runat="server" とマークすると、クライアント側で情報を操作できないと考える理由がわかりませんが、その後 Id が変更されるということですか?

ClientIDMode="Static" を追加するか、JavaScript で ID を参照する代わりに、ClientID を参照することで、ID を静的としてマークできます。

また、それを行う方法は複数あり、ソリューションの設計方法と問題に費やす時間によって異なります。

ユーザー入力情報を使用してajaxの呼び出しを発行し、それをAPIに投稿できます（開発する必要があります）。ユーザーが追加したすべての情報が保存されます。

また、すべての情報を公開する別の API を使用して、情報を再読み込みできるようにすることもできます (将来必要になった場合)。

これを行うと UI エクスペリエンスが向上しますが、Ajax と Web サービスの設計に慣れていない場合は、もちろん時間がかかります。

于 2013-09-30T00:17:48.003 に答える