0

私は作成しようとしています:

  1. 2 つのテキスト ボックス (「アイテム」と「金額」) と「追加」ボタンをロードするフォーム。

  2. 「追加」ボタンをクリックするたびに、最初のテキスト ボックスと同じテキスト ボックスの別のセットが追加されます。

  3. テキストボックスは、「追加」ボタンがクリックされたときに入力されたものを保持する必要があります。

これを行う最善の方法は何ですか？私はさまざまなことを試してきましたが、どれも完全に機能していません。

4

1 に答える 1

1

WinフォームとWebページの両方で、このようなことを数回行う必要がありました。残念ながら、Web ページでは、win フォームほど簡単ではありません。JQuery の実装が世の中にあると確信していますが、私が過去に行った方法は、リピーターを使用することです。

アイテム コマンド イベントの処理は少しトリッキーですが、できるだけ簡潔にしようと思います。この特定のプロジェクトのちょっとした背景は、人々が自分の Web ページにあるリンクを編集できるインターフェイスを思いついたことです。元のリピーターにはもっと多くのコントロールが含まれていますが、スペースを取りすぎないようにスリムにしました。

まず、リピーターの宣言は簡単です。

<asp:Repeater ID="rptLinks" runat="server">
    <HeaderTemplate>
        <table style="width:99%; text-align:center; margin-left:auto; margin-right:auto"><tr>
                <td style="width:15%;"><asp:Label ID="lblDisplayName" runat="server" Text="Display Name:"></asp:Label></td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td style="width:15%;"><asp:TextBox ID="txtLinkDisplayName" runat="server" Width="95%" Text='<%#Bind("Name") %>'></asp:TextBox></td>
            <td style="width:5%;"><asp:Button ID="btnLinkSave" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/Save_16.png')" ToolTip="Update Link" CommandName="Update" CommandArgument='<%#Eval("Customer_Link_ID") %>' /></td>
            <td style="width:5%;"><asp:Button ID="btnLinkClear" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/Cancel_16.png')" ToolTip="Delete Link" CommandName="Delete" CommandArgument='<%#Eval("Customer_Link_ID") %>'/></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
            <tr>
                <td style="width:15%;"><asp:TextBox ID="txtLinkDisplayName" runat="server" Width="95%"></asp:TextBox></td>
                <td style="width:5%;"><asp:Button ID="btnLinkNew" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/Add_16.png')" ToolTip="Save New Link" CommandName="New" /></td>
                <td style="width:5%;"><asp:Button ID="btnLinkCancel" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/close_16.png')" ToolTip="Clear" CommandName="Clear" /></td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

基本的にこれでできることは、リピーター用のテンプレートを作成することだけです。ヘッダー部分はテーブルを開始し、単一のラベルを含みます。項目テンプレートは、リピーターにバインドされたデータを表示するために使用されるものです。この場合のテキストは、サーバー側インクルードを使用してバインドされ、「Bind」関数の値は、リピーターにバインドされるテーブルの列と正確に一致する必要があります。この場合のフッターは、新しいエントリが入力される場所であり、テーブル タグも閉じます。テンプレートとフッターの両方に 2 つのボタンが含まれています。CommandName の値は、後でサーバー側で使用されるため、それに応じて設定されることに注意することが重要です。

したがって、クライアント側の設定がすべて完了したら、サーバーでアイテム コマンド イベントを処理する必要があります。私はこのように私の機能を設定しました：

    Private Sub rptLinks_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.RepeaterCommandEventArgs) Handles rptLinks.ItemCommand
    Try
        'This clears the datasource because if I didn't do this I was getting weird behavior.
        rptLinks.DataSource = Nothing
        rptLinks.DataBind()
        Select Case e.CommandName
            Case "New"
                 'Do whatever you need to for a new record
            Case "Update"
                 'Do whatever you need to to update the record
            Case "Clear"
                 'Clear the controls
            Case "Delete"
                 'Delete the link that is in this row
            Case Else
        End Select
        'rebind the repeater to the updated data.
        rptLinks.DataSource = LinksDatatable
        rptLinks.DataBind()
    Catch ex As Exception
    End Try
End Sub

これは、どのボタンがクリックされたかを判断する最も簡単な方法ですが、他にも方法があると確信しています。

処理する必要があるケースに入ると、最終的にはコントロールから値を取得する必要があります。その方法は次のとおりe.Item.FindControl("txtLinkDisplayName")です。私の場合、directcast() 呼び出し内でそのコードを使用し、必要に応じてコントロールをキャストして、操作を簡単にしました。

したがって、すべてが整ってデータバインドされ、各ケースを処理したら、準備が整います。

于 2013-01-04T20:09:06.253 に答える