/// <summary> /// 上传文件 控制器端 /// public class FileOperationController : ApiController ///{ /// [HttpPost] /// public FileResult UpLoad() /// { /// return help.UpLoad(); /// } ///} /// /// /// 上传文件 客户端 ///<input type = "file" id="f1" /> ////<input type = "button" value="aa" onclick="ff()"/> ///< script > /// function ff() ///{ /// var formData = new FormData(); /// var file = document.getElementById("f1").files[0]; /// formData.append("fileInfo", file); /// $.ajax({ /// url: "https://localhost:44370/api/FileOperation/UpLoad", /// type: "POST", /// data: formData, /// contentType: false,//必须false才会自动加上正确的Content-Type /// processData: false,//必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理 /// success: function(data) { /// if (data.Code < 0) /// alert(data.Msg) /// else /// alert(data.Url) /// }, /// error: function(data) { /// alert("上传失败！"); /// } /// }); ///} ///</script>
页面
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Update</title> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <script> $(function () { Ulst(); FT(id); }) var id = location.href.split("=")[1]; function Modify() { var obj = {}; obj.Name = $("#txt_Name").val(); obj.Age = $("#txt_Age").val(); obj.Score = $("#txt_Score").val(); obj.CId = $("#sel_Cour").val(); $.ajax({ url: "http://localhost:55230/api/Modify", data: obj, dataType: "json", type: "post", success: function (data) { if (data > 0) { alert("修改成功"); } else { alert("修改失败"); } } }) } function FT(id) { $.ajax({ url: "http://localhost:55230/api/GetId", data: { id:id }, dataType: "json", type: "get", success: function (data) { $("#txt_Name").val(data.Name); $("#txt_Age").val(data.Age); $("#txt_Score").val(data.Score); //$("#sel_Cour").val(data.CId); } }) } function Ulst() { $.ajax({ url: "http://localhost:55230/api/GetC", data: null, dataType: "json", type: "get", success: function (data) { $(data).each(function (i, n) { var str = "<option value='" + n.Id + "'>"+n.CName+"</option>"; $("#sel_Cour").append(str); }) } }) } </script> </head> <body> <div> <table> <tr> <td>姓名:</td> <td><input type="text" id="txt_Name" /></td> </tr> <tr> <td>年龄:</td> <td><input type="text" id="txt_Age" /></td> </tr> <tr> <td>成绩:</td> <td><input type="text" id="txt_Score" /></td> </tr> <tr> <td>课程:</td> <td> <select id="sel_Cour"> <option value="value">请选择</option> </select> </td> </tr> <tr> <td><input type="button" id="btn_Co" value="提交" onclick="Modify()" /></td> </tr> </table> </div> </body> </html>
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Add</title> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <script> $(function () { Ulst(); }) function Comit() { var obj = {}; obj.Name = $("#txt_Name").val(); obj.Age = $("#txt_Age").val(); obj.Score = $("#txt_Score").val(); obj.CId = $("#sel_Cour").val(); $.ajax({ url: "http://localhost:55230/api/AddS", data: obj, dataType: "json", type: "post", success: function (data) { if (data > 0) { location.href = "/Default/Xx"; } else { alert("添加失败"); } } }) } //下拉框绑定 function Ulst() { $.ajax({ url: "http://localhost:55230/api/GetC", data: null, dataType: "json", type: "get", success: function (data) { $(data).each(function (i, n) { var str = "<option value='" + n.Id + "'>"+n.CName+"</option>"; $("#sel_Cour").append(str); }) } }) } </script> </head> <body> <div> <table> <tr> <td>姓名:</td> <td><input type="text" id="txt_Name" /></td> </tr> <tr> <td>年龄:</td> <td><input type="text" id="txt_Age" /></td> </tr> <tr> <td>成绩:</td> <td><input type="text" id="txt_Score" /></td> </tr> <tr> <td>课程:</td> <td> <select id="sel_Cour"> <option value="value">请选择</option> </select> </td> </tr> <tr> <td><input type="button" id="btn_Co" value="提交" onclick="Comit()"/></td> </tr> </table> </div> </body> </html>
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload = function () { var time = 5; var secondEle = document.getElementById("second"); var timer = setInterval(function () { secondEle.innerHTML = time; time--; if (time == 0) { clearInterval(timer); location.href = "/Default/Show"; } }, 1000); } </script> </head> <body> <span style="font-size:40px;">添加成功！</span><br /> 页面会在<span style="color:red" id="second">5</span>秒钟后跳转，如不跳转点击<a href="/Default/Show">这里</a>! </body> </html>
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/Content/TabSheet.css" rel="stylesheet" /> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script> $(document).ready(function () { $("#tablist li").each(function (index) { $(this).click(function () { $(".contentin").removeClass("contentin"); $(".tabin").removeClass("tabin"); $(".content-box div").eq(index).addClass("contentin"); $(this).addClass("tabin") }); }) }) </script> </head> <body> <div class="box"> <ul id="tablist"> <li class="tabin">Section 1</li> <li>Section 2</li> <li>Section 3</li> </ul> <div class="content-box"> <div class="content contentin"> <h1>Section 1</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque. </p> </div> <div class="content"> <h1>Section 2</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque. </p> </div> <div class="content"> <h1>Section 3</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque. </p> </div> </div> </div> </body> </html>
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Show</title> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script> var currentpage = 1;/*当前页*/ var totalPage = 1;/*总页数*/ $(function () { Show(1); document.cookie = "Name=" + totalPage; }) function Show(page) { var obj = {}; obj.pagesize = 2; obj.currentpage = page; obj.name = $("#txt_Name").val(); $.ajax({ url: "http://localhost:55230/api/QueryS", data: obj, dataType: "json", type: "get", success: function (data) { var str = ""; $("#totalCount").html(data.totalCount); $("#totalPage").html(data.totalPage); $("#currentPage").html(data.currentpage); currentpage = data.currentpage; totalPage = data.totalPage; $(data.list).each(function () { str += "<tr>" + "<td>" + this.Id + "</td>" + "<td>" + this.Name + "</td>" + "<td>" + this.Age + "</td>" + "<td>" + this.Score + "</td>" + "<td>" + this.CId + "</td>" + "<td><input value='删除' type='button' onclick='Del(" + this.Id + ")'/><input value='修改' type='button' onclick='Up(" + this.Id + ")'/><input value='改状态' type='button' onclick='UpState(" + this.Id + ")'/></td></tr>"; $("#DataList").empty(); $("#DataList").append(str); }) } }) } function UpState(id) { $.ajax({ url: "http://localhost:55230/api/ModifySt", data: { id: id }, dataType: "json", type: "get", success: function (d) { if (d > 0) { alert("成功"); } else { alert("失败"); } } }) } //全选反选 $("#Checed").click(function () { $(".Checeds").prop("checked", this.checked); }) $("#Checed1").click(function () { $(".Checeds").each(function () { this.checked = !this.checked; }) }) //批量删除 function dels() { var arr = []; $(".Checeds:checked").each(function () { arr.push(this.value); }) $.ajax({ url: "http://localhost:57854/api/DelS", data: {id:arr.toString()}, dataType: "json", type: "get", success: function (data) { if (data>0) { alert("批删成功"); Show(); } else { alert("批删失败"); } } }) } function Up(id) { location.href = "/Default/Update?Id=" + id; } function Del(id) { if (confirm("确认删除吗?")) { $.ajax({ url: "http://localhost:55230/api/DelS", data: { id: id }, dataType: "json", type: "get", success: function (data) { if (data > 0) { alert("删除成功"); } else { alert("删除失败"); } } }) } } function GetExcel() { location.href = "http://localhost:55230/api/Gete"; } </script> </head> <body> <div> 姓名: <input type="text" id="txt_Name" /> <input type="button" value="查询" onclick="Show(1)" /> <input type="button" onclick="GetExcel()" value="导出报表"/> <table class="table table-bordered"> <tr style="background-color:silver"> <td>编号</td> <td>姓名</td> <td>年龄</td> <td>分数</td> <td>课程</td> <td>操作</td> </tr> <tbody id="DataList"></tbody> </table> </div> <div> <table class="table"> <tr> <td>总共<span id="totalCount"></span>条记录</td> <td>第<span id="currentPage"></span>页</td> <td>共<span id="totalPage"></span>页</td> <td><a href="javascript:;" onclick="Show(1)">首页</a></td> <td><a href="javascript:;" onclick="Show(currentpage-1)">上一页</a></td> <td><a href="javascript:;" onclick="Show(currentpage+1)">下一页</a></td> <td><a href="javascript:;" onclick="Show(totalPage)">尾页</a></td> </tr> </table> </div> </body> </html>