MVC+jQuery.Ajax異步實現(xiàn)增刪改查和分頁
更新時間：2020年12月22日 10:46:23 作者：XuebinDing
這篇文章主要為大家詳細(xì)介紹了MVC結(jié)合jQuery.Ajax異步實現(xiàn)增刪改查和分頁的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了MVC+jQuery.Ajax異步實現(xiàn)增刪改查和分頁的具體代碼，供大家參考，具體內(nèi)容如下
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>
/// 獲取學(xué)生信息列表
/// </summary>
public List<MvcExamples.Model.Student> StudentList { get; set; }
/// <summary>
/// 獲取教工信息列表
/// </summary>
public List<MvcExamples.Model.Teacher> TeacherList { get; set; }
/// <summary>
/// 獲取學(xué)生信息列表(分頁)
/// </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 rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){
//添加學(xué)生信息
$('#a_add').click(function(){
$('#window').dialog({
title: "添加學(xué)生信息",
width: 300,
height: 200,
modal: true,
buttons: {
"取消": function() {
$(this).dialog("close"); //當(dāng)點擊取消按鈕時，關(guān)閉窗口
},
"添加": function() {
//當(dāng)點擊添加按鈕時，獲取各參數(shù)的值
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,//參數(shù)的個數(shù)和名字要和方法的名字保持一致
success:function(json)//返回的是Json類型的
{
$('#window').dialog("close");
//判斷是否成功
if(json.result=="true")
{
$('#btn_close').click();
alert('恭喜你，修改成功！');
}else{
alert('抱歉，修改失??！');
}
}
});
}
}
});
})
//刪除學(xué)生信息
$('.a_delete').click(function(){
//確認(rèn)是否刪除
if(confirm("是否刪除此條信息？"))
{
$.ajax({
type:'post',
url:'/Student/DeleteStudent',
data:'no='+$(this).attr("sno"),//獲取當(dāng)前對象的屬性(自定義屬性)sno的值，用自定義屬性保存相應(yīng)需要的數(shù)據(jù)
sucess:function(json)
{
if(json.result=="true")
{
alert("恭喜你，已成功刪除！");
}else
{
alert("抱歉，刪除失敗！");
}
}
})
}
})
//修改學(xué)生信息
$('.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: "修改學(xué)生信息",
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>
學(xué)生表
</td>
</tr>
<tr>
<td>
學(xué)號
</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>
學(xué)生表
</td>
</tr>
<tr>
<td>
學(xué)號
</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>
/// 修改學(xué)生信息
/// </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>
/// 刪除學(xué)生信息
/// </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>
/// 添加學(xué)生信息
/// </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>
/// 提供彈出窗口的數(shù)據(jù)
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult WindowData(int id)
{
JsonResult json = new JsonResult();
//這里給json數(shù)據(jù)(這里只是演示，下面數(shù)據(jù)是模擬的)
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 //總頁數(shù)
{
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個數(shù)字頁碼
{
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異步實現(xiàn)增刪改查和分頁
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- ASP.NET MVC 5使用X.PagedList.Mvc進(jìn)行分頁教程(PagedList.Mvc)
- MVC分頁之MvcPager使用詳解
- ASP.NET MVC分頁的實現(xiàn)方法
- ASP.NET MVC分頁和排序功能實現(xiàn)
- ASP.NET MVC5 實現(xiàn)分頁查詢的示例代碼
- ASP.NET MVC4 HtmlHelper擴展類，實現(xiàn)分頁功能
- Asp.net MVC 中利用jquery datatables 實現(xiàn)數(shù)據(jù)分頁顯示功能
- ASP.NET MVC4 Razor模板簡易分頁效果
- ASP.NET MVC+EF在服務(wù)端分頁使用jqGrid以及jquery Datatables的注意事項
- MVC使用MvcPager實現(xiàn)分頁效果
相關(guān)文章
jQuery EasyUI中DataGird動態(tài)生成列的方法
EasyUI中使用DataGird顯示數(shù)據(jù)列表中，有時需要根據(jù)需要顯示不同的列，例如，在權(quán)限管理中，不同的用戶登錄后只能查看自己權(quán)限范圍內(nèi)的列表字段，這就需要DataGird動態(tài)組合列，下面介紹EasyUI中DataGird動態(tài)生成列的方法2016-04-04
這篇文章主要介紹了使用jquery插件qrcode生成二維碼的方法，需要的朋友可以參考下2015-10-10
jquery實現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果
這篇文章主要介紹了jquery實現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果,涉及jquery鼠標(biāo)點擊及事件綁定等相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jquery 實現(xiàn)輪播圖相關(guān)資料,經(jīng)過一段時間學(xué)習(xí)jquery 的知識，這里寫一個簡單的輪播圖，需要的朋友可以參考下2016-10-10
jQuery實現(xiàn)動態(tài)給table賦值的方法示例
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)給table賦值的方法,結(jié)合具體實例形式分析了jQuery動態(tài)操作table表格節(jié)點的相關(guān)技巧,需要的朋友可以參考下2017-07-07
ThinkPHP+jquery實現(xiàn)“加載更多”功能代碼
本篇文章主要介紹了ThinkPHP+jquery實現(xiàn)“加載更多”功能代碼，以實例代碼講訴了加載更多的代碼實現(xiàn),非常具有實用價值,需要的朋友可以參考下2017-03-03
jquery實現(xiàn)仿Flash的橫向滑動菜單效果代碼
這篇文章主要介紹了jquery實現(xiàn)仿Flash的橫向滑動菜單效果代碼,可實現(xiàn)滑塊跟隨鼠標(biāo)滑動效果的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
jQuery判斷網(wǎng)頁是否已經(jīng)滾動到瀏覽器底部的實現(xiàn)方法
最近做項目遇到這樣的需求，要求基于jq判斷網(wǎng)頁是否已經(jīng)滾動到瀏覽器底部了，下面小編給大家分享實例代碼，需要的朋友參考下吧2017-10-10
改善網(wǎng)頁的用戶體驗，可以從以下幾個方面入手：菜單欄，tab，登錄/注冊，搜索，以及404頁面。對于每一方面的優(yōu)化，Gevin分別向大家推薦一個自己私藏的jquery插件，希望對大家有幫助，也歡迎大家多多交流2011-05-05
jQuery的實現(xiàn)原理的模擬代碼 -5 Ajax
對于 xhr 對象來說，我們主要通過異步方式訪問服務(wù)器，在 onreadystatechange 事件中處理服務(wù)器回應(yīng)的內(nèi)容。簡單的 xhr 使用如下所示。2010-08-08