XuebinDing 通过本文主要向大家介绍了jQuery.Ajax,异步,增删改查,分页等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文实例为大家分享了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>