2

小さなプレイリストを作成するための Web ページを作成しようとしています。データがフィールドに入力されたら、XML ファイルに保存する必要があります。現在、表は次のようになっています。

<%-- song list table --%>
<table runat="server" id="table" class="table">

<%-- info row --%>
<thead>
 <tr>    
  <td>Song Title</td>
  <td>Song Artist</td>
  <td>Song Album</td>
  <td><%-- column for delete button --%></td>
 </tr>
</thead>

<%-- input rows --%>
<tbody>
 <tr>
  <td><input runat="server" placeholder="Title" type="text" /></td>
  <td><input runat="server" placeholder="Artist" type="text" /></td>
  <td><input runat="server" placeholder="Album" type="text" /></td>

  <td>
   <a href="#">
    <img src="Images/Delete.png" onmouseover="this.src='Images/Delete-Hover.png'" onmouseout="this.src='Images/Delete.png'" alt="Delete" />
   </a>
  </td>
 </tr>
</tbody>

</table>

新しい行は jQuery で動的に追加されます。ユーザーが [保存] をクリックしたら、テーブル データを特定の XML ファイルに書き込む必要があります。現在、私のバックエンド コードは次のようになっています。

//for each row
foreach (HtmlTableRow row in table.Rows)
{
 //create row info
 textWriter.WriteStartElement("Row");

 //for each cell
 foreach (HtmlTableCell element in row.Cells)
 {
  //get inputs

  //write current input to xml
 }

 //close row
 textWriter.WriteEndElement();
}

私の質問は、各入力の値を取得して XML に書き込むことができるように、コードを使用してそこからどこへ行くかです。

4

2 に答える 2

1

私の提案は、データをどのように収集しているかを再考することです。HTTP POSTこの情報を使用してサーバーに実行させるか、または同様のものを使用することを想定しています。サーバー側では、行ごとにグループ化された、およびフィールド$.ajax()のすべてのインスタンスを取得する必要があります。TitleArtistAlbum

データを表示するがデータを表さないUI要素のセットであるテーブルをポストバックする代わりに、サーバーにポストバックし、サーバーIEnumerableにSongオブジェクトのを期待させることを検討してください。これは次のようになります。

public class Song {
    public String Album { get; set; }
    public String Artist { get; set; }
    public String Title { get; set; }
}

これで、フォーム自体をバインドするときに、次のようなものをバインドできます。

<table>
 <thead>
  <tr>    
   <td>Song Title</td>
   <td>Song Artist</td>
   <td>Song Album</td>
   <td><%-- column for delete button --%></td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><input placeholder="Title" type="text" name="Songs[0].Title" /></td>
   <td><input placeholder="Title" type="text" name="Songs[0].Artist" /></td>
   <td><input placeholder="Title" type="text" name="Songs[0].Album" /></td>
  </tr>
 </tbody>
</table>

この[0]表記は、この要素がIEnumerable呼び出されたの一部でSongsあり、インデックスにあることを示しています0。次に、jQueryスクリプトが実行されて新しい行が追加されると、インデックスをインクリメントするだけです。つまり、新しい行は次のようになります。

 <tr>
  <td><input placeholder="Title" type="text" name="Songs[1].Title" /></td>
  <td><input placeholder="Title" type="text" name="Songs[1].Artist" /></td>
  <td><input placeholder="Title" type="text" name="Songs[1].Album" /></td>
 </tr>

これに対する唯一の秘訣は、インデックスにギャップがないことを確認することです。IE-5行あり、3行目を削除した場合は、行4と5のインデックスを再作成する必要があります（値をデクリメントし[#]ます）。

注：上記のすべては、サーバー側のバインディングを使用していることを前提としています。

すでにを使用している場合は、の要素jQueryを単純に解析して、直接制御できるオブジェクトとして投稿する方が簡単な場合もあります。これにより、インデックス作成をまったく行う必要がなくなります。例は次のようになります。tableinputjQuery

$('#submit-button').on('click', function (ev) {
    var songs = [];
    $('#table > tbody > tr').each(function (index, element) {
        var $tr = $(element);

        var album = $tr.find('input[placeholder=Album]').val();
        var artist = $tr.find('input[placeholder=Artist]').val();
        var title = $tr.find('input[placeholder=title]').val();

        songs.push({ Album: album, Artist: artist, Title: title });
    });

    $.ajax({
        url: '/my/post/url',
        type: 'POST',
        data: songs
    });
});

サーバー側では、ファンキーなデータバインディング構文やインデックス作成について心配することなく、テーブル内の曲データを含むペイロードを持つHTTP POSTtoを受け取るようになります。/my/post/url

お役に立てれば。

于 2012-12-11T21:27:15.337 に答える
1

要素を参照できるように、要素の ID を指定する必要があります。また、動的に追加された行には、この方法でアクセスできません。これは、サーバー コントロールとしてコントロール ツリーに存在するのではなく、純粋なクライアント コントロールであるためです。Request.Formコレクションを使用してこれらにアクセスする必要があります。ポストバック間でも保持する場合は、それらをコントロール ツリーに動的に追加する必要があります。

JQuery を使用している場合は、クライアントですべての値を取得し、その値を Web サービスなどに送信する方が効率的で簡単です。

于 2012-12-11T21:14:38.233 に答える