引用文件
<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 {
font-size:larger;
text-align: center;
color:cornflowerblue;
}
</style>
显示 删除方法
<div style="width:100%; height:100%; margin: 0 auto; text-align:center; line-height: 200px">
<table class="table table-striped" >
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>用户角色</th>
<th>用户状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="div">
</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?id=" + UserId;
}
</script>
添加方法
<div style="width:50%; margin:auto;text-align:center;padding-top:20px;">
<div class ="alert alert-success">请添加用户的信息-_-!</div>
<form>
<table class="table table-striped">
<tr>
<td>姓名:</td>
<td>
<input type="text" class="form-control" id="txtname" placeholder="请输入姓名" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="text" class="form-control" id="txtpwd" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input id="radio1" type="radio" name="Gender" value="0" checked="checked" /><span>男</span><input id="radio2" 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 id="btn1" type="button" class="btn btn-info" 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;padding-top:100px;">
<div class="alert alert-success">请修改用户的信息-_-!</div>
<form>
<table>
<tr>
<td>编号:</td>
<td>
<input type="text" class="form-control" id="userid" value="@Model.UserId" readonly="true">
</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<input type="text" class="form-control" id="txtname" value="@Model.UserName" placeholder="请输入姓名" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="text" class="form-control" id="txtpwd" value="@Model.PassWord" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input id="radio1" type="radio" name="Gender" value="@Model.Gender" checked="checked" /><span>男</span><input id="radio2" type="radio" name="Gender" value="@Model.Gender" /><span>女</span>
</td>
</tr>
<tr>
<td>角色:</td>
<td>
<select id="Select1" ></select>
</td>
</tr>
</table>
<input id="btn1" 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>