MVC+jQuery.Ajax异步实现增删改查和分页

using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Collections.Generic; using MvcExamples; using System.Web.Mvc; namespace MvcExamples.Web.Models { public class StudentModels { /// <summary> /// 获取学生信息列表 /// </summary> public List<MvcExamples.Model.Student> StudentList { get; set; } /// <summary> /// 获取教工信息列表 /// </summary> public List<MvcExamples.Model.Teacher> TeacherList { get; set; } /// <summary> /// 获取学生信息列表(分页) /// </summary> public PagedList<MvcExamples.Model.Student> GetStudentList { get; set; } } }

2、View层代码

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcExamples.Web.Models.StudentModels>" %> <asp:Content ContentPlaceHolderID="TitleContent" runat="server"> Index </asp:Content> <asp:Content ContentPlaceHolderID="HeadContent" runat="server"> <script src="https://www.cnblogs.com/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="https://www.cnblogs.com/Scripts/My97DatePicker/WdatePicker.js" type="text/javascript"></script> <script src="https://www.cnblogs.com/Scripts/windwUi/jquery-ui-1.8.1.min.js" type="text/javascript"></script> <link href="https://www.cnblogs.com/Scripts/windwUi/jquery-ui-1.8.1.custom.css" type="text/css" /> <script type="text/javascript"> $(function(){ //添加学生信息 $('#a_add').click(function(){ $('#window').dialog({ title: "添加学生信息", width: 300, height: 200, modal: true, buttons: { "取消": function() { $(this).dialog("close"); //当点击取消按钮时,关闭窗口 }, "添加": function() { //当点击添加按钮时,获取各参数的值 var sno=$('#sno').val(); var sname=$('#sname').val(); var ssex=$('#ssex').val(); var sbirsthday=$('#sbirthday').val(); var sclass=$('#sclass').val(); $.ajax({ type:'post', url:'/Student/AddStudent',//路径为添加方法 data:'no='+sno+'&name='+sname+'&sex='+ssex+'&birsthday='+sbirsthday+'&sclass='+sclass,//参数的个数和名字要和方法的名字保持一致 success:function(json)//返回的是Json类型的 { $('#window').dialog("close"); //判断是否成功 if(json.result=="true") { $('#btn_close').click(); alert('恭喜你,修改成功!'); }else{ alert('抱歉,修改失败!'); } } }); } } }); }) //删除学生信息 $('.a_delete').click(function(){ //确认是否删除 if(confirm("是否删除此条信息?")) { $.ajax({ type:'post', url:'/Student/DeleteStudent', data:'no='+$(this).attr("sno"),//获取当前对象的属性(自定义属性)sno的值,用自定义属性保存相应需要的数据 sucess:function(json) { if(json.result=="true") { alert("恭喜你,已成功删除!"); }else { alert("抱歉,删除失败!"); } } }) } }) //修改学生信息 $('.a_update').click(function(){ var student=$(this); $("#sno").attr("value",student.attr("sno")); $("#sname").attr("value",student.attr("sname")); $("#ssex").attr("value",student.attr("ssex")); $("#sbirthday").attr("value",student.attr("sbirthday")); $("#sclass").attr("value",student.attr("sclass")); $('#window').dialog({ title: "修改学生信息", width: 300, height: 200, modal: true, buttons: { "取消": function() { $(this).dialog("close"); }, "修改": function() { var sno=$('#sno').val(); var sname=$('#sname').val(); var ssex=$('#ssex').val(); var sbirsthday=$('#sbirthday').val(); var sclass=$('#sclass').val(); $.ajax({ type:'post', url:'/Student/UpdateStudent', data:'no='+sno+'&name='+sname+'&sex='+ssex+'&birsthday='+sbirsthday+'&sclass='+sclass, success:function(json) { $('#window').dialog("close"); if(json.result=="true") { $('#btn_close').click(); alert('恭喜你,修改成功!'); }else{ alert('抱歉,修改失败!'); } } }); } } }); }); }) </script> </asp:Content> <asp:Content ContentPlaceHolderID="MainContent" runat="server"> <h2> MVC 演示</h2> <table> <thead> <tr> <td> 学生表 </td> </tr> <tr> <td> 学号 </td> <td> 姓名 </td> <td> 性别 </td> <td> 生日 </td> <td> 班级 </td> <td> 操作 </td> </tr> </thead> <tbody> <%foreach (MvcExamples.Model.Student student in Model.GetStudentList) {%> <tr> <td> <%=student.sno %> </td> <td> <%=student.sname %> </td> <td> <%=student.ssex %> </td> <td> <%=student.sbirthday %> </td> <td> <%=student.sclass %> </td> <td> <a href="javascript:void(0);" sno="<%=student.sno %>" sname="<%=student.sname %>" ssex="<%=student.ssex %>" sbirthday="<%=student.sbirthday %>" sclass="<%=student.sclass %>">修改</a> &nbsp;&nbsp <a href="javascript:void(0);" sno="<%=student.sno %>">删除</a> </td> </tr> <% } %> </tbody> <tfoot> <tr> <td> 全选 </td> <td colspan="5"> <a href="javascript:void(0);">添加</a> </td> </tr> </tfoot> </table> <%=Html.MikePager(Model.GetStudentList)%> <br /> <table> <thead> <tr> <td> 学生表 </td> </tr> <tr> <td> 学号 </td> <td> 姓名 </td> <td> 性别 </td> <td> 生日 </td> <td> 班级 </td> </tr> </thead> <tbody> <%foreach (MvcExamples.Model.Student student in Model.StudentList) {%> <tr> <td> <%=student.sno %> </td> <td> <%=student.sname %> </td> <td> <%=student.ssex %> </td> <td> <%=student.sbirthday %> </td> <td> <%=student.sclass %> </td> </tr> <% } %> </tbody> </table> <br /> <table> <thead> <tr> <td> 老师表 </td> </tr> <tr> <td> 编号 </td> <td> 姓名 </td> <td> 性别 </td> <td> 生日 </td> <td> 职称 </td> <td> 所在部门 </td> </tr> </thead> <tbody> <%foreach (MvcExamples.Model.Teacher teacher in Model.TeacherList) {%> <tr> <td> <%=teacher.tno%> </td> <td> <%=teacher.tname%> </td> <td> <%=teacher.tsex%> </td> <td> <%=teacher.tbirthday%> </td> <td> <%=teacher.prof%> </td> <td> <%=teacher.depart%> </td> </tr> <% } %> </tbody> </table> <div> <input type="hidden" value="" /> 姓名:<input type="text" /><br /> 性别:<input type="text" /><br /> 生日:<input type="text" onClick = "WdatePicker()" /><br /> 班级:<input type="text" /><br /> </div> </asp:Content>

3、Controller层代码

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpsyf.html