迎接2012之三層架構基於JQuery Ui實現增刪改查完整設計
阿新 • • 發佈：2019-01-26
一、儲存過程，資料庫基於前幾篇博文。
二、程式碼
(1)HTMLPage.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用者列表</title> <script type="text/javascript" src="JQueryUi/js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="JQueryUi/js/jquery-ui-1.8.16.custom.min.js"></script> <link type="text/css" rel="Stylesheet" href="JQueryUi/css/ui-lightness/jquery-ui-1.8.16.custom.css" /> <script type="text/javascript"> $(document).ready(function () { $("#Btn_Add").click(function () { $("#hidediv").dialog({ modal: true, title: "增加會員", resizable: false, bgiframe: true, open: function () { $("#hidediv").html("<div> 使用者名稱：<input id=\"Text1\" type=\"text\" name=\"username\" /> <br /> 密碼：<input id=\"Password1\" type=\"password\" name=\"password\" /> <br /> 性別： <select id=\"Select1\" name=\"sex\"> <option value=\"-1\">請選擇</option> <option value=\"0\">男</option> <option value=\"1\">女</option> </select> <br />"); }, buttons: { "提交": function () { if ($("#Text1").val() == "") { alert("請輸入使用者名稱"); return false; } if ($("#Password1").val() == "") { alert("請輸入密碼"); return false; } if ($("#Select1").val() == "-1") { alert("請選擇性別"); return false; } $.ajax({ type: "post", chche: false, url: "Insert.ashx", data: "username=" + $("#Text1").val() + "&password=" + $("#Password1").val() + "&sex=" + $("#Select1").val(), success: function (dt) { alert(dt); $("#Submit1").attr("value", "提交").removeAttr("disabled"); $("#Text1").val(""); $("#Password1").val(""); $("#Select1").val("-1"); }, beforeSend: function (dt) { $("#Submit1").attr({ "value": "正在提交", "disabled": "disabled" }); } }); return false; } }, close: function () { PageList(1); } }); }) PageList(1); }); function PageList(pageno) { $.ajax({ type: "get", cache: false, url: "GetList.ashx?pageno=" + pageno, dataType: "json", success: function (dt) { var cc = eval(dt); if (cc.RecordCount > 0) { var htm = "<table><tr><th>編號</th><th>使用者名稱</th><th>密碼</th><th>性別</th><th>操作</th>"; for (var i = 0; i < cc.Data.length; i++) { htm += "<tr id=\"" + cc.Data[i].Id + "\"><td>" + cc.Data[i].Id + "</td><td>" + cc.Data[i].UserName + "</td><td>" + cc.Data[i].PassWord + "</td><td>" + cc.Data[i].Sex + "</td><td> <span onclick=\"Edit(" + cc.Data[i].Id + ")\">修改</span> <span onclick=\"Del(" + cc.Data[i].Id + ")\">刪除</span> <span onclick=\"Info(" + cc.Data[i].Id + ")\">檢視</span></td></tr>"; } htm += "<tr><td colspan=\"5\" align=\"center\">"; if (pageno > 1) { htm += "<span onclick=\"PageList(" + (1) + ")\">第一頁</span>"; htm += "<span onclick=\"PageList(" + (pageno - 1) + ")\">上一頁</span>"; } if (pageno < cc.PageCount) { htm += "<span onclick=\"PageList(" + (pageno + 1) + ")\">下一頁</span>"; htm += "<span onclick=\"PageList(" + (cc.PageCount) + ")\">最後頁</span>"; } htm += "共" + cc.PageCount + "頁碼共" + cc.RecordCount + "條記錄 當前第" + pageno + "頁</td></tr>"; $("#content table").html(htm); } } }); } function Edit(id) { $("#hidediv").dialog({ modal: true, title: "修改會員", resizable: false, bgiframe: true, open: function () { $("#hidediv").html("<div> 使用者名稱：<input id=\"Text1\" type=\"text\" name=\"username\" /> <br /> 密碼：<input id=\"Password1\" type=\"password\" name=\"password\" /> <br /> 性別： <select id=\"Select1\" name=\"sex\"> <option value=\"-1\">請選擇</option> <option value=\"0\">男</option> <option value=\"1\">女</option> </select> <br />"); $.ajax({ type: "get", cache: false, url: "Select" + id + ".ashx", dataType: "json", success: function (dt) { var cc = eval(dt); $("#Text1").val(cc.UserName); $("#Password1").val(cc.PassWord); $("#Select1").val(cc.Sex); } }); }, buttons: { "提交": function () { if ($("#Text1").val() == "") { alert("請輸入使用者名稱"); return false; } if ($("#Password1").val() == "") { alert("請輸入密碼"); return false; } if ($("#Select1").val() == "-1") { alert("請選擇性別"); return false; } $.ajax({ type: "post", cache: false, url: "Update.ashx", data: "id=" + id + "&UserName=" + $("#Text1").val() + "&PassWord=" + $("#Password1").val() + "&Sex=" + $("#Select1").val(), success: function (dt) { alert(dt); PageList(1); } }); } } }); } function Del(id) { $.ajax({ type: "post", cache: false, url: "Delete.ashx", data: "id=" + id, success: function (dt) { alert(dt); $("#" + id).remove(); PageList(1); } }); return false; } function Info(id) { $("#hidediv").dialog({ modal: true, title: "檢視會員", resizable: false, bgiframe: true, open: function () { $.ajax({ type: "get", cache: false, url: "Select" + (id) + ".ashx", dataType: "json", success: function (dt) { var cc = eval(dt); $("#hidediv").html("<div>使用者名稱：" + cc.UserName + "<br/>密碼：" + cc.PassWord + "<br/>性別：" + (cc.Sex == 0 ? "男" : "女") + "</div>"); } }); } }); } </script> <style type="text/css"> * { margin: 0px; padding: 0px; } table { border-collapse: collapse; } table tr th, td { border-width: 1px; border-style: solid; border-color: Blue; } span { cursor: pointer; } </style> </head> <body> <div> <input id="Btn_Add" type="button" value="增加使用者" /> </div> <div id="content"> <table> <tr> <th> 編號 </th> <th> 使用者名稱 </th> <th> 密碼 </th> <th> 性別 </th> <th> 操作 </th> </tr> <tr> <td colspan="5"> 共1頁 總共0條記錄 當前第1頁 </td> </tr> </table> </div> <div id="hidediv"> </div> </body> </html>
(2)Insert.ashx
<%@ WebHandler Language="C#" Class="Insert" %> using System; using System.Web; public class Insert : IHttpHandler { public void ProcessRequest (HttpContext context) { string username = context.Request.Form["username"].ToString(); string password = context.Request.Form["password"].ToString(); string sex = context.Request.Form["sex"].ToString(); ThreeLevelBLL.Users user = new ThreeLevelBLL.Users(); int i = user.UserInsert(new ThreeLevelMODEL.Users(0, username, password, (sex == "0" ? true : false))); if (i > 0) { context.Response.Write("新增成功"); } else { context.Response.Write("新增失敗"); } context.Response.End(); } public bool IsReusable { get { return false; } } }
(3)Delete.ashx
<%@ WebHandler Language="C#" Class="Delete" %> using System; using System.Web; public class Delete : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; int id = int.Parse(context.Request.Form["id"].ToString()); ThreeLevelBLL.Users user = new ThreeLevelBLL.Users(); int i = user.UserDelete(id); if (i > 0) { context.Response.Write("刪除成功"); } else { context.Response.Write("刪除失敗"); } context.Response.End(); } public bool IsReusable { get { return false; } } }
(4)Update.ashx
<%@ WebHandler Language="C#" Class="Update" %>
using System;
using System.Web;
public class Update : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string str = string.Empty;
context.Response.ContentType = "text/plain";
int id = int.Parse(context.Request.Form["id"].ToString());
ThreeLevelBLL.Users user = new ThreeLevelBLL.Users();
ThreeLevelMODEL.Users model = user.GetUserId(id);
if (model != null)
{
model.UserName = context.Request.Form["UserName"].ToString();
model.PassWord = context.Request.Form["PassWord"].ToString();
model.Sex = (context.Request.Form["Sex"].ToString() == "1" ? false : true);
user.UserUpdate(model);
}
context.Response.Write("修改成功");
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}(5)Select.ashx
<%@ WebHandler Language="C#" Class="Select" %>
using System;
using System.Web;
public class Select : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string str = string.Empty;
context.Response.ContentType = "text/plain";
int id = int.Parse(context.Request.QueryString["id"].ToString());
ThreeLevelBLL.Users user = new ThreeLevelBLL.Users();
ThreeLevelMODEL.Users model = user.GetUserId(id);
if (model != null)
{
str = "{\"UserName\":\"" + model.UserName + "\",\"PassWord\":\"" + model.PassWord + "\",\"Sex\":\"" + (model.Sex == true ? "0" : "1") + "\"}";
}
context.Response.Write(str);
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}(6)GetList.ashx
<%@ WebHandler Language="C#" Class="GetList" %>
using System;
using System.Web;
public class GetList : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
int pageno = int.Parse(context.Request.QueryString["pageno"].ToString());
System.Text.StringBuilder str = new System.Text.StringBuilder();
ThreeLevelBLL.Users bll = new ThreeLevelBLL.Users();
int PageCount = 0;
int RecordCount=0;
System.Collections.Generic.List<ThreeLevelMODEL.Users> us = bll.UserGetList(5, ref PageCount, pageno, ref RecordCount);
if (us.Count > 0)
{
str.Append("{\"PageCount\":\"" + PageCount + "\",\"RecordCount\":\"" + RecordCount + "\",\"Data\":");
str.Append("[");
for (int i = 0; i < us.Count; i++)
{
str.Append("{");
str.Append("\"Id\":\"" + us[i].Id + "\",");
str.Append("\"UserName\":\"" + us[i].UserName + "\",");
str.Append("\"PassWord\":\"" + us[i].PassWord + "\",");
str.Append("\"Sex\":\"" + (us[i].Sex == true ? "男" : "女") + "\"");
str.Append("}");
if (i != us.Count - 1)
{
str.Append(",");
}
}
str.Append("]}");
}
else
{
str.Append("{\"PageCount\":\"" + 0 + "\",\"RecordCount\":\"" + 0 + "\",\"Data\":\"" + 0 + "\"");
}
context.Response.Write(str.ToString());
}
public bool IsReusable {
get {
return false;
}
}
}(7)UrlWrite.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
///UrlWrite 的摘要說明
/// </summary>
public class UrlWrite:IHttpModule
{
public UrlWrite()
{
//
//TODO: 在此處新增建構函式邏輯
//
}
public void Dispose()
{
//throw new NotImplementedException();
}
public void Init(HttpApplication context)
{
context.BeginRequest += new EventHandler(context_BeginRequest);
}
void context_BeginRequest(object sender, EventArgs e)
{
HttpApplication application = sender as HttpApplication;
HttpContext context = application.Context;
System.Text.RegularExpressions.MatchCollection match = System.Text.RegularExpressions.Regex.Matches(context.Request.RawUrl, @"Select(\d)+\.ashx");
if (match.Count == 1 && match[0].Success)
{
string newurl = "/ThreeLevelWeb/Select.ashx?id=" + match[0].Value.Split('.')[0].Substring(6, match[0].Value.Split('.')[0].Length - 6);
context.RewritePath(newurl);
}
}
}三、尚未仔細測試可能會有錯誤。