本文實例為大家分享了mvc jquery.ajax非同步實現增刪改查和分頁的具體程式碼,供大家參考,具體內容如下
1、model層程式碼
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 id="content1" contentplaceholderid="titlecontent" runat="server"> index </asp:content> <asp:content id="content3" contentplaceholderid="headcontent" runat="server"> <script src="http://www.cnblogs.com/scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/scripts/my97datepicker/wdatepicker.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/scripts/windwui/jquery-ui-1.8.1.min.js" type="text/javascript"></script> <link href="http://www.cnblogs.com/scripts/windwui/jquery-ui-1.8.1.custom.css" rel="stylesheet" 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 id="content2" 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);" class="a_update" sno="<%=student.sno %>" sname="<%=student.sname %>" ssex="<%=student.ssex %>" sbirthday="<%=student.sbirthday %>" sclass="<%=student.sclass %>">修改</a>   <a href="javascript:void(0);" class="a_delete" sno="<%=student.sno %>">删除</a> </td> </tr> <% } %> </tbody> <tfoot> <tr> <td> 全选 </td> <td colspan="5" style="text-align: right;"> <a href="javascript:void(0);" id="a_add">添加</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 id="window" style="display:none;"> <input type="hidden" id="sno" name="sno" value="" /> 姓名:<input type="text" id="sname" name="sname" /><br /> 性别:<input type="text" id="ssex" name="ssex" /><br /> 生日:<input type="text" id="sbirthday" name="sbirthday" onclick = "wdatepicker()" /><br /> 班级:<input type="text" id="sclass" name="sclass" /><br /> </div> </asp:content>
3、controller層程式碼
using system; using system.collections.generic; using system.linq; using system.web; using system.web.mvc; using system.web.mvc.ajax; namespace mvcexamples.web.controllers { public class studentcontroller : controller { // // get: /student/ mvcexamples.bll.student _student = new mvcexamples.bll.student(); mvcexamples.bll.teacher _teacher = new mvcexamples.bll.teacher(); /// <summary> /// 演示 /// </summary> /// <param name="pi"></param> /// <param name="sclass"></param> /// <returns></returns> public actionresult index(int? pi, string sclass) { int pageindex = pi ?? 1; int pagesize = 5; string sclass = sclass == null ? "95031" : sclass; mvcexamples.web.models.studentmodels _studentmodels = new mvcexamples.web.models.studentmodels(); _studentmodels.studentlist = _student.getmodellist("sclass=" + sclass); _studentmodels.teacherlist = _teacher.getmodellist("tsex='男'"); _studentmodels.getstudentlist = new pagedlist<mvcexamples.model.student>(_student.getmodellist("sclass=" + sclass).asqueryable(), pageindex, pagesize); return view(_studentmodels);//返回一个model } /// <summary> /// 修改学生信息 /// </summary> /// <param name="no"></param> /// <param name="name"></param> /// <param name="sex"></param> /// <param name="birsthday"></param> /// <param name="sclass"></param> /// <returns></returns> public actionresult updatestudent(string no, string name, string sex, string birsthday, string sclass) { mvcexamples.model.student _student = new mvcexamples.model.student(); _student.sno = no; _student.sname = name; _student.ssex = sex; _student.sbirthday = convert.todatetime(birsthday); _student.sclass = sclass; _student.update(_student); jsonresult json = new jsonresult(); json.data = new { result = "true" }; return json; } /// <summary> /// 删除学生信息 /// </summary> /// <param name="no"></param> /// <returns></returns> public actionresult deletestudent(string no) { bool isdelete= _student.delete(no); jsonresult json = new jsonresult(); return json; if (isdelete) { json.data = new { result = "true" }; } else { json.data = new { result ="false" }; } return json; } /// <summary> /// 添加学生信息 /// </summary> /// <param name="no"></param> /// <param name="name"></param> /// <param name="sex"></param> /// <param name="birsthday"></param> /// <param name="sclass"></param> /// <returns></returns> public actionresult addstudent(string no, string name, string sex, string birsthday, string sclass) { mvcexamples.model.student _student = new mvcexamples.model.student(); _student.sno = no; _student.sname = name; _student.ssex = sex; _student.sbirthday = convert.todatetime(birsthday); _student.sclass = sclass; _student.add(_student); jsonresult json = new jsonresult(); json.data = new { result = "true" }; return json; } /// <summary> /// 提供弹出窗口的数据 /// </summary> /// <param name="id"></param> /// <returns></returns> public actionresult windowdata(int id) { jsonresult json = new jsonresult(); //这里给json数据(这里只是演示,下面数据是模拟的) json.data = new { name = "张三", sex = "男" }; return json; } } }
4、兩個分頁輔助類pagedlist和mikepagerhtmlextensions
pagedlist輔助類
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 system.collections.specialized; namespace system.web.mvc { public interface ipagedlist { int totalpage //总页数 { get; } int totalcount { get; set; } int pageindex { get; set; } int pagesize { get; set; } bool ispreviouspage { get; } bool isnextpage { get; } } public class pagedlist<t> : list<t>, ipagedlist { public pagedlist(iqueryable<t> source, int? index, int? pagesize) { if (index == null) { index = 1; } if (pagesize == null) { pagesize = 10; } this.totalcount = source.count(); this.pagesize = pagesize.value; this.pageindex = index.value; this.addrange(source.skip((index.value - 1) * pagesize.value).take(pagesize.value)); } public int totalpage { get { return (int)system.math.ceiling((double)totalcount / pagesize); } } public int totalcount { get; set; } /// <summary> /// /// </summary> public int pageindex { get; set; } public int pagesize { get; set; } public bool ispreviouspage { get { return (pageindex > 1); } } public bool isnextpage { get { return ((pageindex) * pagesize) < totalcount; } } } public static class pagination { public static pagedlist<t> topagedlist<t>(this iorderedqueryable<t> source, int? index, int? pagesize) { return new pagedlist<t>(source, index, pagesize); } public static pagedlist<t> topagedlist<t>(this iorderedqueryable<t> source, int? index) { return new pagedlist<t>(source, index, 10); } public static pagedlist<t> topagedlist<t>(this iqueryable<t> source, int? index, int? pagesize) { return new pagedlist<t>(source, index, pagesize); } public static pagedlist<t> topagedlist<t>(this iqueryable<t> source, int? index) { return new pagedlist<t>(source, index, 10); } } }
mikepagerhtmlextensions輔助類別
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.Web.Mvc; using System.Web.Routing; using System.Text; namespace System.Web.Mvc { public static class MikePagerHtmlExtensions { #region MikePager 分页控件 public static string MikePager<T>(this HtmlHelper html, PagedList<T> data) { string actioinName = html.ViewContext.RouteData.GetRequiredString("action"); return MikePager<T>(html, data, actioinName); } public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, object values) { string actioinName = html.ViewContext.RouteData.GetRequiredString("action"); return MikePager<T>(html, data, actioinName, values); } public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action) { return MikePager<T>(html, data, action, null); } public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, object values) { string controllerName = html.ViewContext.RouteData.GetRequiredString("controller"); return MikePager<T>(html, data, action, controllerName, values); } public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, string controller, object values) { return MikePager<T>(html, data, action, controller, new RouteValueDictionary(values)); } public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, RouteValueDictionary values) { string actioinName = html.ViewContext.RouteData.GetRequiredString("action"); return MikePager<T>(html, data, actioinName, values); } public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, RouteValueDictionary values) { string controllerName = html.ViewContext.RouteData.GetRequiredString("controller"); return MikePager<T>(html, data, action, controllerName, values); } public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, string controller, RouteValueDictionary valuedic) { int start = (data.PageIndex - 5) >= 1 ? (data.PageIndex - 5) : 1; int end = (data.TotalPage - start) > 9 ? start + 9 : data.TotalPage; RouteValueDictionary vs = valuedic == null ? new RouteValueDictionary() : valuedic; var builder = new StringBuilder(); builder.AppendFormat("<div class=\"mike_mvc_pager\">"); if (data.IsPreviousPage) { vs["pi"] = 1; builder.Append(Html.LinkExtensions.ActionLink(html, "首页", action, controller, vs, null)); builder.Append(" "); vs["pi"] = data.PageIndex - 1; builder.Append(Html.LinkExtensions.ActionLink(html, "上一页", action, controller, vs, null)); builder.Append(" "); } for (int i = start; i <= end; i++) //前后各显示5个数字页码 { vs["pi"] = i; if (i == data.PageIndex) { builder.Append("<font class='thispagethis'>" + i.ToString() + "</font> "); } else { builder.Append(" "); builder.Append(Html.LinkExtensions.ActionLink(html, i.ToString(), action, controller, vs, null)); } } if (data.IsNextPage) { builder.Append(" "); vs["pi"] = data.PageIndex + 1; builder.Append(Html.LinkExtensions.ActionLink(html, "下一页", action, controller, vs, null)); builder.Append(" "); vs["pi"] = data.TotalPage; builder.Append(Html.LinkExtensions.ActionLink(html, "末页", action, controller, vs, null)); } builder.Append(" 每页" + data.PageSize + "条/共" + data.TotalCount + "条 第" + data.PageIndex + "页/共" + data.TotalPage + "页 </div>"); return builder.ToString(); } #endregion } }
效果圖:
5、源碼下砸:jquery.ajax非同步實現增刪改查和分頁
以上就是本文的全部內容,希望對大家的學習有所幫助。

快速应用:PHP异步HTTP下载多个文件的实用开发案例分析随着互联网的发展,文件下载功能已成为很多网站和应用程序的基本需求之一。而对于需要同时下载多个文件的场景,传统的同步下载方式往往效率低下且耗费时间。为此,使用PHP异步HTTP下载多个文件成为了一种越来越常见的解决方案。本文将通过一个实际的开发案例,详细分析如何使用PHP异步HTTP

随着互联网的不断发展和普及,电子邮件已经成为了人们生活和工作中必不可少的一部分,而SMTP(SimpleMailTransferProtocol,简单邮件传输协议)则是邮件发送的重要协议之一。Swoole作为PHP的一个异步网络通讯框架,可以很好地支持异步SMTP操作,使邮件发送更加高效和稳定。本文将介绍Swoole如何支持异步SMTP操作,包括使用步

随着互联网业务量的不断增长,对于高并发和高性能的需求越来越高,而Swoole作为PHP的一款网络通信框架,也越来越受到开发者的青睐。其中,Swoole支持异步AMQP是比较常见的应用场景之一。那么我们来看看Swoole如何支持异步AMQP操作。首先,我们需要明确什么是AMQP。AMQP(AdvancedMessageQueuingProtocol)高级

Vue.js是一种流行的前端JavaScript框架,它提供了一种在应用程序中构建用户界面的方式。在Vue.js的文档中,我们可以找到很多有用的信息,特别是关于如何使用异步请求函数。异步请求函数是一种在应用程序中执行异步任务的方式。它们被用于从服务器获取数据、处理输入、验证表单等。一般情况下,异步请求函数需要与Promise、async和await等Java

随着互联网的高速发展,日志记录服务成为了每个大型web应用必不可少的模块。为了方便错误排查、性能监控等各种需求,本文将介绍如何使用ThinkPHP6框架进行异步日志记录操作。1.什么是日志记录在计算机科学领域,日志记录是指将计算机系统中发生的事件和信息记录下来。通常,这些记录都以文件或数据库的形式存储。日志记录有助于了解系统运行状况,及时发现和解决

Swoole是一个为高并发而设计的PHP扩展,可以大幅提升PHP的性能。它支持异步IO、协程、多进程等特性,在网络编程、高负载场景中表现出色。本文将介绍Swoole如何支持异步SSH操作。一、SSH介绍SSH(SecureShell)是一种加密的网络协议,用来在网络中进行安全地传输信息。SSH协议具有安全、可靠、跨平台等特点,广泛应用于远程登录、文件传输、

PHP8.1新增的异步HTTP客户端随着互联网的快速发展,各种Web应用程序的性能也变得越来越重要。为了提供更好的用户体验,开发人员需要使用高效的工具和技术来处理各种网络请求。幸运的是,PHP8.1引入了一个全新的功能,即异步HTTP客户端,它允许我们以非阻塞的方式执行HTTP请求,从而提高应用程序的性能。通过异步HTTP客户端,我们可以在发送请求后继续执行

如何利用Celery、Redis和Django实现异步任务队列引言:在Web开发中,经常需要处理一些耗时较长的任务,如发送邮件、生成报表、处理大量数据等。如果将这些任务直接放在视图函数中处理,会导致请求响应时间过长,用户体验不佳。为了提高系统的性能和响应速度,我们可以使用异步任务队列来处理这些耗时的任务。Celery是一个广泛使用的Python的异步任务队列


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具

Dreamweaver CS6
視覺化網頁開發工具

禪工作室 13.0.1
強大的PHP整合開發環境