jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > jQuery.Ajax增删改查和分页

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

作者：XuebinDing

这篇文章主要为大家详细介绍了MVC结合jQuery.Ajax异步实现增删改查和分页的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;&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? 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("&nbsp;");
  vs["pi"] = data.PageIndex - 1;
  builder.Append(Html.LinkExtensions.ActionLink(html, "上一页", action, controller, vs, null));
  builder.Append("&nbsp;");

  }

  for (int i = start; i <= end; i++) //前后各显示5个数字页码
  {
  vs["pi"] = i;
  if (i == data.PageIndex)
  {
   builder.Append("<font class='thispagethis'>" + i.ToString() + "</font>&nbsp;");
  }
  else
  {
   builder.Append("&nbsp;");

   builder.Append(Html.LinkExtensions.ActionLink(html, i.ToString(), action, controller, vs, null));
  }
  }

  if (data.IsNextPage)
  {
  builder.Append("&nbsp;");

  vs["pi"] = data.PageIndex + 1;
  builder.Append(Html.LinkExtensions.ActionLink(html, "下一页", action, controller, vs, null));
  builder.Append("&nbsp;");


  vs["pi"] = data.TotalPage;
  builder.Append(Html.LinkExtensions.ActionLink(html, "末页", action, controller, vs, null));


  }
  builder.Append("&nbsp;每页" + data.PageSize + "条/共" + data.TotalCount + "条 第" + data.PageIndex + "页/共" + data.TotalPage + "页 </div>");
  return builder.ToString();
 }
 #endregion
 }
}

效果图：

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

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

您可能感兴趣的文章:
阅读全文