通过Javascript向控制器发送数据

Question

我有一个html表在剃刀，我想通过Javascript从表发送一些数据到控制器。我尝试了几种不同的解决方案，但当警报被击中时，数据似乎从未到达我的控制器。控制器中的断点从未被击中，这表明数据无法到达控制器。

我想把@item.PartId的值和checked的值发送给控制器。

<div class="Table">
{
<table id="table1" class="table table-striped TableData">            
@{var id = 0;}
@foreach (var item in Model.PieceViewItems)
{
id++;
<tr id="@id">
<td>@id</td>
<td><label>@item.PartDescription</label> <br /> @item.PartId (@item.StatusCode)</td>
<td>@item.Supplier</td>
<td style="width: 100px !important">
@item.TijdOpO3 @if (item.TijdOpO3 == "1")
{<text>dag</text>}
else
{ <text>dagen</text>}
</td>
<td>@item.KeurCode</td>
<td>@item.PromiseDate</td>
<td>@item.WidthAndPartType</td>
<td>
@item.PieceLengthWithUnit <br /> @item.NrOfPieces @if (item.NrOfPieces == 1)
{<text>rol</text> }
else
{ <text>rollen</text>}
</td>
<td>
@if (item.NumberReceived == "0")
{<text>NIEUW</text> }
else
{ @item.NumberReceived}
</td>
<td>@item.VoorraadQty m</td>
<td style="width: 100px !important">
@item.SalesOrderQty m <br /> @item.NrOfSalesOrders @if (item.NrOfSalesOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td style="width: 100px !important">
@item.StalenOrdersQty m <br /> @item.NrOfStalenOrders @if (item.NrOfStalenOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td><input type="checkbox" name="IsChecked" onclick="ClickHandle(this)" style="width:30px;height:30px;margin-left:20px;margin-top:20px"> </td>
</tr>
}
</table>
</div>

Javascript

<script type="text/javascript">
$(function ClickHandle() {
$("input[name='IsChecked']").change(function (element) {
var table = document.getElementById("table1");
for (var i = 1; i < table.rows.length; i++) {
var row = table.rows[i];
var lastorder = row.cells[12].firstChild;
var check = lastorder.checked;
if (check) {
var x = document.getElementById("table1").getElementsByTagName("tr");
x[i].style.backgroundColor = "yellow";
}
else {
var x = document.getElementById("table1").getElementsByTagName("tr");
x[i].style.backgroundColor = null;
}
//post item.partid and value of check to controller here.
}
});
});
</script>

控制器

[HttpPost]
public ActionResult PostIsChecked(string partId, string isChecked)
{
Part part = new Part
{
id = partId,
isChecked = isChecked
};
//Do stuff
receipt.UpdateCheckedStatus(part);
}

Answer 1

您可以尝试在<tr></tr>中放入一个隐藏的输入，并使用@item.PartId设置其值，然后使用ajax将数据发送到action。下面是一个示例:

<div class="Table">
{
<table id="table1" class="table table-striped TableData">            
@{var id = 0;}
@foreach (var item in Model.PieceViewItems)
{
id++;
<tr id="@id">
<td>@id</td>
<td><label>@item.PartDescription</label> <br /><input hidden  value=@item.PartId/> @item.PartId (@item.StatusCode)</td>
<td>@item.Supplier</td>
<td style="width: 100px !important">
@item.TijdOpO3 @if (item.TijdOpO3 == "1")
{<text>dag</text>}
else
{ <text>dagen</text>}
</td>
<td>@item.KeurCode</td>
<td>@item.PromiseDate</td>
<td>@item.WidthAndPartType</td>
<td>
@item.PieceLengthWithUnit <br /> @item.NrOfPieces @if (item.NrOfPieces == 1)
{<text>rol</text> }
else
{ <text>rollen</text>}
</td>
<td>
@if (item.NumberReceived == "0")
{<text>NIEUW</text> }
else
{ @item.NumberReceived}
</td>
<td>@item.VoorraadQty m</td>
<td style="width: 100px !important">
@item.SalesOrderQty m <br /> @item.NrOfSalesOrders @if (item.NrOfSalesOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td style="width: 100px !important">
@item.StalenOrdersQty m <br /> @item.NrOfStalenOrders @if (item.NrOfStalenOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td><input type="checkbox" name="IsChecked" onclick="ClickHandle(this)" style="width:30px;height:30px;margin-left:20px;margin-top:20px"> </td>
</tr>
}
</table>
</div>

js:

$("input[name='IsChecked']").change(function () {
var checked = this.checked;
var PartId = $(this).parent().parent().find("input")[0].value;
$.ajax({
type: "POST",
url: "PostIsChecked",
data: { "isChecked": checked, "partId": PartId},
success: function (data) {
}
});

});