AJAX普通增删改查

Posted 2020-10-14

引用文件

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