


MVC+jQuery.Ajax implémente de manière asynchrone l'ajout, la suppression, la modification, la requête et paging_jquery
L'exemple de cet article partage avec vous le code spécifique de l'implémentation asynchrone MVC+jQuery.Ajax de l'ajout, de la suppression, de la modification et de la pagination pour votre référence. Le contenu spécifique est le suivant
1. Code de couche du modèle
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. Afficher le code de couche
<%@ 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. Code de la couche du contrôleur
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. Deux classes auxiliaires de pagination PagedList et MikePagerHtmlExtensions
Classe auxiliaire 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); } } }
Classe d'assistance 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 } }
Rendu :
5. Téléchargez le code source : jQuery.Ajax implémente de manière asynchrone l'ajout, la suppression, la modification et la pagination
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds



Développement PHP : comment implémenter des fonctions de tri et de pagination des données de table Dans le développement Web, le traitement de grandes quantités de données est une tâche courante. Pour les tableaux devant afficher une grande quantité de données, il est généralement nécessaire de mettre en œuvre des fonctions de tri et de pagination des données pour offrir une bonne expérience utilisateur et optimiser les performances du système. Cet article explique comment utiliser PHP pour implémenter les fonctions de tri et de pagination des données de table et donne des exemples de code spécifiques. La fonction de tri implémente la fonction de tri dans le tableau, permettant aux utilisateurs de trier par ordre croissant ou décroissant selon différents champs. Ce qui suit est un formulaire de mise en œuvre

Le langage Go est un langage de programmation efficace, concis et facile à apprendre. Il est privilégié par les développeurs en raison de ses avantages en programmation simultanée et en programmation réseau. Dans le développement réel, les opérations de base de données font partie intégrante. Cet article explique comment utiliser le langage Go pour implémenter les opérations d'ajout, de suppression, de modification et de requête de base de données. Dans le langage Go, nous utilisons généralement des bibliothèques tierces pour faire fonctionner les bases de données, telles que les packages SQL couramment utilisés, gorm, etc. Ici, nous prenons le package SQL comme exemple pour présenter comment implémenter les opérations d'ajout, de suppression, de modification et de requête de la base de données. Supposons que nous utilisons une base de données MySQL.

Comment utiliser JavaScript pour implémenter la fonction de pagination de table ? Avec le développement d’Internet, de plus en plus de sites Web utilisent des tableaux pour afficher les données. Dans certains cas où la quantité de données est importante, les données doivent être affichées dans des pages pour améliorer l'expérience utilisateur. Cet article explique comment utiliser JavaScript pour implémenter la fonction de pagination de table et fournit des exemples de code spécifiques. 1. Structure HTML Tout d'abord, nous devons préparer une structure HTML pour héberger les tableaux et les boutons de pagination. Nous pouvons utiliser <tab

Application rapide : analyse de cas de développement pratique de PHP Téléchargement HTTP asynchrone de plusieurs fichiers Avec le développement d'Internet, la fonction de téléchargement de fichiers est devenue l'un des besoins fondamentaux de nombreux sites Web et applications. Pour les scénarios dans lesquels plusieurs fichiers doivent être téléchargés en même temps, la méthode de téléchargement synchrone traditionnelle est souvent inefficace et prend du temps. Pour cette raison, utiliser PHP pour télécharger plusieurs fichiers de manière asynchrone via HTTP est devenu une solution de plus en plus courante. Cet article analysera en détail comment utiliser le HTTP asynchrone PHP à travers un cas de développement réel.

Pratique des composants Vue : Introduction au développement de composants de pagination Dans les applications Web, la fonction de pagination est un composant essentiel. Un bon composant de pagination doit être simple et clair dans sa présentation, riche en fonctions et facile à intégrer et à utiliser. Dans cet article, nous présenterons comment utiliser le framework Vue.js pour développer un composant de pagination hautement personnalisable. Nous expliquerons en détail comment développer à l'aide des composants Vue à travers des exemples de code. Pile technologique Vue.js2.xJavaScript (ES6) Environnement de développement HTML5 et CSS3

MyBatis est un excellent framework de couche de persistance. Il prend en charge les opérations de base de données basées sur XML et les annotations. Il est simple et facile à utiliser. Il fournit également un mécanisme de plug-in riche. Parmi eux, le plug-in de pagination est l'un des plug-ins les plus fréquemment utilisés. Cet article approfondira les principes du plug-in de pagination MyBatis et l'illustrera avec des exemples de code spécifiques. 1. Principe du plug-in de pagination MyBatis lui-même ne fournit pas de fonction de pagination native, mais vous pouvez utiliser des plug-ins pour implémenter des requêtes de pagination. Le principe du plug-in de pagination est principalement d'intercepter MyBatis

Programmation simultanée et asynchrone La programmation simultanée traite de plusieurs tâches s'exécutant simultanément, la programmation asynchrone est un type de programmation simultanée dans laquelle les tâches ne bloquent pas les threads. asyncio est une bibliothèque de programmation asynchrone en python, qui permet aux programmes d'effectuer des opérations d'E/S sans bloquer le thread principal. Boucle d'événements Le cœur d'asyncio est la boucle d'événements, qui surveille les événements d'E/S et planifie les tâches correspondantes. Lorsqu'une coroutine est prête, la boucle d'événements l'exécute jusqu'à ce qu'elle attende les opérations d'E/S. Il met ensuite la coroutine en pause et continue d'exécuter d'autres coroutines. Coroutines Les coroutines sont des fonctions qui peuvent suspendre et reprendre l'exécution. Le mot-clé asyncdef est utilisé pour créer des coroutines. La coroutine utilise le mot-clé wait pour attendre la fin de l'opération d'E/S. Les bases suivantes d'asyncio

Il existe deux manières les plus courantes de paginer des tableaux PHP : en utilisant la fonction array_slice() : calculez le nombre d'éléments à ignorer, puis extrayez la plage d'éléments spécifiée. Utilisez des itérateurs intégrés : implémentez l'interface Iterator et les méthodes rewind(), key(), current(), next() et valid() sont utilisées pour parcourir les éléments dans la plage spécifiée.
