首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 22, 2020

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

效果图：

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

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

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

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

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

- Author -

XuebinDing

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 #Javascript
jQuery实现三级菜单的代码
May 09 #Javascript
Boostrap入门准备之border box
May 09 #Javascript
CKEditor无法验证的解决方案（js验证+jQuery Validate验证）
May 09 #Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 #Javascript
jQuery绑定事件的几种实现方式
May 09 #Javascript
jquery实现左右无缝轮播图
Jul 31 #Javascript
i5 9400(1) win11(40) 速龙(1) i7 6700(1) 窗口函数(3) 分析统计(1) Tomcat(18) win10(43) ipad(1) i5 10400(1)
You might like
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
JavaScript 继承详解（四）
2009/07/13 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python探索之ModelForm代码详解
2017/10/26 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python suds访问webservice服务实现
2020/06/26 Python
python 模拟登陆github的示例
2020/12/04 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
英国珠宝网站Argento： PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
大学生求职自我评价
2014/01/16 职场文书
公务员综合考察材料
2014/02/01 职场文书
付款委托书范本
2014/04/04 职场文书
集中整治工作方案
2014/05/01 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
学校节能减排方案
2014/06/13 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
海弦WR-800F
2022/04/05 无线电
Vue.Draggable实现交换位置
2022/04/07 Vue.js