获取 HTML Table 内容到 MVC 控制器
Get HTML Table content to MVC Controller
UPDATE BOTTOM OF THIS POST
我有一个 HTML table 看起来像:
<table class="table table-hover" id="selectedProductsForContract">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-8">
<p>Product name</p>
</td>
<td class="col-md-1">
<input type="number" class="form-control" value="1">
</td>
<td class="col-md-2">
<button type="button" class="btn btn-danger">
Remove
</button>
</td>
</tr>
</tbody>
</table>
我打算在选择时用列表框中的值动态填充。我正在使用 @Html.ListBox()
生成列表框
@Html.ListBox("allProducts", allProductsForSupplier, new { ID = "allProductsListbox", @class = "form-control", @onclick = "AddSelectedProductToTable()" })
列表框的 onclick
事件如下所示:
<script>
function AddSelectedProductToTable() {
var selectedProduct = $("#allProductsListbox option:selected").text();
$("#selectedProductsForContract").find('tbody')
.append($('<tr>' +
'<td class="col-md-8"><p>' + selectedProduct + '</p></td>' +
'<td class="col-md-1"> <input type="number" class="form-control" value="1"> </td>' +
'<td class="col-md-2"> <button type="button" class="btn btn-danger" onclick="RemoveSelectedProductFromTable(this)"> Remove </button > </td>' +
'</tr>'));
}
</script>
这正是我想要的,并产生以下结果:
填充 table 后,我需要 POST 将选择的产品名称和数量返回服务器。
我尝试了几种方法,但最接近的是使用以下方法:
<script type="text/javascript">
$(function () {
$("#btnInsert").click(function () {
var itemlist = [];
//get cell values, instead of the header text.
$("table tr:not(:first)").each(function () {
var tdlist = $(this).find("td");
var Item = { ID: $(tdlist[0]).html(), Name: $(tdlist[1]).html() };
itemlist.push(Item);
})
$.ajax({
url: '@Url.Action("InsertValue", "Contract")', //
dataType: "json",
data: JSON.stringify({ itemlist: itemlist }),
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (result) {
alert("success");
},
error: function (xhr) {
alert("error");
}
});
});
});
</script>
哪个 POST 返回到以下控制器:
[HttpPost]
public JsonResult InsertValue(Item[] itemlist)
{
foreach (var i in itemlist)
{
//loop through the array and insert value into database.
}
return Json("Ok");
}
并产生以下输出:
我认为有比我现在正在做的更好的方法,但我有点迷失在这里,我认为用正则表达式或字符串操作解析 HTML 不是这里的答案...
任何人都可以 suggest/guide 我以一种体面的方式做我想做的事吗?
有问题请追问
亲切的问候!
更新
感谢@Adyson,我已将 AddSelectedProductToTable() 更改为以下内容:
$("table tr:not(:first)").each(function () {
var tdlist = $(this).find("td");
var input = $(tdlist[1]).find("input");
var Item = { ID: $(tdlist[0]).text(), Name: $(input[0]).val() };
itemlist.push(Item);
})
其中添加了var input = $(tdlist[1]).find("input");
,我需要将这部分的text()更改为val() : Name: $(input[0]).val()
以便能够检索值。
非常感谢阿迪森!
不是 post返回 HTML 的片段,而是 post 返回 HTML.
中的值
您可以使用 jQuery 提取那些,例如使用 .text()
获取 td
中的文本(而不是 .html()
),或使用 .val()
获取输入字段中的值(它本身位于另一个 td
,当然)。
使用专为此目的设计的 jQuery 在客户端解析值比在服务器上尝试解析要容易得多。而且你也不要来回发送毫无意义的额外 HTML 标记。
P.S。 var tb = $(tdlist[1]).find("input")
之类的东西应该让你的文本框(假设它在你的行的索引 1 内)。然后你可以使用tb.val()
提取输入框中的值。
UPDATE BOTTOM OF THIS POST
我有一个 HTML table 看起来像:
<table class="table table-hover" id="selectedProductsForContract">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-8">
<p>Product name</p>
</td>
<td class="col-md-1">
<input type="number" class="form-control" value="1">
</td>
<td class="col-md-2">
<button type="button" class="btn btn-danger">
Remove
</button>
</td>
</tr>
</tbody>
</table>
我打算在选择时用列表框中的值动态填充。我正在使用 @Html.ListBox()
@Html.ListBox("allProducts", allProductsForSupplier, new { ID = "allProductsListbox", @class = "form-control", @onclick = "AddSelectedProductToTable()" })
列表框的 onclick
事件如下所示:
<script>
function AddSelectedProductToTable() {
var selectedProduct = $("#allProductsListbox option:selected").text();
$("#selectedProductsForContract").find('tbody')
.append($('<tr>' +
'<td class="col-md-8"><p>' + selectedProduct + '</p></td>' +
'<td class="col-md-1"> <input type="number" class="form-control" value="1"> </td>' +
'<td class="col-md-2"> <button type="button" class="btn btn-danger" onclick="RemoveSelectedProductFromTable(this)"> Remove </button > </td>' +
'</tr>'));
}
</script>
这正是我想要的,并产生以下结果:
填充 table 后,我需要 POST 将选择的产品名称和数量返回服务器。
我尝试了几种方法,但最接近的是使用以下方法:
<script type="text/javascript">
$(function () {
$("#btnInsert").click(function () {
var itemlist = [];
//get cell values, instead of the header text.
$("table tr:not(:first)").each(function () {
var tdlist = $(this).find("td");
var Item = { ID: $(tdlist[0]).html(), Name: $(tdlist[1]).html() };
itemlist.push(Item);
})
$.ajax({
url: '@Url.Action("InsertValue", "Contract")', //
dataType: "json",
data: JSON.stringify({ itemlist: itemlist }),
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (result) {
alert("success");
},
error: function (xhr) {
alert("error");
}
});
});
});
</script>
哪个 POST 返回到以下控制器:
[HttpPost]
public JsonResult InsertValue(Item[] itemlist)
{
foreach (var i in itemlist)
{
//loop through the array and insert value into database.
}
return Json("Ok");
}
并产生以下输出:
我认为有比我现在正在做的更好的方法,但我有点迷失在这里,我认为用正则表达式或字符串操作解析 HTML 不是这里的答案...
任何人都可以 suggest/guide 我以一种体面的方式做我想做的事吗? 有问题请追问
亲切的问候!
更新 感谢@Adyson,我已将 AddSelectedProductToTable() 更改为以下内容:
$("table tr:not(:first)").each(function () {
var tdlist = $(this).find("td");
var input = $(tdlist[1]).find("input");
var Item = { ID: $(tdlist[0]).text(), Name: $(input[0]).val() };
itemlist.push(Item);
})
其中添加了var input = $(tdlist[1]).find("input");
,我需要将这部分的text()更改为val() : Name: $(input[0]).val()
以便能够检索值。
非常感谢阿迪森!
不是 post返回 HTML 的片段,而是 post 返回 HTML.
中的值您可以使用 jQuery 提取那些,例如使用 .text()
获取 td
中的文本(而不是 .html()
),或使用 .val()
获取输入字段中的值(它本身位于另一个 td
,当然)。
使用专为此目的设计的 jQuery 在客户端解析值比在服务器上尝试解析要容易得多。而且你也不要来回发送毫无意义的额外 HTML 标记。
P.S。 var tb = $(tdlist[1]).find("input")
之类的东西应该让你的文本框(假设它在你的行的索引 1 内)。然后你可以使用tb.val()
提取输入框中的值。