如何使用JsonAction来无刷新更改数据

浏览数：18 / 时间：2015年06月09日

view处.cshtml中html代码

<table id="classtable">
    <tr>
        <th>
            学生编号
        </th>
        <th>
            学生姓名
        </th>
        <th>
            所属班级
        </th>
        <th>
            年级
        </th>
        <th>
            成绩
        </th>
        <th>
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.StudentId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.StudentName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ClassName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.GradeName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Score)
            </td>
            <td>
                <a class="late" data-id="@item.StudentId" data-name="@item.StudentName" data-courseid="@item.CourseId" href="#">
                    迟到</a> | <a class="miss" data-id="@item.StudentId" data-name="@item.StudentName" data-courseid="@item.CourseId" href="#">
                缺课</a>| <a class="delete" data-id="@item.Id" data-name="@item.StudentName" href="#">
                删除该生</a>
               
               
            </td>
        </tr>
    }
</table>

js代码

<script type="text/javascript">
    $("#classtable tr .late").each(function (n) {
        $(this).click(function (e) {
            e.preventDefault();
            var result = confirm("确定" + $(this).attr("data-name") + "迟到？");
            if (result) {
                $.post("/LateAndMiss/Late", { "studentid": $(this).attr("data-id"), "courseid": $(this).attr("data-courseid") }, function (data) {
                    if (data == "1") {
                        alert($(this).attr("data-name") + "已被标记为迟到?");
                        $("#classtable tr ").eq(n + 1).hide();
                    }
                });
            }
        });
    });
    $("#classtable tr .miss").each(function (n) {
        $(this).click(function (e) {
            e.preventDefault();
            var result = confirm("确定 + $(this).attr("data-name") + "缺课?");
            if (result) {
                $.post("/LateAndMiss/Miss", { "studentid": $(this).attr("data-id"), "courseid": $(this).attr("data-courseid") }, function (data) {
                    if (data == "1") {
                        alert("已被标记为缺课");
                        $("#classtable tr ").eq(n + 1).hide();
                    }
                });
            }
        });
    });
    $("#classtable tr .delete").each(function (n) {
        $(this).click(function (e) {
            e.preventDefault();
            var result = confirm("确定删除" + $(this).attr("data-name") );
            if (result) {
                $.post("/StudentCourse/Delete", { "id": $(this).attr("data-id")}, function (data) {
                    if (data == "1") {
                        alert("已被删除");
                        $("#classtable tr ").eq(n + 1).hide();
                    }
                });
            }
        });
    });
</script>

Controller类中的代码

        public JsonResult Late(int studentid, int courseid)
        {
            LateAndMiss l = new LateAndMiss();
            l.IsLate = true;
            l.StudentId = studentid;
            l.CourseId = courseid;
            l.AccidentTime = DateTime.Now;
            db.LateAndMiss.InsertOnSubmit(l);
            db.SubmitChanges();
            return Json(1);
        }
        public JsonResult Miss(int studentid, int courseid)
        {
            LateAndMiss l = new LateAndMiss();
            l.IsLate = false;
            l.StudentId = studentid;
            l.CourseId = courseid;
            l.AccidentTime = DateTime.Now;
            db.LateAndMiss.InsertOnSubmit(l);
            db.SubmitChanges();
            return Json(1);
        }
        public JsonResult Delete(int id)
        {
            LateAndMiss l = db.LateAndMiss.GetModel(id);
            db.LateAndMiss.DeleteOnSubmit(l);
            db.SubmitChanges();
            return Json(1);
        }