第七節：框架搭建之頁面靜態化的剖析
阿新 • • 發佈：2018-12-12
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>Index</title> 11 <style> 12 .mydiv1 { 13 height: 400px; 14width: 800px; 15 border: 1px solid black; 16 } 17 18 .myTitle { 19 border-bottom: 1px solid black; 20 height: 40px; 21 } 22 23 .myTitle div { 24 float: left; 25 width: 24%; 26border-right: 1px solid black; 27 height: 40px; 28 text-align: center; 29 line-height: 40px; 30 } 31 32 .myTitle .lastdiv { 33 border-right: 0px solid black; 34 } 35 36 .myContent div { 37float: left; 38 width: 24%; 39 height: 40px; 40 text-align: center; 41 line-height: 40px; 42 } 43 </style> 44 <script src="~/Scripts/jquery-3.3.1.min.js"></script> 45 <script> 46 $(function () { 47 //1. 載入資訊 48 $.post("/Home/InitInfor", {}, function (data) { 49 var myHtml = ""; 50 for (var i = 0; i < data.length; i++) { 51 var newHtml = "<div class='myContent'>" + 52 "<div>" + data[i].id + "</div>" + 53 "<div>" + data[i].blogTitle + "</div>" + 54 "<div>" + data[i].blogContent + "</div>" + 55 "<div>" + 56 "<button data-id='" + data[i].id + "'>檢視</button>" + 57 "</div>" + 58 "</div>"; 59 myHtml = myHtml + newHtml; 60 } 61 $(".mydiv1").append(myHtml); 62 //給所有的檢視按鈕新增事件 63 $(".mydiv1").on("click", "button", function () { 64 var id = $(this).attr("data-id"); 65 66 //1.傳統的訪問介面進行頁面檢視 67 //window.location.href = "/Home/DetilsViews?id=" + id; 68 69 //2.直接訪問靜態頁面 70 window.location.href = "http://localhost:4482/StaticHtml/" + id + ".html"; 71 72 }); 73 74 }); 75 76 //2. 增加事件 77 $("#j_Add").on("click", function () { 78 var id = $("#j_id").val(); 79 var blogTitle = $("#j_title").val(); 80 var blogContent = $("#j_Content").val(); 81 var blogOther = $("#j_Other").val(); 82 83 $.post("/Home/AddBlog", { "id": id, "blogTitle": blogTitle, "blogContent": blogContent, "blogOther": blogOther }, function (data) { 84 if (data == "ok") { 85 var myHtml = "<div class='myContent'>" + 86 "<div>" + id + "</div>" + 87 "<div>" + blogTitle + "</div>" + 88 "<div>" + blogContent + "</div>" + 89 "<div>" + 90 "<button data-id='" + id + "'>檢視</button>" + 91 "</div>" + 92 "</div>"; 93 $(".mydiv1").append(myHtml); 94 95 alert("新增成功"); 96 } else { 97 alert("新增失敗"); 98 } 99 }); 100 }); 101 102 //3. 修改事件 103 $("#j_Edit").on("click", function () { 104 var id = $("#j_id").val(); 105 var blogTitle = $("#j_title").val(); 106 var blogContent = $("#j_Content").val(); 107 var blogContent = $("#j_Other").val(); 108 109 $.post("/Home/EditBlog", { "id": id, "blogTitle": blogTitle, "blogContent": blogContent, "blogOther": blogContent }, function (data) { 110 if (data == "ok") { 111 var myHtml = "<div class='myContent'>" + 112 "<div>" + id + "</div>" + 113 "<div>" + blogTitle + "</div>" + 114 "<div>" + blogContent + "</div>" + 115 "<div>" + 116 "<button data-id='" + id + "'>檢視</button>" + 117 "</div>" + 118 "</div>"; 119 $(".mydiv1").append(myHtml); 120 121 alert("修改成功"); 122 window.location.reload(); 123 } else { 124 alert("修改失敗"); 125 } 126 }); 127 }); 128 129 130 131 }) 132 </script> 133 </head> 134 <body> 135 <div class="mydiv1"> 136 <div class="myTitle"> 137 <div>ID</div> 138 <div>題目</div> 139 <div>內容</div> 140 <div class="lastdiv">操作</div> 141 </div> 142 @*<div class="myContent"> 143 <div>1</div> 144 <div>.Net學習</div> 145 <div>技術部分語言</div> 146 <div> 147 <button>檢視</button> 148 </div> 149 </div>*@ 150 </div> 151 152 <div> 153 <p>ID：<input type="text" value="" id="j_id" /></p> 154 <p>題目：<input type="text" value="" id="j_title" /></p> 155 <p>內容：<input type="text" value="" id="j_Content" /></p> 156 <p>其他：<input type="text" value="" id="j_Other" /></p> 157 <p> 158 <button id="j_Add">增加</button> 159 </p> 160 <p> 161 <button id="j_Edit">修改</button> 162 </p> 163 </div> 164 </body> 165 </html>