C#應用jQuery完成無刷新評論提交的辦法。本站提示廣大學習愛好者:(C#應用jQuery完成無刷新評論提交的辦法)文章只能為提供參考,不一定能成為您想要的結果。以下是C#應用jQuery完成無刷新評論提交的辦法正文
本文實例講述了C#應用jQuery完成無刷新評論提交的辦法。分享給年夜家供年夜家參考。詳細剖析以下:
起首在數據庫中就建三個字段的表用來存儲用戶名和評論信息,Id只是為了設置獨一標示,所以設置成整型自增字段就好了。
再建一個HTML頁面,只需簡略的拉幾個html控件出來擺著就行,留意在頁面頂部有個標簽用來占位輸入評論內容。
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>
然後再頁面剛加載的時刻,須要從數據庫中顯示出已有的評論,所以建個後台普通處置法式,定名為:bodyload.ashx。這個後台處置法式就是讀取數據庫中的一切評論信息,加載到顯示頁面,固然我這裡只是簡略的應用|標志來差別每一個用戶的評論,用@標志來辨別用戶名和信息,所以不是很嚴謹。數據操作應用的是強類型的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; } } } }
前台挪用JQuery代碼在頁面加載時停止讀取評論,這裡就用到了JQuery中的AJAX了,其實也異常簡略,就只是挪用JQuery中的$.post()辦法便可以完成了,該辦法本質照樣挪用了$.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); } } });
然後來處置每次用戶輸出後的拔出數據及在頁面無刷新更新顯示評論內容,須要別的添加一個後台處置普通法式,定名為:update.ashx,用來在後台拔出數據到數據庫中。
後台處置代碼以下:
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; } } } }
最初就是在前台將數據傳到後台拔出,並將評論信息停止更新:
$("#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#法式設計有所贊助。