貸款管理系統ajax顯示

阿新 • • 發佈：2020-07-10

 1 public ActionResult Show()
 2         {
 3             return View();
 4         }
 5         public ActionResult Add()
 6         {
 7             return View();
 8         }
 9         public ActionResult Del()
10         {
11             return View();
12         }
13         public ActionResult Upd(int 
 id)
14         {
15             ViewBag.Sid = id;
16             return View();
17         }
18         public ActionResult Getfan()
19         {
20             return View();
21         }
22         public ActionResult Login()
23         {
24             return View();
25         }

@{
    ViewBag.Title = "Show";
}

 
<h2>Show</h2>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<div>
    <input id="txt_Name" type="text" /><input id="Button1" type="button" value="查詢" onclick="Show('first');" />
</div> 

<table id="table" class="table table-bordered">
    <tr>
        <td>編號</td>
        <td>貸款人</td>
        <td>賬號</td>
        <td>身份證號</td>
        <td>日期</td>
        <td>貸款金額</td>
        <td>操作</td>
    </tr>
</table>
<a href="#" onclick="Show('first')">首頁</a>
<a href="#" onclick="Show('prev')">上一頁</a>
<a href="#" onclick="Show('next')">下一頁</a>
<a href="#" onclick="Show('last')">尾頁</a>
<input type="hidden" id="pageIndex" />
<input type="hidden" id="totalPage" />

<script>
    Show('first');
    function Show(page) {
        switch (page) {
            case 'first':
                $('#pageIndex').val(1);
                break;
            case 'prev':
                var num = Number($("#pageIndex").val());
                if (num > 1) {
                    $("#pageIndex").val(num - 1);
                }
                else {
                    $("#pageIndex").val(1);
                }
                break;
            case 'next':
                var num = Number($("#pageIndex").val());
   
                if (num < Number($("#totalPage").val())) {
                    $("#pageIndex").val(num + 1);
                }
                else {
                    $("#pageIndex").val($("#totalPage").val());
                }
                break;
            case 'last':
                $("#pageIndex").val($("#totalPage").val());
                break;
            default: break;
        }

        $.ajax({
            url: "http://localhost:54276/api/Default/Show?pageIndex=" + $("#pageIndex").val() + "&Name=" + $("#txt_Name").val(),
            type: "get",
            
            dataType: "json",
            success: function (d) {
                $("#totalPage").val(d.TotalCount);
                $("table tr:gt(0)").remove();
                
                $(d.List).each(function () {
                    var str = '<tr>'
                        + '<td>' + this.Id + '</td>'
                        + '<td>' + this.Name + '</td>'
                        + '<td>' + this.Zhon + '</td>'
                        + '<td>' + this.identit + '</td>'
                        + '<td>' + this.DDate + '</td>'
                        + '<td>' + this.DMoney + '</td>'
                        + '<td><input id="Button1" type="button" value="刪除" onclick="Del(' + this.Id + ')"/><input id="Button1" type="button" value="修改" onclick="Upd(' + this.Id + ')"/></td>'
                        + '</tr>';

                    $("#table tbody").append(str);
                })
            }
        })
    }
    function Del(Sid) {
        if (confirm("確認刪除嗎？")) {
            $.ajax({
                url: "http://localhost:54276/api/Default/Del?id=" + Sid,
                type: "delete",
                dataType: "json",
                success: function (d) {
                    if (d > 0) {
                        alert("刪除成功");
                        location.href = '/Default/Show';
                    }
                    else {
                        alert("刪除失敗");
                    }
                }
            })
        }
    }

    function Upd(sid) {
        location.href = '/Default/Upd?Id=' + sid;
    }
    
</script>

@{
    ViewBag.Title = "Add";
}

<h2>Add</h2>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Content/My97DatePicker/WdatePicker.js"></script>
<table>
    <tr>
        <td>貸款人</td>
        <td><input id="Text1" type="text" /></td>
    </tr>
    <tr>
        <td>賬號</td>
        <td><input id="Text2" type="text" /></td>
    </tr>
    <tr>
        <td>身份證號</td>
        <td><input id="Text3" type="text" /></td>
    </tr>
    <tr>
        <td>日期</td>
        <td><input id="Text4" type="text" onclick="WdatePicker()" /></td>
    </tr>
    <tr>
        <td>貸款金額</td>
        <td><input id="Text5" type="text" /></td>
    </tr>
    <tr>
        <td></td>
        <td><input id="Button1" type="button" value="新增"  onclick="Add()"/></td>
    </tr>

</table>
<script>
    function Add() {
        var obj = {
            Name: $("#Text1").val(),
            Zhon: $("#Text2").val(),
            identit: $("#Text3").val(),
            DDate: $("#Text4").val(),
            DMoney: $("#Text5").val()
        }
        $.ajax({
            url: "http://localhost:54276/api/Default/Add",
            type: "post",
            dataType: "json",
            data: obj,
            success: function (d) {
                if (d>0) {
                    alert("新增成功");
                    location.href = '/Default/Show';
                }
                else {
                    alert("新增失敗");
                }
            }
        })
    }
</script>

@{
    ViewBag.Title = "Login";
}

<h2>Login</h2>

<table>
    <tr>
        <td>使用者名稱</td>
        <td><input id="txt_Name" type="text" /></td>
    </tr>
    <tr>
        <td>密碼</td>
        <td><input id="txt_Pwd" type="text" /></td>
    </tr>
    <tr>
        <td></td>
        <td><input id="Button1" type="button" value="登入" onclick="Login()" /></td>
    </tr>
</table>
<script>
    function Login() {
        $.ajax({
            url: "http://localhost:54276/api/Default/Login",
            type: "get",
            dataType: "json",
            data: { Name: $("#txt_Name").val(), Pwd: $("#txt_Pwd").val() },
            success: function (d) {
                if (d>0) {
                    alert("登入成功");
                    location.href = '/Default/Add';

                }
                else {
                    alert("登入失敗");
                }
            }
        })
    }
</script>

@{
    ViewBag.Title = "Upd";
}

<h2>Upd</h2>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Content/My97DatePicker/WdatePicker.js"></script>

<input type="hidden" id="txt_Id" value="@ViewBag.Sid"/>
<table>
    <tr>
        <td>貸款人</td>
        <td><input id="Text1" type="text" /></td>
    </tr>
    <tr>
        <td>賬號</td>
        <td><input id="Text2" type="text" /></td>
    </tr>
    <tr>
        <td>身份證號</td>
        <td><input id="Text3" type="text" /></td>
    </tr>
    <tr>
        <td>日期</td>
        <td><input id="Text4" type="text" onclick="WdatePicker()"/></td>
    </tr>
    <tr>
        <td>貸款金額</td>
        <td><input id="Text5" type="text" /></td>
    </tr>
    <tr>
        <td></td>
        <td><input id="Button1" type="button" value="修改" onclick="Upd()" /></td>
    </tr>

</table>
<script>
    $(function () {
        
        $.ajax({
            url: "http://localhost:54276/api/Default/Getfan",
            type: "get",
            async: false,
            data: { DId: $("#txt_Id").val() },
            dataType: "json",

            success: function (d) {
                $("#txt_Id").val(d.Id);
                $("#Text1").val(d.Name);
                $("#Text2").val(d.Zhon);
                $("#Text3").val(d.identit);
                $("#Text4").val(d.DDate);
                $("#Text5").val(d.DMoney);

            }
        })
    })
        
    
    
    function Upd() {
        var obj = {
            Id: $("#txt_Id").val(),
            Name: $("#Text1").val(),
            Zhon: $("#Text2").val(),
            identit: $("#Text3").val(),
            DDate: $("#Text4").val(),
            DMoney: $("#Text5").val()

        };
        $.ajax({
            url: "http://localhost:54276/api/Default/Upd",
            type: "post",
            dataType: "json",
            
            data: obj,
            contentType: "application/x-www-form-urlencoded",
            success: function (d) {
                if (d>0) {
                    alert("修改成功");
                    location.href = '/Default/Show';
                }
                else {
                    alert("修改失敗");
                }
            }
        })
    }
</script>