Question

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

Answer 1

您需要为元素提供一个ID，以便您可以通过它来引用它们。此外，任何动态添加的行都无法以这种方式访问;这是因为它们在控制树中不作为服务器控件存在，而是纯客户端控件。您必须使用Request.Form集合访问这些内容。如果您希望它们在回发中保持不变，则必须将它们动态添加到控制树中。

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

Answer 2

我的建议是重新思考你是如何收集数据的。我假设您将使用HTTP POST或类似内容将此信息发送到您的服务器{ - 1}}并且在服务器端，您希望获取所有实例$.ajax()，Title和Artist字段，按行分组。

不是回发表，这是一组显示数据但不代表数据的UI元素，而是考虑回发到服务器并让服务器期望Album 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]的{{1}}的一部分，位于索引IEnumerable。当您的Songs脚本转到并添加新行时，您只需递增索引即可。所以 - 一个新的行将是这样的：

唯一的技巧是确保您的索引中永远不会有间隙。 I.E. - 如果您有5行，并且删除了第3行，则需要重新索引第4行和第5行（通过递减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>，您可能会发现使用[#]简单地解析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 }); });，其中有一个包含表中歌曲数据的有效负载 - 无需担心时髦的数据绑定语法或索引。

希望这有帮助。

如何在表行中获取所有HtmlInputText控件？

2 个答案: