MVC+jQuery.Ajax非同步實現增刪改查和分頁_jquery

本文執行個體為大家分享了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 }}

效果圖：

5、源碼下砸：jQuery.Ajax非同步實現增刪改查和分頁

以上就是本文的全部內容，希望對大家的學習有所協助。