首页 专区 Skill 文章 专题 AI工具 学习 编程手册

PHP MySQL jquery HTML CSS
首页 > web前端 > js教程

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

小辰同学_4543

小辰同学_4543

2016-05-16

4649人浏览

原创

本文实例为大家分享了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; }
 }
}

</mvcexamples.model.student></mvcexamples.model.teacher></mvcexamples.model.student>

2、View层代码

" %>

<content id="Content1" contentplaceholderid="TitleContent" runat="server">
 Index
</content><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></content><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><tr>
<td>
     
    </td>
    <td>
     
    </td>
    <td>
     
    </td>
    <td>
     
    </td>
    <td>
     
    </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>
      &nbsp
     <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>
<br><table>
<thead>
<tr>
<td>
     学生表
    </td>
   </tr>
<tr>
<td>
     学号
    </td>
    <td>
     姓名
    </td>
    <td>
     性别
    </td>
    <td>
     生日
    </td>
    <td>
     班级
    </td>
   </tr>
</thead>
<tbody><tr>
<td>
     
    </td>
    <td>
     
    </td>
    <td>
     
    </td>
    <td>
     
    </td>
    <td>
     
    </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><tr>
<td>
     
    </td>
    <td>
     
    </td>
    <td>
     
    </td>
    <td>
     
    </td>
    <td>
     
    </td>
    <td>
     
    </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>
</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 name="sclass">
  /// <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 name="name">
  /// <param name="sex">
  /// <param name="birsthday">
  /// <param name="sclass">
  /// <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">
  /// <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 name="name">
  /// <param name="sex">
  /// <param name="birsthday">
  /// <param name="sclass">
  /// <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">
  /// <returns></returns>
  public ActionResult WindowData(int id)
  {
   JsonResult json = new JsonResult();
   //这里给json数据(这里只是演示，下面数据是模拟的)
   json.Data = new
   {
    name = "张三",
    sex = "男"
   };
   return json;
  }

 }
}

</mvcexamples.model.student>

4、两个分页辅助类PagedList和MikePagerHtmlExtensions

兼容IE6的jQuery分页插件
兼容IE6的jQuery分页插件

兼容IE6的jQuery分页插件是一款淘宝分页样式，带输入页跳转，设置翻页容器，条目总数，每页条目数，当前页等默认功能。

下载

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)  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);
  }
 }
}

</t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t>

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 " + i.ToString() + " ");
    }
    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
 }
}

</t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t>

效果图：

5、源码下砸：jQuery.Ajax异步实现增删改查和分页

以上就是本文的全部内容，希望对大家的学习有所帮助。

相关文章

JavaScript 中怎么用 Jest 的 fake timers 测试定时器

WatchEffect 基础怎么使用 watchEffect 自动收集依赖并立即执行副作用函数

Python中怎么在FastAPI启动时异步初始化全局数据库连接？

如何在 JavaScript 中正确实现基于计数的异步 for 循环

如何优雅封装 Observable 并统一处理错误与状态重置
PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：ajax跨域调用webservice的实现代码_javascript技巧

下一篇：js原型链与继承解析（初体验）_javascript技巧

热门AI工具

更多
Seko

Seko

Hot 火山引擎

火山引擎

Hot 豆包大模型

豆包大模型

 DeepSeek

DeepSeek

 AionClaw

AionClaw

Hot 二狗PPT

二狗PPT

Hot LibLibAI

LibLibAI

Hot 超级简历WonderCV

超级简历WonderCV

Hot

相关专题

更多
Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发，讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

0

15

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制，涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

2026.09.23

0

15

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容，涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查，帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

2026.09.23

0

15

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法，讲解包名、版本、依赖和构建设置等基础信息，以及source、build、package、package_info等常用方法的作用及编写思路。

2026.09.22

0

12

Conan二进制包配置指南
Conan二进制包配置指南

本专题介绍Conan根据操作系统、编译器、架构和构建类型生成二进制包的方法，讲解Profile、Settings、Options及Package ID的作用，帮助管理不同平台和编译环境下的包版本。

2026.09.22

0

13

Conan私有仓库搭建教程
Conan私有仓库搭建教程

本专题系统的讲解Conan私有仓库的搭建流程，涵盖仓库服务部署、存储目录配置、用户认证、权限划分和远程地址添加，并介绍内部C++依赖包的上传、下载及版本维护方法。

2026.09.22

0

19

loomy官网入口地址合集
loomy官网入口地址合集

本专题汇总了 Loomy 桌面 AI 助理的官方入口地址合集及使用指南。提供 macOS 与 Windows 客户端下载 。Loomy 是讯飞推出的桌面级 AI 工作搭子，支持文件整理、数据分析、网页操作及通过飞书/钉钉远程操控电脑，助你高效完成本地办公任务 。

2026.09.22

0

19

NumPy常见函数使用方法
NumPy常见函数使用方法

本专题整理 NumPy 常见函数使用方法相关教程，覆盖函数大全、参数用法、数组运算、统计聚合、排序处理、where 条件筛选、linspace 创建数列等常用场景，帮助读者快速掌握 NumPy 函数调用思路和实际数据处理技巧。

2026.09.22

0

21

NumPy性能优化版本更新与常见报错排查
NumPy性能优化版本更新与常见报错排查

本专题整理 NumPy 性能优化、版本更新与常见报错排查相关教程，覆盖向量化计算、广播性能、内存布局、NumPy 2.0 升级、版本兼容冲突、安装导入报错、dtype 溢出、矩阵运算异常和 broadcasting 报错修复，帮助读者系统掌握 NumPy 性能调优与问题定位方法。

2026.09.22

20

25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
MDPHP(麦迪php框架系统)1.1
PHP 多国语言框架2.0
ujframe简单快速PHP开发框架1.0
php轻量型框架1.0
MyQEE开源PHP多项目及模块化开发框架3.0 RC2
php开源学习型框架CMVC1.2.0
PHP框架Kohana3.3.1

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
黑马程序员FastAPI从入门到实战教程
黑马程序员FastAPI从入门到实战教程

共0课时 | 0人学习

Genspark AI使用手册
Genspark AI使用手册

共0课时 | 0人学习

RabbitMQ 入门教程
RabbitMQ 入门教程

共0课时 | 123人学习

最新文章

更多
JavaScript 中静态方法怎么隔离实例作用域
如何在 JavaScript 中正确实现基于计数的异步 for 循环
如何优雅封装 Observable 并统一处理错误与状态重置
如何在 JavaScript 中正确实现基于计数器的异步 for 循环
如何修复字体连字（ligatures）在负字间距下的异常行为
JavaScript 中事件循环怎么处理音频播放缓冲状态
JavaScript 中 WeakMap 怎么实现私有方法的闭包封装
JavaScript 中箭头函数怎么在图表数据转换里用
JavaScript 中原型对象上的constructor属性怎么用
JavaScript 中构造函数怎么动态改变实例类型