如何獲取錶行中的所有HtmlInputText控件？

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

我的建議是重新考慮你如何收集數據。我假設你將使用$.ajax()或類似的東西來爲你的服務器執行一個HTTP POST這個信息 - 並且在服務器端，你想獲得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]符號表示該元素是的一部分的電話號碼爲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> 

唯一的技巧是確保你永遠不會在你的索引中有空白。 I.E. - 如果您有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具有包含在表中的歌曲數據的有效載荷 - 而不必擔心時髦的數據綁定語法或索引。

希望這會有所幫助。