哎，這節課程本來想繼續完善AJAX那個無重新整理上傳頭像的，可以後來測試了半天，覺得上傳圖片這個，效果可能不太好，所以今天得這個節課程，先實現AJAX修改資料，後面的課程中
將分開實現AJAX上傳大檔案課程，然後，在哪裡重點實現一下，這個進度顯示的功能。
好了，我們繼續我們的修改使用者資料，修改使用者資料，首先第一個需要我們做的就是，先顯示出所有的使用者資訊。
最新的網站結構，下面用箭頭標註的就是今天新增加了幾個檔案。
ShowStudent.htm增加如下代碼。
<link href="Style/BaseStyle.css" rel="stylesheet" type="text/css" /> <script src="Js/BaseJs.js" type="text/javascript"></script> <script type="text/javascript"> function getStudents() { createXmlHttpRequest(); sendMethod("GET", "ShowStudent.ashx", null); } window.onload = getStudents(); </script></head><body> <div id="returnLogin" style=" text-align:center"> </div></body>
這個就是直接去要資料了。然後 ShowStudent.ashx裡面增加如下代碼。
public void ProcessRequest(HttpContext context){ context.Response.ContentType = "text/html"; StringBuilder sb = new StringBuilder(); sb.Append("<table><tr><th>姓名</th><th>性別</th><th>郵箱</th><th>操作</th></tr>"); foreach (var item in User.GetUsers()) { sb.Append("<tr><td>" + item.Name + "</td><td>" + item.Sex + "</td><td>" + item.Email + "</td><td><a href='EditStudent.htm?id="+item.Id+"'>修改</a></td></tr>"); } sb.Append("</table>"); context.Response.Write(sb.ToString());}
當然，你需要新增加 User.GetUsers 這個方法
這個方法的內容，我依然是不解釋了，呵呵，ASP.NET取資料，然後我們接下來看效果。
好了，貯備工作完成了，簡單吧，
哦了，下面我們繼續完善我們的那個 User 類
這回我們要添加的根據 ID 得到一個學生的資訊。
哦，忘記了，我們先給我們的 這個 Table 修改一下，呵呵，加上編號，這個我只給大家一個了，就不顯示代碼了，但是請記住，我們的這個只是表格中的編號，可不是，資料庫中的ID欄位啊
單擊修改，之後，我們跳轉到 EditStudent.htm 頁面，當然你也可以在這個頁面一起實現，實現的方式很多，我們這裡為了簡單起見，就跳轉到
新的頁面
好了，跳轉成功了。那麼我們先寫下 EditStudent.htm 的代碼吧
<link href="Style/BaseStyle.css" rel="stylesheet" type="text/css" /> <script src="Js/BaseJs.js" type="text/javascript"></script> <script type="text/javascript"> function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } function getuser() { createXmlHttpRequest(); sendMethod('GET', "EditStudent.ashx?id="+getUrlParam('id')+"",null); } window.onload = getuser(); </script></head><body> <div id="returnLogin" style=" text-align:center"> </div></body>
其實就是得到 URL中的參數，注意這裡可以 用 JS 加Regex得到的啊。然後將資料發送到 EditStudent.ashx
頁面，在這裡面 有相應的處理邏輯。
public void ProcessRequest(HttpContext context){ context.Response.ContentType = "text/html"; var id = Convert.ToInt32(context.Request["id"].ToString()); var user = User.GetUser(id); StringBuilder sb = new StringBuilder(); sb.Append(@"<input type='hidden' name=’id’ value='@id' /> <img style='width:150px; height:150px; margin:0 auto;' src='Upload/@url' name=’url’ id='image'/> <table> <tr><td>使用者名稱：</td><td><input type='text' name='name' value='@name' /></td><td></td></tr> <tr><td>密碼：</td><td><input type='password' name='password' value='@password' /></td><td></td></tr> <tr><td>E-mail：</td><td><input type='text' name='email' value='@email' /></td><td></td></tr> <tr><td></td><td><input type='button' value='提交' /></td></tr> </table>"); sb.Replace("@id", id.ToString()).Replace("@name", user.Name).Replace("@email",user.Email).Replace("@url",user.Photo).Replace("@password",user.PassWord); context.Response.Write(sb);}
這裡我採用的是另一種，產生頁面的方式 就是替換法 我將一些特殊的資料，經過替換形成新的頁面。呵呵，仔細看一下吧。
User 類中新增加 一個 方法
這個方法寫好之後，就是我們這節課的主要內容了，好了，
首先修改我們的 EditStudent.ashx 檔案裡面的方法
public void ProcessRequest(HttpContext context){ context.Response.ContentType = "text/html"; if (context.Request["name"] == null) { var id = Convert.ToInt32(context.Request["id"].ToString()); var user = User.GetUser(id); StringBuilder sb = new StringBuilder(); sb.Append(@"<form action='EditStudent.ashx' method='POST'><input type='hidden' name='id' value='@id' /> <img style='width:150px; height:150px; margin:0 auto;' src='Upload/@url' id='image'/> <table> <tr><td>使用者名稱：</td><td><input type='text' name='name' value='@name' /></td><td></td></tr> <tr><td>密碼：</td><td><input type='password' name='password' value='@password' /></td><td></td></tr> <tr><td>E-mail：</td><td><input type='text' name='email' value='@email' /></td><td></td></tr> <tr><td></td><td><input type='submit' value='提交' /></td></tr> </table></form>"); sb.Replace("@id", id.ToString()).Replace("@name", user.Name).Replace("@email", user.Email).Replace("@url", user.Photo).Replace("@password", user.PassWord); context.Response.Write(sb); } else { User user = new User(); user.Id =Convert.ToInt32(context.Request["id"]); user.Name = context.Request["name"]; user.PassWord = context.Request["password"]; user.Email = context.Request["email"]; var newuser = User.UpdateUser(user); var htmldata = @"修改成功 <table> <tr><td>使用者名稱：</td><td>@name</td><td></td></tr> <tr><td>密碼：</td><td>@password</td><td></td></tr> <tr><td>E-mail：</td><td>@email</td><td></td></tr> </table>"; htmldata=htmldata.Replace("@name", user.Name).Replace("@email", user.Email).Replace("@url", user.Photo).Replace("@password", user.PassWord); context.Response.Write(htmldata); }}
上面就是我們的主要邏輯代碼，實現的功能當然是修改資料了啊，當然為了，簡單，我只修改了容易修改的幾個項目，姓名，密碼，郵件，其他的知識雷同了，呵呵。
哈哈，這修改即將完成了。
幾點注意的地方，首先，我們第一次載入我們用的是 AJAX形式，第二次呢，我們採用的是Form表單的形式提交。注意到這一點就證明，你已經可以自己去寫自己的AJAX應用啦。
這節課 結束嘍。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
