.NET - 使用 jQuery 跟 ASP.NET 泛型處理常式(ASHX) 實作 AJAX

    需在原本的頁面上加入附加的功能，那做法不外乎加入 Window.Open 的方式來實作附加功能上的 UI ，不然就是使用圖層的觀念來實作在原本的頁面中，那在此介紹使用圖層的部份來達到這個功能.

那要達到此功能，所選取的方案為泛型處理常式(ASHX)做為 Server 端提供資料的 Service，那 Client 端使用 jQuery 實作 AJAX 來呼叫 Server 端存取資料~

Client 端：

Code Snippet

1. <script type="text/javascript" language="javascript">
3. $(document).ready(function () {
4. var winH = $(window).height();
5. var winW = $(window).width();
6. $('#mask').css({ 'width': winW, 'height': winH, "opacity": 0.8 }).hide();
7. $("#window").css({ "top": winH / 2 - $("#window").height() / 2, "left": winW / 2 - $("#window").width() / 2 }).hide().corner("cc:#000").children("div").css({ "opacity": 0.8 });
8. });
10. function showWindow(apmSID, roleSID, layerSID) {
11. $("#apmid").val(apmSID);
12. $("#layid").val(layerSID);
13. $("#roleid").val(roleSID);
15. $('#mask').show(500);
16. $("#window").show(800);
18. $.ajax({
19. type: "post",
20. url: "../service/GetAllowRulesHandler.ashx",
21. data: $.param({ APMSID: apmSID, RoLESID: roleSID, LAYSID: layerSID }),
22. success: function (response) {
23. var result = $.parseJSON(response);
24. if (result.ErrorCode == 0) {
25. $("#paramList > tbody > tr").remove();
26. $(result.Data).each(function () {
27. $("#paramList > tbody:last").append("<tr sid='" + this.SID + "'><td><img src='../images/icons/delete.png' alt='??' onclick=\"deleteData('" + this.SID + "');\" /></td><td>" + ($("#paramList > tbody > tr").size() + 1) + "</td><td>" + this.ParameterName + "</td></tr>");
28. });
29. return;
30. }
31. alert("??????????????!\n" + result.ErrorText);
32. }
33. });
34. }
36. function hideWindow() {
37. $("#mask").hide(800);
38. $("#window").hide(500);
39. return false;
40. }
42. function isNonEmpty() {
43. if ($(".paramTextBox[value!='']").size() == 0) {
44. alert("Please input more than one parameter...");
45. return false;
46. }
48. $.ajax({
49. type: "post",
50. url: "../service/SaveAllowRulesHandler.ashx",
51. data: $.param({ APMSID: $("#apmid").val(), ROLESID: $("#roleid").val(), LAYSID: $("#layid").val(), PARAMNAME: $(".paramTextBox").val() }),
52. success: function (response) {
53. var result = $.parseJSON(response);
54. if (result.ErrorCode == 0) {
55. var role = result.Data;
56. $("#paramList > tbody:last").append("<tr sid='" + role.SID + "'><td><img src='../images/icons/delete.png' alt='??' onclick=\"deleteData('" + role.SID + "');\" /></td><td>" + ($("#paramList > tbody > tr").size() + 1) + "</td><td>" + role.ParameterName + "</td></tr>");
57. $(".paramTextBox").val("");
58. return;
59. }
60. alert("??????????????!\n" + result.ErrorText);
61. }
62. });
64. return false;
65. }
67. function deleteData(sid) {
68. $.ajax({
69. type: "post",
70. url: "../service/DelAllowRulesHandler.ashx",
71. data: $.param({ SID: sid }),
72. success: function (response) {
73. var result = $.parseJSON(response);
74. if (result.ErrorCode != 0) {
75. alert("??????????????!\n" + result.ErrorText);
76. return;
77. }
78. $("#paramList > tbody > tr[sid=" + sid + "]").remove();
79. }
80. });
81. }
83. </script>

Server 端：

Code Snippet

1. <%@ WebHandler Language="C#" Class="GetAllowRulesHandler" %>
3. using System;
4. using System.Web;
5. using System.Web.SessionState;
6. using System.Web.Script.Serialization;
7. using Com.Trg.R2R.Model;
8. using Com.Trg.R2R.UCO;
10. public class GetAllowRulesHandler : IHttpHandler, IRequiresSessionState {
12. public void ProcessRequest (HttpContext context) {
14. string result = string.Empty;
15. JavaScriptSerializer serializer = new JavaScriptSerializer();
17. try
18. {
19. AccessRule rule = new AccessRule();
20. AllowRuleUCO uco = new AllowRuleUCO();
22. rule.ApmSID = context.Request.Form["APMSID"];
23. rule.RolSID = context.Request.Form["ROLESID"];
24. rule.LaySID = context.Request.Form["LAYSID"];
25. AllowRule[] rules = uco.GetRules(rule);
27. result = serializer.Serialize(new { ErrorCode = 0, ErrorText = string.Empty, Data = rules });
28. }
29. catch (Exception ex)
30. {
31. result = serializer.Serialize(new { ErrorCode = 99999, ErrorText = ex.Message });
32. }
34. context.Response.ContentType = "text/plain";
35. context.Response.Write(result);
36. }
38. public bool IsReusable {
39. get {
40. return false;
41. }
42. }
44. }