显示数据库表中的行并将其发布到另一个表。选择行返回1而不选择行返回0进入当前状态列

时间:2017-06-06 18:35:41

标签: jquery json asp.net-mvc checkbox asp.net-mvc-5

我想要一个如下图所示的功能:

image

实际上我想在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; }
    }
}

1 个答案:

答案 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}
}