在我的视图中,我有一台VM将数据库表中的数据分散到数据表中。我有一个删除按钮,如果选择了所请求列中的按钮,该数据条目的行将被删除。我的删除按钮正在通过对控制器函数的Ajax调用来处理...但是,当我调试控制器时,参数似乎包含所有空数据。我在这里想念什么吗?我在该部分表上方的部分表中也有一个按钮(未显示),该按钮的处理方式相同,并且该按钮有零个问题。
查看:
<div class="row">
<div class="col-md-12" style="overflow-y:scroll">
<table class="table table-striped table-hover table-bordered" id="Terminals">
<thead>
<tr>
<th>@Html.DisplayNameFor(model => model.TerminalCommands.FirstOrDefault().TerminalID)</th>
<th>@Html.DisplayNameFor(model => model.TerminalCommands.FirstOrDefault().TerminalCommandLookup.Name)</th>
<th>@Html.DisplayNameFor(model => model.TerminalCommandValues.FirstOrDefault().Value)</th>
<th> </th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.TerminalCommands)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.TerminalID, new { id = "deleteTerminalID", Value = item.TerminalID, @class = "form-control" })
</td>
<td>
@Html.DisplayFor(modelItem => item.TerminalCommandLookup.Name, new { id = "deleteCommand", Value = item.TerminalCommandLookup, @class = "form-control" })
</td>
<td>
@Html.DisplayFor(modelItem => item.CommandValue, new { Class = "form-control", Value = item.CommandValue, Id = "deleteCmdValueValue" })
</td>
<td>
<input id="btnDeleteTerminalCommand" type="submit" value="Delete" class="btn btn-danger">
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
JavaScript调用:
$(function () {
$("#btnDeleteTerminalCommand").click((e) => {
e.preventDefault();
var data = {
TerminalID: $("#deleteTerminalID").val(),
CommandID: $("#deleteCommand").val(),
CommandValue: $("#deleteCmdValueValue").val()
};
console.log("data");
console.log(data);
$.ajax({
url: '@Url.Action("DeleteTerminalCommand", "TerminalCommand")',
type: "POST",
data: data,
success: function (response) {
console.log("Success");
window.location.href = response.Url;
}
});
});
});
VM:
public class AddTerminalCommandVM
{
public string TerminalID { get; set; }
public int CommandID { get; set; }
public string CommandValue { get; set; }
}
控制器功能:
public ActionResult DeleteTerminalCommand(AddTerminalCommandVM removeCommand)
{
TerminalCommand removeTerminalCommand = new TerminalCommand();
removeTerminalCommand.TerminalID = removeCommand.TerminalID;
removeTerminalCommand.Command = removeCommand.CommandID;
removeTerminalCommand.CommandValue = removeCommand.CommandValue;
TCBL.DeleteTerminalCommand(removeTerminalCommand);
var redirectUrl = new UrlHelper(Request.RequestContext).Action("Index", "TerminalCommand");
return Json(new { Url = redirectUrl });
}
答案 0 :(得分:1)
在您的代码中td标签没有id,您需要获取td标签的值,如下所示
var data = {
TerminalID: $(e.target.closest('tr')).find('td').eq(0).text(),
CommandID: $(e.target.closest('tr')).find('td').eq(1).text(),
CommandValue: $(e.target.closest('tr')).find('td').eq(2).text()
};
将AJAX呼叫更改为
$(function () {
$("#btnDeleteTerminalCommand").click((e) => {
e.preventDefault();
var data = {
TerminalID: $(e.target.closest('tr')).find('td').eq(0).text(),
CommandID: $(e.target.closest('tr')).find('td').eq(1).text(),
CommandValue: $(e.target.closest('tr')).find('td').eq(2).text()
};
alert(JSON.stringify(data));
console.log("data");
console.log(data);
$.ajax({
url: '@Url.Action("DeleteTerminalCommand", "Login")',
type: "POST",
data: data,
success: function (response) {
console.log("Success");
window.location.href = response.Url;
}
});
});
});