本文實例講述了C#使用jQuery實現(xiàn)無刷新評論提交的方法。分享給大家供大家參考。具體分析如下：
首先在數(shù)據(jù)庫中就建三個字段的表用來存儲用戶名和評論信息，Id只是為了設(shè)置唯一標(biāo)示，所以設(shè)置成整型自增字段就行了。
再建一個HTML頁面，只需簡單的拉幾個html控件出來擺著就行，注意在頁面頂部有個標(biāo)簽用來占位輸出評論內(nèi)容。
Html頁面代碼就這樣簡單就行了:
<body><table id="room"> </table> <div> 用戶名：<input id="Text1" type="text" /><br /> 信息：<textarea id="TextArea1" cols="20" name="S1" rows="5"></textarea><br /> <input id="Button1" type="button" value="提交" /></div> </body>
然后再頁面剛加載的時候，需要從數(shù)據(jù)庫中顯示出已有的評論，所以建個后臺一般處理程序，命名為：bodyload.ashx。這個后臺處理程序就是讀取數(shù)據(jù)庫中的所有評論信息，加載到顯示頁面，當(dāng)然我這里只是簡單的利用|標(biāo)記來區(qū)別每個用戶的評論，用@標(biāo)記來區(qū)分用戶名和信息，所以不是很嚴(yán)謹(jǐn)。數(shù)據(jù)操作使用的是強類型的DataSet
獲取所有評論信息后臺處理代碼如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using _20100921Web.DataSetMsgTableAdapters; using System.Text; namespace _20100921Web { /// <summary> /// bodyload 的摘要說明 /// </summary> public class bodyload : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; T_MsgTableAdapter adapter = new T_MsgTableAdapter(); StringBuilder sb = new StringBuilder(); DataSetMsg.T_MsgDataTable table = adapter.GetData(); foreach (var v in table) { sb.Append(v.Username); sb.Append("@"); sb.Append(v.Message); sb.Append("|"); } String result = sb.ToString(); context.Response.Write(result); } public bool IsReusable { get { return false; } } } }前臺調(diào)用JQuery代碼在頁面加載時進(jìn)行讀取評論，這里就用到了JQuery中的AJAX了，其實也非常簡單，就只是調(diào)用JQuery中的$.post()方法就可以實現(xiàn)了，該方法實質(zhì)還是調(diào)用了$.ajax()的方法。
前臺JQuery代碼如下：
$.post("bodyload.ashx", function (data, state) { if (state == "success") { var msgArr = data.split("|"); for (var i = 0; i < msgArr.length; i++) { if (msgArr[i].length == 0) { return; } var msg = msgArr[i].split("@"); var res = "<tr><td>" + msg[0] + "說：</td><td>" + msg[1] + "</td></tr>"; $("#room").append(res); } } });然后來處理每一次用戶輸入后的插入數(shù)據(jù)及在頁面無刷新更新顯示評論內(nèi)容，需要另外添加一個后臺處理一般程序，命名為：update.ashx，用來在后臺插入數(shù)據(jù)到數(shù)據(jù)庫中。
后臺處理代碼如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using _20100921Web.DataSetMsgTableAdapters; namespace _20100921Web { /// <summary> /// update 的摘要說明 /// </summary> public class update : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; String username = context.Request["username"]; String msg = context.Request["msg"]; T_MsgTableAdapter adapter = new T_MsgTableAdapter(); adapter.Insert(username, msg); } public bool IsReusable { get { return false; } } } }最后就是在前臺將數(shù)據(jù)傳到后臺插入，并將評論信息進(jìn)行更新：
$("#Button1").click(function () { var username = $("#Text1").val(); var msg = $("#TextArea1").text(); $.post("update.ashx",{"username":username,"msg":msg},function(data,states){if (states == "success"){var res = "<tr><td>"+username+"說：</td><td>"+msg+"</td></tr>";$("#room").append(res);}})})希望本文所述對大家的C#程序設(shè)計有所幫助。
新聞熱點
疑難解答
圖片精選
