我想要一个如下图所示的功能:
实际上我想在html表中显示数据库表中的数据,包括每行旁边的复选框,并将这些数据存储到另一个表中。将存储已检查数据和未选中两者,但检查数据返回1,未检查数据在is_selected列中返回0。我想知道这个程序。我无法理解我是如何做到的。这里添加了一张图片。如果你看到它,你将完全理解我想要做什么。我正在使用ms sql server 2014。和我的项目asp.net-mvc(5)视觉工作室2017.谢谢你 查看
@using AttendenceSystem.Models;
@model IEnumerable<CsteY4_T2_Students>
@{
ViewBag.Title = "Multimedia Communication Students";
}
<div style="font-family:Arial">
<h2>Multimedia Communication Students</h2>
<form>
<table border="1" id="tblList">
<tr>
<th>Student Id</th>
<th>Student Name</th>
<th>Present Status</th>
</tr>
@foreach (CsteY4_T2_Students cstey4t2studens in @Model)
{
<tr>
<td class="num">@cstey4t2studens.StudentId</td>
<td class="num">@cstey4t2studens.StudentName</td>
<td>
<input name="chkStudent" value="@cstey4t2studens.StudentId" type="checkbox" />
</td>
</tr>
}
</table>
<input type="submit" id="btnSave" class="addValue" value="Save" />
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('.addValue').click(tallyValues);
function tallyValues() {
$('#btnSave').on('click', function () {
var list = [];
$('input[name="chkStudent"]').each(function () {
console.log($(this).val());
if ($(this).is(':checked')) {
list.push({ 'StudentId': $(this).val(), 'PresentValid': true })
}
else {
list.push({ 'StudentId': $(this).val(), 'PresentValid': false })
}
});
$.ajax({
type: "POST",
url: "../CsteY4T2Students/SaveStudent",
data: { list: list },
cache: false,
success: function (data) {
console.log('saved');
},
error: function (error) {
console.log('error');
},
complete: function () {
}
});
});
};
</script>
控制器代码:
public class CsteY4T2StudentsController : Controller
{
// GET: CsteY4T2Students
public ActionResult Cstey4t2students(string SubjectCode)
{
DataRetrive dataretrive = new DataRetrive();
List<CsteY4_T2_Students> cstey4t2students=dataretrive.Cstey4t2studens.Where(sc => sc.SubjectCode == SubjectCode).ToList();
return View(cstey4t2students);
}
public JsonResult SaveStudent(List<Student> list)
{
return Json(1, JsonRequestBehavior.AllowGet);
}
}
模特课程:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace AttendenceSystem.Models
{
[Table("tbleMultimediaCommunication")]
public class Student
{
[Key]
public int StudentId { get; set; }
public bool PresentValid { get; set; }
}
}
答案 0 :(得分:0)
根据我的理解,这是一个样本,尚未经过测试,但应该让您朝着正确的方向前进:
您的视图 - 添加了表格ID,请查看复选框
<table border="1" id="tblList">
<tr>
<th>Student Id</th>
<th>Student Name</th>
<th>Present Status</th>
</tr>
@foreach (CsteY4_T2_Students cstey4t2studens in @Model)
{
<tr>
<td>@cstey4t2studens.StudentId</td>
<td>@cstey4t2studens.StudentName</td>
<td>
<input name="chkStudent" value="@cstey4t2studens.StudentId" type="checkbox" />
</td>
</tr>
}
</table>
<button type="button" id="btnSave">Save</button>
视图中的脚本
$(function () {
$('#btnSave').on('click', function () {
var list = [];
$('input[name="chkStudent"]').each(function () {
console.log($(this).val());
if ($(this).is(':checked')) {
list.push({ 'StudentId': $(this).val(), 'PresentValid': true })
}
else {
list.push({ 'StudentId': $(this).val(), 'PresentValid': false })
}
});
$.ajax({
type: "POST",
url: "../CsteY4T2Students/SaveStudent",
data: { list: list },
cache: false,
success: function (data) {
console.log('saved');
},
error: function (error) {
console.log('error');
},
complete: function () {
}
});
});
});
在控制器中
public JsonResult SaveStudent(List<Student> list)
{
return Json(1, JsonRequestBehavior.AllowGet);
}
假设你有以下学生课程:
class Student
{
public int StudentId {get;set;}
public bool PresentValid {get;set}
}