首页
所有分类
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 相关文章推荐
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 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
R71E(1) SONY600GR(1) WR-800F(1) ICOM(2) DE1107(3) DE1105(1) 胆机(1) DE1102(1) R9700(1) R72E(1)
You might like
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
python 画函数曲线示例
2019/12/04 Python
python中有关时间日期格式转换问题
2019/12/25 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
Herve Leger官网：标志性绷带连衣裙等
2018/12/26 全球购物
工作失误检讨书范文大全
2014/01/13 职场文书
运动会入场解说词300字
2014/01/25 职场文书
党日活动总结
2014/05/07 职场文书
大专生找工作自荐书
2014/06/10 职场文书
重阳节活动总结
2014/08/27 职场文书
2014最新开业庆典策划方案（5篇）
2014/09/15 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers