MVC+jQuery.Ajax異步實(shí)現(xiàn)增刪改查和分頁

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：2439 次日期：2016-07-02 11:32:11

溫馨提示：易賢網(wǎng)小編為您整理了“MVC+jQuery.Ajax異步實(shí)現(xiàn)增刪改查和分頁”,方便廣大網(wǎng)友查閱！

這篇文章主要為大家詳細(xì)介紹了MVC結(jié)合jQuery.Ajax異步實(shí)現(xiàn)增刪改查和分頁的相關(guān)資料，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了MVC+jQuery.Ajax異步實(shí)現(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">

$(function(){

//添加學(xué)生信息

$('#a_add').click(function(){

$('#window').dialog({

title: "添加學(xué)生信息",

width: 300,

height: 200,

modal: true,

buttons: {

"取消": function() {

$(this).dialog("close"); //當(dāng)點(diǎn)擊取消按鈕時(shí)，關(guān)閉窗口

"添加": function() {

//當(dāng)點(diǎn)擊添加按鈕時(shí)，獲取各參數(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ù)的個(gè)數(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)前對(duì)象的屬性(自定義屬性)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é)號(hào)

</td>

<td>

姓名

</td>

<td>

性別

</td>

<td>

生日

</td>

<td>

班級(jí)

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

</td>

</tr>

<% } %>

</tbody>

<tfoot>

<tr>

<td>

全選

</td>

</td>

</tr>

</tfoot>

</table>

<%=Html.MikePager(Model.GetStudentList)%>

<br />

<table>

<thead>

<tr>

<td>

學(xué)生表

</td>

</tr>

<tr>

<td>

學(xué)號(hào)

</td>

<td>

姓名

</td>

<td>

性別

</td>

<td>

生日

</td>

<td>

班級(jí)

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

編號(hào)

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

姓名：<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 />

班級(jí)：<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);//返回一個(gè)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、兩個(gè)分頁輔助類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個(gè)數(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

}

更多信息請(qǐng)查看網(wǎng)絡(luò)編程

上一篇：ajax跨域調(diào)用webservice的實(shí)現(xiàn)代碼

下一篇：基于Jquery插件Uploadify實(shí)現(xiàn)實(shí)時(shí)顯示進(jìn)度條上傳圖片

易賢網(wǎng)手機(jī)網(wǎng)站地址：MVC+jQuery.Ajax異步實(shí)現(xiàn)增刪改查和分頁

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長(zhǎng)的行的實(shí)現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實(shí)例詳解10月30日

Objective-C Json 實(shí)例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計(jì)實(shí)現(xiàn)方法10月30日

python生成二維碼的實(shí)例詳解10月30日

Python批量更改文件名的實(shí)現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實(shí)例代碼10月30日

vue.js todolist實(shí)現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實(shí)例代碼10月30日

apache 開啟重定向 rewrite的實(shí)現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點(diǎn)安裝教程10月23日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026上岸·考公考編培訓(xùn)報(bào)班

報(bào)班類型
姓名
手機(jī)號(hào)
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合