讲师中心 微信公众号
AI工具推荐 视频效率加速

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

小辰同学_4543

小辰同学_4543

发布时间:2016-05-16 09:00:25

|

4649人浏览过

|

来源于php中文网

原创

本文实例为大家分享了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>
      &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>
 <%=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&#63; pi, string sclass)
  {
   int PageIndex = pi &#63;&#63; 1;
   int PageSize = 5;
   string sClass = sclass == null &#63; "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

兼容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&#63; index, int&#63; 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&#63; index, int&#63; pageSize)
  {
   return new PagedList<T>(source, index, pageSize);
  }

  public static PagedList<T> ToPagedList<T>(this IOrderedQueryable<T> source, int&#63; index)
  {
   return new PagedList<T>(source, index, 10);
  }

  public static PagedList<T> ToPagedList<T>(this IQueryable<T> source, int&#63; index, int&#63; pageSize)
  {
   return new PagedList<T>(source, index, pageSize);
  }

  public static PagedList<T> ToPagedList<T>(this IQueryable<T> source, int&#63; 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 &#63; (data.PageIndex - 5) : 1;
   int end = (data.TotalPage - start) > 9 &#63; start + 9 : data.TotalPage;

   RouteValueDictionary vs = valuedic == null &#63; 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异步实现增删改查和分页

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

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

相关专题

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

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

20

2026.09.23

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

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

0

2026.09.23

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

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

20

2026.09.23

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

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

0

2026.09.22

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

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

20

2026.09.22

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

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

20

2026.09.22

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

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

20

2026.09.22

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

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

0

2026.09.22

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

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

20

2026.09.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Genspark AI使用手册
Genspark AI使用手册

共0课时 | 0人学习

RabbitMQ 入门教程
RabbitMQ 入门教程

共0课时 | 123人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn