AJAX普通增删改查

引用文件

<link href="~/BootstrapSouce/css/bootstrap.css" rel="stylesheet" />
<script src="~/BootstrapSouce/js/bootstrap.min.js"></script>
<script src="~/BootstrapSouce/js/jquery.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

样式

<style>
th {
text-align:center;
}
td {

text-align: center;
color:cornflowerblue;
}
</style>

显示 删除方法

<div style="width:100%; height:100%; margin: 0 auto; text-align:center; line-height: 200px">
<table >

<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>用户角色</th>
<th>用户状态</th>
<th>操作</th>
</tr>
</thead>
<tbody >

</tbody>
</table>
</div>
<script>

$(function () {
$.ajax({
type: "get",
url: "/UserInfo/UserInfoShowDo",
success: function (obj) {
obj = JSON.parse(obj);
for (var i = 0; i < obj.length; i++) {
var gender = "";
var state = "";
if (obj[i].Gender == 1) {
gender = "女";
}
else {
gender = "男";
}
if (obj[i].UserState == 0) {
state = "停用";
}
else {
state = "可用";
}
$("#div").append("<tr><td>" + obj[i].UserId + "</td><td>" + obj[i].UserName + "</td><td>" + gender + "</td><td>" + obj[i].RoleName + "</td><td>" + state + "</td><td><input type=‘button‘ value=‘删除‘ class=‘btn btn-info‘ onclick = ‘Del(" + obj[i].UserId + ")‘/><input type=‘button‘ value=‘修改‘ class=‘btn btn-info‘ onclick = ‘Upt(" + obj[i].UserId + ")‘/></td></tr>");
}
}
})
})

function Del(UserId) {
if (confirm("确定要删除吗?")) {
$.ajax({
type: "post",
url: "/UserInfo/DelUserInfoDo",
datatype: "json",
data: { Id: UserId },
success: function (obj) {
if (obj > 0) {
alert("删除成功");
location.href = "/UserInfo/UserInfoShow";
}
else {
alert("删除失败");
}
}
})

}
}

function Upt(UserId) {
location.href = "/UserInfo/UptUserInfo?width:50%; margin:auto;text-align:center;">
<div class ="alert alert-success">请添加用户的信息-_-!</div>

<form>
<table >
<tr>
<td>姓名:</td>
<td>
<input type="text" placeholder="请输入姓名" />
</td>
</tr>

<tr>
<td>密码:</td>
<td>
<input type="text" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="Gender" value="0" checked="checked" /><span>男</span><input type="radio" name="Gender" value="1" /><span>女</span>
</td>
</tr>

<tr>
<td>状态:</td>
<td>
@Html.RadioButton("UserState",1)<span>可用</span>
@Html.RadioButton("UserState",0)<span>不可用</span>
</td>
</tr>

</table>
<input type="button" value="添加" />
</form>
</div>
<script>
$.ajax({
type: "post",
url: "/UserInfo/RoleInfoShowDo",
datatype: "json",
success: function (obj) {
obj = JSON.parse(obj);
for (var i = 0; i < obj.length; i++) {
$("#Select1").append("<option value=‘" + obj[i].RoleId + "‘>" + obj[i].RoleName + "</option>")
}
}
})

$("#btn1").click(function () {
var name = $("#txtname").val();
var pwd = $("#txtpwd").val();
var gender = $(":radio:checked").val();
var roleid = $("#Select1").val();
var userstate = $("#UserState").val();

if (name == "" || pwd == "" || userstate == "") {
alert("信息不完整");
return;
}
$.ajax({
type: "post",
url: "/UserInfo/AddUserInfoDo",
datatype: "json",
data: { UserName: name, PassWord: pwd, Gender: gender, RoleId: roleid, UserState: userstate },
success: function (obj) {
if (obj > 0) {
alert("添加成功");
location.href = "/UserInfo/UserInfoShow";
}
else {
alert("添加失败");
}
}
})
})

</script>

修改+返填

<div style="width:50%; margin:auto;text-align:center;">
<div >请修改用户的信息-_-!</div>

<form>
<table>
<tr>
<td>编号:</td>
<td>
<input type="text" value="@Model.UserId" readonly="true">
</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<input type="text" value="@Model.UserName" placeholder="请输入姓名" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="text" value="@Model.PassWord" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="Gender" value="@Model.Gender" checked="checked" /><span>男</span><input type="radio" name="Gender" value="@Model.Gender" /><span>女</span>
</td>
</tr>
<tr>
<td>角色:</td>
<td>
<select ></select>
</td>
</tr>

</table>
<input type="button" value="修改" />
</form>
</div>
<script>
$.ajax({
type: "post",
url: "/UserInfo/RoleInfoShowDo",
datatype: "json",
success: function (obj) {
obj = JSON.parse(obj);
for (var i = 0; i < obj.length; i++) {
$("#Select1").append("<option value=‘" + obj[i].RoleId + "‘>" + obj[i].RoleName + "</option>")
}
}
})

$("#btn1").click(function () {
var userid = $("#userid").val();
var name = $("#txtname").val();
var pwd = $("#txtpwd").val();
var gender = $(":radio:checked").val();
var roleid = $("#Select1").val();

if (name == "" || pwd == "" ) {
alert("信息不完整");
return;
}
$.ajax({
type: "post",
url: "/UserInfo/UptUserInfoDo",
datatype: "json",
data: { UserName: name, PassWord: pwd, Gender: gender, RoleId: roleid,UserId:userid },
success: function (obj) {
if (obj > 0) {
alert("修改成功");
location.href = "/UserInfo/UserInfoShow";
}
else {
alert("修改失败");
}
}
})
})

</script>

AJAX普通增删改查

原文地址：http://www.cnblogs.com/neishang1/p/7856232.html