MVC jQuery.Ajax asynchronously implements addition, deletion, modification, query and paging_jquery

the example in this article shares with you the specific code of mvc jquery.ajax asynchronous implementation of addition, deletion, modification, query and paging for your reference. the specific content is as follows

1. model layer code

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 layer code

<%@ 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 layer code

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. two paging auxiliary classes pagedlist and mikepagerhtmlextensions

pagedlist helper class

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 helper class

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

rendering:

5. download the source code: jquery.ajax asynchronous implement addition, deletion, modification and paging

the above is the entire content of this article, i hope it will be helpful to everyone's study.