只写了Mvc
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplicationMVC_AJax.Controllers
{
public class DefaultController : Controller
{
// GET: Default
[HttpGet]
public ActionResult Index()
{
return View();
}
public ActionResult Add()
{
return View();
}
public ActionResult Update(int id)
{
ViewBag.Sid = id;
return View();
}
}
}
//添加的
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Add</title>
<script src="~/Script/jquery-1.10.2.min.js"></script>
<script>
//jquery 构造函数
$(function () {
//显示下拉
dropSchool();
dropClass($("#schoolInfo").val());
$("#schoolInfo").change(function () {
dropClass($("#schoolInfo").val());
});
});
function dropSchool() {
//AJax实现跨域访问API
$.ajax({
url: "http://localhost:2923/api/default/GetAllSchool",//API地址
type: "get",//请求方式
dataType: "json",//数据格式
async: false,//是否异步默认是true,true:异步 false:同步
success: function (data) {
//把内容置空
$("#schoolInfo").empty();
$("#schoolInfo").append(‘<option value=0>==请选择==</option>‘);
//循环取数据
$(data).each(function () {
var str = ‘<option value=‘ + this.SchoolId + ‘>‘ + this.SchoolName + ‘</option>‘;
$("#schoolInfo").append(str);
});
}
});
}
function dropClass(schId) {
//AJax实现跨域访问API
$.ajax({
url: "http://localhost:2923/api/default/GetAllClassInfoBySchId?schoolId=" + schId,//API地址
type: "get",//请求方式
dataType: "json",//数据格式
async: false,//是否异步默认是true,true:异步 false:同步
success: function (data) {
//把内容置空
$("#classInfo").empty();
$("#classInfo").append(‘<option value=0>==请选择==</option>‘);
//循环取数据
$(data).each(function () {
var str = ‘<option value=‘ + this.ClassId + ‘>‘ + this.ClassName + ‘</option>‘;
$("#classInfo").append(str);
});
}
});
}
function AddStu() {
//public string Name { get; set; }
//public int Age { get; set; }
//public bool Sex { get; set; }
//public string Birth { get; set; }
//public int ClassId { get; set; }
var stud = {
Name: $("#TextName").val(),
Age: $("#TextAge").val(),
Sex: $("#Radio1").val(),
Birth: $("#TextBirth").val(),
ClassId: $("#classInfo").val()
};
if (stud.Name == "") {
alert("请输入姓名");
return;
}
if (stud.Age == "") {
alert("请输入年龄");
return;
}
if (stud.ClassId == 0) {
alert("请选择班级");
return;
}
//AJax实现跨域访问API
$.ajax({
url: "http://localhost:2923/api/default/AddStudent",//API地址
type: "post",//请求方式
dataType: "json",//数据格式
data: stud,
async: false,//是否异步默认是true,true:异步 false:同步
success: function (data) {
if (data > 0) {
alert("新增成功");
location.href = "/default/index";
}
else {
alert("新增失败");
}
}
//error: function (emessage) {
// alert(emessage);
//}
});
}
</script>
</head>
<body>
@*<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>生日</td>
<td>班级</td>
<td>学院</td>*@
<div>
<table>
<tr>
<td>姓名:<input id="TextName" type="text" /></td>
</tr>
<tr>
<td>年龄:<input id="TextAge" type="text" /></td>
</tr>
<tr>
<td>性别:<input id="Radio1" type="radio" value="True" />男 <input id="Radio1" type="radio" value="False" />女</td>
</tr>
<tr>
<td>生日:<input id="TextBirth" type="date" /></td>
</tr>
<tr>
<td>
学校:<select id="schoolInfo">
<option></option>
</select>
</td>
</tr>
<tr>
<td>
班级:<select id="classInfo">
<option></option>
</select>
</td>
</tr>
<tr>
<td>
<input id="Button1" type="button" value="保存" onclick="AddStu()" />
</td>
</tr>
</table>
</div>
</body>
</html>
//删除反填下拉:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Script/jquery-1.10.2.min.js"></script>
<script>
//jquery 构造函数
$(function () {
//显示下拉
dropSchool();
//班级2级联动
dropClass($("#schoolInfo").val());
$("#schoolInfo").change(function () {
dropClass($("#schoolInfo").val());
});
//显示数据
showData();
});
//string name = null, int classId = 0, int schoolId = 0, string birth = null
function showData() {
//取名称的值
var stuname = $(‘#TextName‘).val();
//取生日的值
var birth = $(‘#birthday‘).val();
//班级的Id
var scid = $(‘#schoolInfo‘).val();
//学校的Id
var cid = $(‘#classInfo‘).val();
//AJax实现跨域访问API
$.ajax({
url: "http://localhost:2923/api/default/GetALLData?name=" + stuname + "&&classId=" + cid + "&&schoolId=" + scid + "&&birth=" + birth,//API地址
type: "get",//请求方式
dataType: "json",//数据格式
success: function (data) {
//把内容置空
$("#mybody").empty();
//循环取数据
$(data).each(function () {
var str = ‘<tr>‘ +
‘<td><input id="CheckboxOne" type="checkbox" value=‘ + this.Id + ‘ onclick="checkOne()" /></td>‘ +
‘<td>‘ + this.Id + ‘</td>‘ +
‘<td>‘ + this.Name + ‘</td>‘ +
‘<td>‘ + this.Age + ‘</td>‘ +
‘<td>‘ + this.Sex + ‘</td>‘ +
‘<td>‘ + this.Birth + ‘</td>‘ +
‘<td>‘ + this.ClassName + ‘</td>‘ +
‘<td>‘ + this.SchoolName + ‘</td>‘ +
‘<td><a href="javascript:updateStu(‘ + this.Id + ‘)">修改</a> <a href="javascript:deleteStu(‘ + this.Id + ‘)">删除</a></td>‘ +
‘</tr>‘;
$("#mybody").append(str);
});
}
});
}
//学校下拉
function dropSchool() {
//AJax实现跨域访问API
$.ajax({
url: "http://localhost:2923/api/default/GetAllSchool",//API地址
type: "get",//请求方式
dataType: "json",//数据格式
async: false,//是否异步默认是true,true:异步 false:同步
success: function (data) {
//把内容置空
$("#schoolInfo").empty();
$("#schoolInfo").append(‘<option value=0>==请选择==</option>‘);
//循环取数据
$(data).each(function () {
var str = ‘<option value=‘ + this.SchoolId + ‘>‘ + this.SchoolName + ‘</option>‘;
$("#schoolInfo").append(str);
});
}
});
}
//班级下拉
function dropClass(schId) {
//AJax实现跨域访问API
$.ajax({
url: "http://localhost:2923/api/default/GetAllClassInfoBySchId?schoolId=" + schId,//API地址
type: "get",//请求方式
dataType: "json",//数据格式
async: false,//是否异步默认是true,true:异步 false:同步
success: function (data) {
//把内容置空
$("#classInfo").empty();
$("#classInfo").append(‘<option value=0>==请选择==</option>‘);
//循环取数据
$(data).each(function () {
var str = ‘<option value=‘ + this.ClassId + ‘>‘ + this.ClassName + ‘</option>‘;
$("#classInfo").append(str);
});
}
});
}
//删除
function deleteStu(sid) {
if (confirm("确认要删除吗?")) {
//AJax实现跨域访问API
$.ajax({
url: "http://localhost:2923/api/default/DeleteStudent?id=" + sid,//API地址
type: "delete",//请求方式
dataType: "json",//数据格式
async: false,//是否异步默认是true,true:异步 false:同步
success: function (data) {
if (data > 0) {
alert("删除成功");
showData();
}
else {
alert("删除失败");
}
}
});
}
}
//反填
function updateStu(sid) {
location.href = "/Default/Update?id=" + sid;
}
//全选,反选
function CheckAll() {
if ($("#CheckboxALL").prop(‘checked‘)) {
$("input[id=CheckboxOne]").each(function () {
$(this).prop(‘checked‘, true);
});
}
else {
$("input[id=CheckboxOne]").each(function () {
$(this).prop(‘checked‘, false);
});
}
}
//单选控制全选
function checkOne() {
var isall = false;
$("input[id=CheckboxOne]").each(function () {
if ($(this).prop(‘checked‘)) {
isall = true;
}
else {
isall = false;
return false;
}
});
if (isall) {
$("#CheckboxALL").prop(‘checked‘, true);
}
else {
$("#CheckboxALL").prop(‘checked‘, false);
}
}
//批量删除
function deleteALL() {
if (confirm("确认要批量删除吗?")) {
var ids = [];
$("input[id=CheckboxOne]:checked").each(function () {
ids.push($(this).val());
});
if (ids.length <= 0) {
alert("请至少选择一项");
return false;
}
//AJax实现跨域访问API
$.ajax({
url: "http://localhost:2923/api/default/DeleteAllStudent?ids=" + ids,//API地址
type: "delete",//请求方式
dataType: "json",//数据格式
async: false,//是否异步默认是true,true:异步 false:同步
success: function (data) {
if (data > 0) {
alert("删除成功");
showData();
}
else {
alert("删除失败");
}
}
});
}
}
</script>
</head>
<body>
@*Id = s.Id,
Name = s.Name,
Age = s.Age,
Sex = s.Sex,
Birth = s.Birth,
ClassId = c.ClassId,
ClassName = c.ClassName,
SchoolId = sch.SchoolId,
SchoolName = sch.SchoolName*@
<div>
<div>
姓名:<input id="TextName" type="text" />
学院:<select id="schoolInfo">
<option value=""></option>
</select>
班级:<select id="classInfo">
<option></option>
</select>
生日:<input id="birthday" type="date" />
<input id="Button1" type="button" value="查询" onclick="showData()" />
<input id="Button1" type="button" value="新增" onclick="location.href=‘/default/Add‘" />
<input id="Button1" type="button" value="批量删除" onclick="deleteALL()" />
</div>
<table>
<tr>
<td><input id="CheckboxALL" type="checkbox" onclick="CheckAll()" />全选</td>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>生日</td>
<td>班级</td>
<td>学院</td>
<td>操作</td>
@*<td><a href="javascript:showData">修改</a><a href="javascript:showData">删除</a></td>*@
</tr>
<tbody id="mybody"></tbody>
</table>
</div>
</body>
</html>
//修改
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Update</title>
<script src="~/Script/jquery-1.10.2.min.js"></script>
<script>
//jquery 构造函数
$(function () {
//显示下拉
dropSchool();
//dropClass($("#schoolInfo").val());
$("#schoolInfo").change(function () {
dropClass($("#schoolInfo").val());
});
//反填
var stuid = $("#HiddenId").val();
$.ajax({
url: "http://localhost:2923/api/default/GetStudentById?id=" + stuid,
type: "get",
dateType: "json",
success: function (data) {
$("#TextName").val(data.Name);
$("#TextAge").val(data.Age);
if (data.Sex) {
$("#Radio1").prop(‘checked‘, true);
}
else {
$("#Radio2").prop(‘checked‘, true);
}
$("#TextBirth").val(data.Birth); //data.Birth
$("#schoolInfo").val(data.SchoolId);
dropClass(data.SchoolId);
$("#classInfo").val(data.ClassId);
}
});
});
function dropSchool() {
//AJax实现跨域访问API
$.ajax({
url: "http://localhost:2923/api/default/GetAllSchool",//API地址
type: "get",//请求方式
dataType: "json",//数据格式
async: false,//是否异步默认是true,true:异步 false:同步
success: function (data) {
//把内容置空
$("#schoolInfo").empty();
$("#schoolInfo").append(‘<option value=0>==请选择==</option>‘);
//循环取数据
$(data).each(function () {
var str = ‘<option value=‘ + this.SchoolId + ‘>‘ + this.SchoolName + ‘</option>‘;
$("#schoolInfo").append(str);
});
}
});
}
function dropClass(schId) {
//AJax实现跨域访问API
$.ajax({
url: "http://localhost:2923/api/default/GetAllClassInfoBySchId?schoolId=" + schId,//API地址
type: "get",//请求方式
dataType: "json",//数据格式
async: false,//是否异步默认是true,true:异步 false:同步
success: function (data) {
//把内容置空
$("#classInfo").empty();
$("#classInfo").append(‘<option value=0>==请选择==</option>‘);
//循环取数据
$(data).each(function () {
var str = ‘<option value=‘ + this.ClassId + ‘>‘ + this.ClassName + ‘</option>‘;
$("#classInfo").append(str);
});
}
});
}
function UpdateStu() {
var stud = {
Id: $("#HiddenId").val(),//修改不要忘了Id赋值
Name: $("#TextName").val(),
Age: $("#TextAge").val(),
Sex: $("input[name=1]").val(),
Birth: $("#TextBirth").val(),
ClassId: $("#classInfo").val()
};
if (stud.Name == "") {
alert("请输入姓名");
return;
}
if (stud.Age == "") {
alert("请输入年龄");
return;
}
if (stud.ClassId == 0) {
alert("请选择班级");
return;
}
//AJax实现跨域访问API
$.ajax({
url: "http://localhost:2923/api/default/UpdateStudent",//API地址
type: "put",//请求方式
dataType: "json",//数据格式
data: stud,
async: false,//是否异步默认是true,true:异步 false:同步
success: function (data) {
if (data > 0) {
alert("修改成功");
location.href = "/default/index";
}
else {
alert("修改失败");
}
}
//error: function (emessage) {
// alert(emessage);
//}
});
}
</script>
</head>
<body>
<div>
<div>
<input id="HiddenId" type="hidden" value="@ViewBag.Sid" />
<table>
<tr>
<td>姓名:<input id="TextName" type="text" /></td>
</tr>
<tr>
<td>年龄:<input id="TextAge" type="text" /></td>
</tr>
<tr>
<td>性别:<input id="Radio1" type="radio" value="True" name="1" />男 <input id="Radio2" type="radio" value="False" name="1" />女</td>
</tr>
<tr>
<td>生日:<input id="TextBirth" type="date" /></td>
</tr>
<tr>
<td>
学校:<select id="schoolInfo">
<option></option>
</select>
</td>
</tr>
<tr>
<td>
班级:<select id="classInfo">
<option></option>
</select>
</td>
</tr>
<tr>
<td>
<input id="Button1" type="button" value="保存" onclick="UpdateStu()" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
原文:https://www.cnblogs.com/lgc200421/p/13544371.html