数据表在表单提交时未将 rowid 返回给 asp.net MVC 控制器
Datatable not returning rowid to asp.net mvc controller on form submit
我无法在表单提交时将 rowid 从 jquery 数据表获取到我的控制器。
请在下面找到 html 代码:
<form id="frm-example" action="@Url.Action("Index", "Home")" method="POST">
<table id="example" class="display select" cellspacing="0" width="100%">
<thead>
<tr>
<th><input name="select_all" value="1" type="checkbox"></th>
<th>User ID</th>
<th>User Name</th>
</tr>
</thead>
</table>
<hr>
<p>
<input type="button" value="Add" class="btn btn-success" onclick="location.href='@Url.Action("Create", "UserProfile")'" />
<button type="submit" id="frm-example" class="btn btn-danger" value="Delete">Delete</button>
</p>
<pre id="example-console">
</pre>
</form>
请在下面找到我的数据表代码
@* Load datatable css *@
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
@* Load datatable js *@
@section Scripts{
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
//
// Updates "Select all" control in a data table
//
function updateDataTableSelectAllCtrl(table) {
var $table = table.table().node();
var $chkbox_all = $('tbody input[type="checkbox"]', $table);
var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);
// If none of the checkboxes are checked
if ($chkbox_checked.length === 0) {
chkbox_select_all.checked = false;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = false;
}
// If all of the checkboxes are checked
} else if ($chkbox_checked.length === $chkbox_all.length) {
chkbox_select_all.checked = true;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = false;
}
// If some of the checkboxes are checked
} else {
chkbox_select_all.checked = true;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = true;
}
}
}
$(document).ready(function () {
// Array holding selected row IDs
var rows_selected = [];
var table = $('#example').DataTable({
'ajax': '/UserProfile/LoadData',
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'width': '1%',
'className': 'dt-body-center',
'render': function (data, type, full, meta) {
return '<input type="checkbox">';
}
}],
'order': [1, 'asc'],
'rowCallback': function (row, data, dataIndex) {
// Get row ID
var rowId = data['USER_ID'];
// If row ID is in the list of selected row IDs
if ($.inArray(rowId, rows_selected) !== -1) {
$(row).find('input[type="checkbox"]').prop('checked', true);
$(row).addClass('selected');
}
}, 'columns': [
{ "data": "DT_RowId", "autoWidth": true },
{ "data": "USER_ID", "autoWidth": true },
{ "data": "USER_NAME", "autoWidth": true }
]
});
// Handle click on checkbox
$('#example tbody').on('click', 'input[type="checkbox"]', function (e) {
var $row = $(this).closest('tr');
// Get row data
var data = table.row($row).data();
// Get row ID
var rowId = data['USER_ID'];
// Determine whether row ID is in the list of selected row IDs
var index = $.inArray(rowId, rows_selected);
// If checkbox is checked and row ID is not in list of selected row IDs
if (this.checked && index === -1) {
rows_selected.push(rowId);
// Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
} else if (!this.checked && index !== -1) {
rows_selected.splice(index, 1);
}
if (this.checked) {
$row.addClass('selected');
} else {
$row.removeClass('selected');
}
// Update state of "Select all" control
updateDataTableSelectAllCtrl(table);
// Prevent click event from propagating to parent
e.stopPropagation();
});
// Handle click on table cells with checkboxes
$('#example').on('click', 'tbody td, thead th:first-child', function (e) {
$(this).parent().find('input[type="checkbox"]').trigger('click');
});
// Handle click on "Select all" control
$('thead input[name="select_all"]', table.table().container()).on('click', function (e) {
if (this.checked) {
$('#example tbody input[type="checkbox"]:not(:checked)').trigger('click');
} else {
$('#example tbody input[type="checkbox"]:checked').trigger('click');
}
// Prevent click event from propagating to parent
e.stopPropagation();
});
// Handle table draw event
table.on('draw', function () {
// Update state of "Select all" control
updateDataTableSelectAllCtrl(table);
});
// Handle form submission event
$('#frm-example').on('submit', function (e) {
var form = this;
// Iterate over all selected checkboxes
$.each(rows_selected, function (index, rowId) {
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'id[]')
.val(rowId)
);
});
});
});
</script>
}
请在控制器中找到我的代码。
namespace DOSApplication.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(string[] id)
{
return View("Index");
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
主控制器的索引操作中的值显示为空。
// Handle form submission event
$('#frm-example').on('submit', function (e) {
var form = this;
console.log('ids: ', rows_selected)
$.ajax({
type: 'post',
url: '',
data: {
id:JSON.stringify(rows_selected)
},
success: function (response) {
console.log("You data will be saved, resposnse: ", response);
}
});
return false
});
相关文章:
- 借助asp.net验证或java脚本对多个文本进行验证
- 将Javascript数组发送到控制器ASP.NET MVC
- ASP.NET通过单击JavaScript按钮触发c#事件
- 文本框不是从Javascript/Asp.net中的对话框中打印出来的
- 从javascript调用asp.net codebehind函数
- 使用javascript的Asp.net内容占位符
- 获取ASP.NET Ajax Timer状态
- ASP.NET网络摄像头显示
- 如何在只能有一个asp.net表单的主页上从asp.net页面中的javascript中获取值
- 如何将乳胶配方奶粉图像保存到Asp.net中的文件夹中
- asp.net,包括iss上的javascript slow
- 选择不在GridView-ASP.NET中激发
- 什么'是在asp.net MVC中将本地化的resources.resx文件转换为javascript文件的有效
- 使用ASP.NET将谷歌地图添加到项目中,并从数据库中检索位置
- 有什么“;错误的”;将javascript放在asp.net表单上,而不是放在单独的文件中
- 将Javascript日期转换为ASP.NET日期格式
- C#asp.net mvc Set CheckBoxFor已检查的具有Model Value的属性
- 在asp.net中确认是或否消息
- ASP.NET MVC 3-在ajax调用后,重定向到新页面或生成页面刷新
- asp.net中的验证工具