2

我正在尝试创建一个网页来创建小型播放列表。将数据输入字段后，需要将其保存到 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

您需要为元素提供一个 ID，以便您可以参考它们。此外，任何动态添加的行都无法以这种方式访问​​；那是因为它们并不作为服务器控件存在于控件树中，而是纯粹的客户端控件。您必须使用Request.Form集合访问这些。如果您希望它们也能在回发中持续存在，则必须将它们动态添加到控制树中。

如果您使用的是 JQuery，那么获取客户端上的所有值并将值发送到 Web 服务或类似的东西会更高效、更容易。

于 2012-12-11T21:14:38.233 回答
1

我的建议是重新考虑如何收集数据。我假设您将让这些信息HTTP POST使用$.ajax()或类似的东西对您的服务器执行 - 在服务器端，您希望获取按行分组的Title,Artist和Album字段的所有实例。

与其回发表格（一组显示数据但不代表数据的 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 行，并且删除了第三行，则需要重新索引第 4 行和第 5 行（通过递减[#]值）。

注意：以上所有内容都假设您使用的是服务器端绑定。

如果您已经在使用jQuery，您可能还会发现简单地解析您table的input元素jQuery并将其发布为您可以直接控制的对象会更简单。这使您根本不必进行任何索引。一个例子是这样的：

$('#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 POST包含/my/post/url表中歌曲数据的有效负载 - 无需担心时髦的数据绑定语法或索引。

希望这可以帮助。

于 2012-12-11T21:27:15.337 回答