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

前端技术 2023/09/06 JavaScript

本文实例为大家分享了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异步实现增删改查和分页

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

本文地址：https://www.stayed.cn/item/15647

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)