aspx:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajax.aspx.cs" Inherits="ajax" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="JS/jquery-1.7.2.min.js"></script> <link href="CSS/StyleSheet.css" rel="stylesheet" /> <script src="DatePicker/WdatePicker.js"></script> </head> <body> <form id="form1" runat="server"> <input type="button" value="刷新" id="aa11" /> <input type="button" value="添加" id="TJ" /> <%--登录弹窗--%> <%--修改弹窗--%> <div id="tc" class="tc"> <div id="tc-top" class="tc-top"> 学生信息修改 </div> <div id="tc-main" class="tc-main"> <div class="divc"> <div class="divcc1">编号:</div> <div class="divcc2"> <asp:TextBox ID="tids" runat="server" ReadOnly="True"></asp:TextBox> </div> </div> <div class="divc"> <div class="divcc1">姓名:</div> <div class="divcc2"> <asp:TextBox ID="tname" runat="server"></asp:TextBox> </div> </div> <div class="divc"> <div class="divcc1">性别:</div> <div class="divcc2"> <asp:RadioButtonList ID="tsex" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow"> <asp:ListItem Text="男" Value="true"></asp:ListItem> <asp:ListItem Text="女" Value="false"></asp:ListItem> </asp:RadioButtonList> </div> </div> <div class="divc"> <div class="divcc1">生日:</div> <div class="divcc2"> <asp:TextBox ID="tbirthday" runat="server"></asp:TextBox> </div> </div> <div class="divc"> <div class="divcc1">民族:</div> <div class="divcc2"> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList> </div> </div> <div class="divc"> <div class="divcc1">班级:</div> <div class="divcc2"> <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList> </div> </div> <div class="divc"> <div class="divcc1">成绩:</div> <div class="divcc2"> <asp:TextBox ID="tscore" runat="server"></asp:TextBox> </div> </div> </div> <div id="tc-bottom" class="tc-bottom"> <div οnclick="tcbtn1();" id="tc-btn1" class="tc-btn1"> 修改 </div> </div> </div> <div id="tc-zz" class="tc-zz"> </div> <%--添加弹窗--%> <div id="tc1" class="tc"> <div id="tc-top1" class="tc-top"> 学生信息添加 </div> <div id="tc-main1" class="tc-main"> <div class="divc"> <div class="divcc1">姓名:</div> <div class="divcc2"> <asp:TextBox ID="tname1" runat="server"></asp:TextBox> </div> </div> <div class="divc"> <div class="divcc1">性别:</div> <div class="divcc2"> <asp:RadioButtonList ID="tsex1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow"> <asp:ListItem Text="男" Value="true" Selected="True"></asp:ListItem> <asp:ListItem Text="女" Value="false"></asp:ListItem> </asp:RadioButtonList> </div> </div> <div class="divc"> <div class="divcc1">生日:</div> <div class="divcc2"> <asp:TextBox ID="tbirthday1" runat="server"></asp:TextBox> </div> </div> <div class="divc"> <div class="divcc1">民族:</div> <div class="divcc2"> <asp:DropDownList ID="DropDownList11" runat="server"></asp:DropDownList> </div> </div> <div class="divc"> <div class="divcc1">班级:</div> <div class="divcc2"> <asp:DropDownList ID="DropDownList22" runat="server"></asp:DropDownList> </div> </div> <div class="divc"> <div class="divcc1">成绩:</div> <div class="divcc2"> <asp:TextBox ID="tscore1" runat="server"></asp:TextBox> </div> </div> </div> <div id="Div4" class="tc-bottom"> <div οnclick="tcbtn2();" id="tcbtn2" class="tc-btn1"> 添加 </div> </div> </div> <div id="tc-zz1" class="tc-zz"> </div> <div> <%-- 展示内容--%> <table style="width: 1000px; position: relative; margin: 0 auto; background-color: green; text-align: center;"> <thead> <tr style="color: white;"> <td>编号</td> <td>姓名</td> <td>性别</td> <td>生日</td> <td>民族</td> <td>班级</td> <td>成绩</td> <td>操作</td> </tr> </thead> <tbody id="tt"></tbody> </table> </div> </form> </body> </html> <script type="text/ecmascript"> //生日 document.getElementById("tbirthday").onfocus = function () { WdatePicker({ readOnly: true, maxDate: '%y-%M-%d' }); } document.getElementById("tbirthday1").onfocus = function () { WdatePicker({ readOnly: true, maxDate: '%y-%M-%d' }); } //修改 $("#XG").live("click", function () { var a = $(this).attr("class"); $.ajax({ url: "updata1.ashx", data: { "ids": a }, type: "post", dataType: "json", success: function (m) { $("#tids").val(m[0].ids); $("#tname").val(m[0].name); if (m[0].sex == 'True') $("#tsex").children("input:eq(0)").get(0).checked = true; else $("#tsex").children("input:eq(1)").get(0).checked = true; $("#tbirthday").val(m[0].birthday); $("#DropDownList1").val(m[0].nation); $("#DropDownList2").val(m[0].class); $("#tscore").val(m[0].score); }, error: function () { alert("数据错误!"); } }); $("#tc").animate({ top: 100 }, 500); $("#tc-zz").css("display", "block"); }); function tcbtn1() { $.ajax({ url: "updata2.ashx", data: { "ids": $("#tids").val(), "name": $("#tname").val(), "sex": $("#tsex").children("input:eq(0)").get(0).checked, "birthday": $("#tbirthday").val(), "nation": $("#DropDownList1").val(), "class": $("#DropDownList2").val(), "score": $("#tscore").val() }, type: "post", dataType: "json", success: function (m) { $("#tt").text(""); for (var a = 0; a < m.length; a++) { var ee = " <tr style=\"background-color: white;\">"; ee += "<td id=\"tr" + a + "\">" + m[a].ids + "</td>"; ee += "<td>" + m[a].name + "</td>"; ee += "<td>" + m[a].sex + "</td>"; ee += "<td>" + m[a].birthday + "</td>"; ee += "<td>" + m[a].nation + "</td>"; ee += "<td>" + m[a].class + "</td>"; ee += "<td>" + m[a].score + "</td>"; ee += "<td>"; var cc = m[a].ids; ee += "<input type=\"button\" class=\"" + cc + "\" value=\"修改\" id=\"XG\"/>"; ee += "<input type=\"button\" class=\"" + cc + "\" value=\"删除\" id=\"SC\"/>"; ee += "</td>"; ee += " </tr>}"; $("#tt").append(ee); } }, error: function () { alert("数据错误!"); } }); $("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () { $("#tc-zz").css("display", "none"); }); } //刷新 $("#aa11").click(function () { $.ajax({ url: "Handler.ashx", data: {}, type: "post", dataType: "json", success: function (m) { $("#tt").text(""); for (var a = 0; a < m.length; a++) { var ee = " <tr style=\"background-color: white;\">"; ee += "<td id=\"tr" + a + "\">" + m[a].ids + "</td>"; ee += "<td>" + m[a].name + "</td>"; ee += "<td>" + m[a].sex + "</td>"; ee += "<td>" + m[a].birthday + "</td>"; ee += "<td>" + m[a].nation + "</td>"; ee += "<td>" + m[a].class + "</td>"; ee += "<td>" + m[a].score + "</td>"; ee += "<td>"; var cc = m[a].ids; ee += "<input type=\"button\" class=\"" + cc + "\" value=\"修改\" id=\"XG\"/>"; ee += "<input type=\"button\" class=\"" + cc + "\" value=\"删除\" id=\"SC\"/>"; ee += "</td>"; ee += " </tr>}"; $("#tt").append(ee); } }, error: function () { alert("数据错误!"); } }); }); //删除 $("#SC").live("click", function () { var a = $(this).attr("class"); $.ajax({ url: "delete.ashx", data: { "ids": a }, type: "post", dataType: "json", success: function (m) { $("#tt").text(""); for (var a = 0; a < m.length; a++) { var ee = " <tr style=\"background-color: white;\">"; ee += "<td id=\"tr" + a + "\">" + m[a].ids + "</td>"; ee += "<td>" + m[a].name + "</td>"; ee += "<td>" + m[a].sex + "</td>"; ee += "<td>" + m[a].birthday + "</td>"; ee += "<td>" + m[a].nation + "</td>"; ee += "<td>" + m[a].class + "</td>"; ee += "<td>" + m[a].score + "</td>"; ee += "<td>"; var cc = m[a].ids; ee += "<input type=\"button\" class=\"" + cc + "\" value=\"修改\" id=\"XG\"/>"; ee += "<input type=\"button\" class=\"" + cc + "\" value=\"删除\" id=\"SC\"/>"; ee += "</td>"; ee += " </tr>}"; $("#tt").append(ee); } }, error: function () { alert("数据错误!"); } }); }); //添加 $("#TJ").live("click", function () { $("#tc1").animate({ top: 100 }, 500); $("#tc-zz1").css("display", "block"); }); function tcbtn2() { $.ajax({ url: "insert.ashx", data: { "ids": $("#tids1").val(), "name": $("#tname1").val(), "sex": $("#tsex1").children("input:eq(0)").get(0).checked, "birthday": $("#tbirthday1").val(), "nation": $("#DropDownList11").val(), "class": $("#DropDownList22").val(), "score": $("#tscore1").val() }, type: "post", dataType: "json", success: function (m) { $("#tt").text(""); for (var a = 0; a < m.length; a++) { var ee = " <tr style=\"background-color: white;\">"; ee += "<td id=\"tr" + a + "\">" + m[a].ids + "</td>"; ee += "<td>" + m[a].name + "</td>"; ee += "<td>" + m[a].sex + "</td>"; ee += "<td>" + m[a].birthday + "</td>"; ee += "<td>" + m[a].nation + "</td>"; ee += "<td>" + m[a].class + "</td>"; ee += "<td>" + m[a].score + "</td>"; ee += "<td>"; var cc = m[a].ids; ee += "<input type=\"button\" class=\"" + cc + "\" value=\"修改\" id=\"XG\"/>"; ee += "<input type=\"button\" class=\"" + cc + "\" value=\"删除\" id=\"SC\"/>"; ee += "</td>"; ee += " </tr>}"; $("#tt").append(ee); } }, error: function () { alert("数据错误!"); } }); $("#tc1").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () { $("#tc-zz1").css("display", "none"); }); } // </script>
css:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.tc { position: fixed; width: 400px; left: 50%; margin-left: -200px; top: -600px; border: 1px solid navy; box-shadow: 0 0 10px black; z-index: 1001; background-color: white; } .tc-top { width: 100%; height: 30px; background-color: navy; color: white; font-size: 18px; font-weight: bold; text-align: center; line-height: 30px; } .tc-main { padding: 20px; text-align: center; } .tc-bottom { position: relative; width: 100%; height: 40px; } .tc-btn1 { position: absolute; top: 5px; left: 50%; margin-left: -50px; width: 100px; height: 30px; background-color: navy; color: white; text-align: center; line-height: 30px; cursor: pointer; } .tc-zz { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: black; opacity: 0.3; display: none; z-index: 1000; } .divc { height: 50px; width: 100%; } .divcc1 { text-align: right; height: 50px; width: 30%; float: left; } .divcc2 { text-align: left; height: 50px; width: 70%; float: left; }
ashx:
1刷新:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
public void ProcessRequest(HttpContext context) { StringBuilder sb = new StringBuilder(); sb.Append("["); using (StudentsDataClassesDataContext con = new StudentsDataClassesDataContext()) { List<Stu> ss = con.Stu.ToList(); int a = ss.Count; int cc = 0; foreach (Stu s in ss) { if (s == null) continue; cc++; if (cc < a) { sb.Append("{\"ids\":\"" + s.Ids + "\",\"name\":\"" + s.Name + "\",\"sex\":\"" + s.Sexx + "\",\"birthday\":\"" + s.Birth + "\",\"nation\":\"" + s.NName + "\",\"class\":\"" + s.CName + "\",\"score\":\"" + s.Score + "\"},"); } if (cc == a) { sb.Append("{\"ids\":\"" + s.Ids + "\",\"name\":\"" + s.Name + "\",\"sex\":\"" + s.Sexx + "\",\"birthday\":\"" + s.Birth + "\",\"nation\":\"" + s.NName + "\",\"class\":\"" + s.CName + "\",\"score\":\"" + s.Score + "\"}"); } } } sb.Append("]"); context.Response.Write(sb); context.Response.End(); }
2.修改1:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
tringBuilder sb = new StringBuilder(); sb.Append("["); using (StudentsDataClassesDataContext con = new StudentsDataClassesDataContext()) { string s1 = context.Request["ids"]; Stu sa = con.Stu.Where(r => r.Ids.ToString() == s1).FirstOrDefault(); if (sa != null) sb.Append("{\"ids\":\"" + sa.Ids + "\",\"name\":\"" + sa.Name + "\",\"sex\":\"" + sa.Sex + "\",\"birthday\":\"" + Convert.ToDateTime(sa.Birthday).ToString("yyyy-MM-dd") + "\",\"nation\":\"" + sa.NationCode + "\",\"class\":\"" + sa.ClassCode + "\",\"score\":\"" + sa.Score + "\"}"); } sb.Append("]"); context.Response.Write(sb); context.Response.End();
修改2:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
StringBuilder sb = new StringBuilder(); sb.Append("["); string a = context.Request["ids"]; string b = context.Request["name"]; string c = context.Request["sex"]; string d = context.Request["birthday"]; string e = context.Request["nation"]; string f = context.Request["class"]; string g = context.Request["score"]; using (StudentsDataClassesDataContext con = new StudentsDataClassesDataContext()) { Stu s = con.Stu.Where(r => r.Ids.ToString() == a).FirstOrDefault(); if (s != null) { s.Name = b; s.Sex = Convert.ToBoolean(c); s.Birthday = Convert.ToDateTime(d); s.NationCode = e; s.ClassCode = f; s.Score = Convert.ToInt32(g); con.SubmitChanges(); } List<Stu> ss = con.Stu.ToList(); int a1 = ss.Count; int cc = 0; foreach (Stu s1 in ss) { cc++; if (cc < a1) { sb.Append("{\"ids\":\"" + s1.Ids + "\",\"name\":\"" + s1.Name + "\",\"sex\":\"" + s1.Sexx + "\",\"birthday\":\"" + s1.Birth + "\",\"nation\":\"" + s1.NName + "\",\"class\":\"" + s1.CName + "\",\"score\":\"" + s1.Score + "\"},"); } if (cc == a1) { sb.Append("{\"ids\":\"" + s1.Ids + "\",\"name\":\"" + s1.Name + "\",\"sex\":\"" + s1.Sexx + "\",\"birthday\":\"" + s1.Birth + "\",\"nation\":\"" + s1.NName + "\",\"class\":\"" + s1.CName + "\",\"score\":\"" + s1.Score + "\"}"); } } sb.Append("]"); context.Response.Write(sb); context.Response.End(); }
3.添加:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
StringBuilder sb = new StringBuilder(); sb.Append("["); string b = context.Request["name"]; string c = context.Request["sex"]; string d = context.Request["birthday"]; string e = context.Request["nation"]; string f = context.Request["class"]; string g = context.Request["score"]; using (StudentsDataClassesDataContext con = new StudentsDataClassesDataContext()) { Stu s = new Stu(); s.Name = b; s.Sex = Convert.ToBoolean(c); s.Birthday = Convert.ToDateTime(d); s.NationCode = e; s.ClassCode = f; s.Score = Convert.ToInt32(g); con.Stu.InsertOnSubmit(s); con.SubmitChanges(); List<Stu> ss = con.Stu.ToList(); int a1 = ss.Count; int cc = 0; foreach (Stu s1 in ss) { cc++; if (cc < a1) { sb.Append("{\"ids\":\"" + s1.Ids + "\",\"name\":\"" + s1.Name + "\",\"sex\":\"" + s1.Sexx + "\",\"birthday\":\"" + s1.Birth + "\",\"nation\":\"" + s1.NName + "\",\"class\":\"" + s1.CName + "\",\"score\":\"" + s1.Score + "\"},"); } if (cc == a1) { sb.Append("{\"ids\":\"" + s1.Ids + "\",\"name\":\"" + s1.Name + "\",\"sex\":\"" + s1.Sexx + "\",\"birthday\":\"" + s1.Birth + "\",\"nation\":\"" + s1.NName + "\",\"class\":\"" + s1.CName + "\",\"score\":\"" + s1.Score + "\"}"); } } sb.Append("]"); context.Response.Write(sb); context.Response.End(); }
4.删除:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
StringBuilder sb = new StringBuilder(); sb.Append("["); using (StudentsDataClassesDataContext con = new StudentsDataClassesDataContext()) { string s1 = context.Request["ids"]; Stu sa = con.Stu.Where(r => r.Ids.ToString() == s1).FirstOrDefault(); con.Stu.DeleteOnSubmit(sa); con.SubmitChanges(); List<Stu> ss = con.Stu.ToList(); int a = ss.Count; int cc = 0; foreach (Stu s in ss) { cc++; if (cc < a) { sb.Append("{\"ids\":\"" + s.Ids + "\",\"name\":\"" + s.Name + "\",\"sex\":\"" + s.Sexx + "\",\"birthday\":\"" + s.Birth + "\",\"nation\":\"" + s.NName + "\",\"class\":\"" + s.CName + "\",\"score\":\"" + s.Score + "\"},"); } if (cc == a) { sb.Append("{\"ids\":\"" + s.Ids + "\",\"name\":\"" + s.Name + "\",\"sex\":\"" + s.Sexx + "\",\"birthday\":\"" + s.Birth + "\",\"nation\":\"" + s.NName + "\",\"class\":\"" + s.CName + "\",\"score\":\"" + s.Score + "\"}"); } } } sb.Append("]"); context.Response.Write(sb); context.Response.End();