表格/嵌套（？）JSON集合，然后在服務器端訪問它
[英]Tabular/nested(?) JSON collection and then accessing it on the server-side
問題描述
我有一個動態生成的HTML表，它看起來像這樣：
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Tel</th>
</tr>
</thead>
<tbody>
<tr id="11">
<td><input id="txt1" name="txt1" class="gridinput" type="text" field="FirstName" value="A" /></td>
<td><input id="txt2" name="txt2" class="gridinput" type="text" field="LastName" value="B" /></td>
<td><input id="txt3" name="txt3" class="gridinput" type="text" field="Tel" value="C" /></td>
</tr>
</tbody>
</table>
我想迭代並將每個表行作為項目存儲在JSON對象中，然后使用AJAX將其傳遞給服務器。 我已經能夠存儲和傳遞每個單獨的輸入。 （對不起，以下是我所能做到的簡潔）：
JavaScript函數：
function SaveData() {
var gridInputs = {
items: [
{ field: "", val: "" }
]
};
$('.gridinput').each(function () {
gridInputs.items.push({
field: $(this).attr('field'),
val: $(this).val()
});
});
// send 'JSON.stringify(gridInputs)' to the server
}
模型：
public class GridInputRoot
{
public List<GridInput> items { get; set; }
}
public class GridInput
{
public string field { get; set; }
public string val { get; set; }
}
Web服務方法：
[WebMethod(true)]
public void SaveData(string gridInputsJson)
{
GridInputRoot gridInputs = JsonConvert.DeserializeObject<GridInputRoot>(gridInputsJson);
foreach (var item in gridInputs.items)
{
string field = item.field;
string val = item.val;
// etc
}
}
如何更改此解決方案，以便遍歷服務器端的每一行而不是每個單元格？ 我最終得到的任何集合中的鍵顯然都是唯一的-這將是tr的'id'屬性
（我曾考慮過使用LINQ對項目進行分組等，但是有一些原因使它不理想）
3 個解決方案
解決方案1
1 2015-05-14 21:47:41
好的，更好地創建數組，如下所示：
var result=new Array();
$('tr:has(input[field])').each(function () {
var row={};
$('input[field]',this).each(function(){
row[$(this).attr('field')]=$(this).val();
});
result.push(row);
});
C＃看起來像這樣：
[WebMethod(true)]
public void SaveData(string gridInputsJson)
{
GridInputRoot grid = JsonConvert.DeserializeObject<GridInputRoot>(gridInputsJson);
foreach (var row in grid)
{
// Your row.
Console.Write("First Name:{0}",row.FirstName);
Console.Write("Last Name:{0}",row.LastName);
Console.Write("Telephone:{0}",row.Tel);
}
}
解決方案2
1 2015-05-14 21:57:15
我的方法是簡單地逐行工作：
/**
* Approach: Resulting Data structure.
*/
var example = [
{
id: 11, // The row ID
columns: [
{field: 'FirstName', value: 'A'} // A column in the row.
]
}
];
/**
* Approach: Implementation.
*/
var rows = $('tr');
var table = [];
rows.each(function () {
var columns = this.children('td');
table.push({
id: this.id,
columns: columns.map(function () {
return {field: this.attr('field'), value: this.attr('value')};
})
});
});
現在，在您的后端代碼中：
[WebMethod(true)]
public void SaveData(string gridInputsJson)
{
GridInputRoot grid = JsonConvert.DeserializeObject<GridInputRoot>(gridInputsJson);
foreach (var item in grid)
{
// Your row.
foreach (var column in item.columns) {
// Your column.
string field = column.field;
string val = column.val;
}
}
}
我的C＃生銹了，但我們希望可以為您提供足夠的幫助。
解決方案3
0 2015-05-14 23:08:47
這只是Trey Cordova很好的解決方案的附錄，似乎很好用。 我只是想知道jQuery部分是否可能以其他方式編寫。 下面的示例按行分組，並且還使用“屬性”對象序列化所有輸入。
這是有趣的一點：
$.each(this.attributes, function() { /* do stuff */ });
運行代碼片段以查看到服務器的json輸出：
<html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <table> <tr> <td><input data-field="keyA1" value="A1"></td> <td><input data-field="keyB2" value="B2"></td> <td><input data-field="keyC3" value="C3"></td> <td><input data-field="keyD4" value="D4"></td> <td><input data-field="keyE5" value="E5"></td> </tr> <tr> <td><input data-field="keyF1" value="F1"></td> <td><input data-field="keyG2" value="G2"></td> <td><input data-field="keyH3" value="H3"></td> <td><input data-field="keyI4" value="I4"></td> <td><input data-field="keyJ5" value="J5"></td> </tr> </table> json output: <xmp id="stdout"></xmp> <script type="text/javascript"> var rows = []; $('TR').each( function() { var cells = []; $('TD INPUT', this).each( function() { var attr = {}; $.each(this.attributes, function() { attr[this.name] = this.value; }); cells.push( attr ); }); rows.push( cells ); }); // send to server here (not shown) document.getElementById('stdout').innerHTML = JSON.stringify( rows, null, ' '); </script> </body> </html>
用客戶端訪問和設置服務器端變量的方式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.