用ajax.NET 實現無刷新投票、評論

 C# 中創建新的 ASP.NET 項目,再添加引用 AJAX.dll 文件。唯一的額外配置步驟是在 <system.web> 元素中(位於 web.config 文件中)添加以下代碼。

<configuration>    
<system.web>  
<httpHandlers>
<!-- Register the ajax handler -->
<add verb="POST,GET" path="ajax/*.ashx" 
type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>  
  ...
  ... 
</system.web>
</configuration>

爲了使服務器端函數在 JavaScript 中可用,必須做兩件事情。首先,要使用的函數必須標有 Ajax.AjaxMethodAttribute。其次,在頁加載事件期間,必須通過調用 Ajax.Utility.RegisterTypeForAjax 來註冊包含這些函數的類

以下是我用ajax.net實現的無刷新評論。

效果查看地址:http://www.e-works.net.cn/report/hot2010/hot.htm

頁面用到的js如下:

 <script language="JavaScript" type="text/javascript">
               function showaddpl(str,infoid)
        {        
            var comment=document.getElementById(str);
             var pl=document.getElementById('pl_'+infoid)
             if(comment.innerHTML=="")
             {
            comment.innerHTML=_010SmpdVote.ShowComment(infoid).value;        
            comment.innerHTML+="<div class=/"mood_reply_box clear/"><div><dl class=/"clearfix/"><dt>用戶名</dt><dd><input name=/"textfield/"  type=/"text/" id=/"textfield_"+str+"/" style=/"width:180px;border:1px solid #F2908E/" /></dd></dl></div><div><dl class=/"clearfix/"><dt>評論內容</dt><dd><textarea class=/"tcss/" id=/"TextBox_"+str+"/" style=/"width:500px;border:1px solid #F2908E;cursor:text;font-size:12px;padding:1px 2px;/"></textarea></dd></dl></div><div class=/"ok clear/"><span style=/"padding: 3px 5px;background:#740315;border:1px solid #F2908E;color:#fff/" onmouseover=/"this.style.cursor='pointer'/" onclick=/"addpl('"+str+"','"+infoid+"')/">提交</span></div></div>";
          
            pl.innerHTML='『收起評論』';
            }
            else
            {
            pl.innerHTML='『發表及查看評論』';
            comment.innerHTML="";
            }
           
        }
        function showpl(str,infoid)
        {
          var comment=document.getElementById(str);
            comment.innerHTML=_010SmpdVote.ShowComment(infoid).value;
        }
          function addpl(str,infoid)
        {
          var txtContent = document.getElementById("TextBox_"+str+"").value; //文本框輸入內容
          if (txtContent == "")  alert('請填寫評論內容!');
          else
          {
          var username=document.getElementById("textfield_"+str+"").value;
          var result=_010SmpdVote.InsertComment(infoid,username,txtContent).value;       
           alert(result);
           showpl(str,infoid);
           }
           }
         function vote(id,str)
        {
         var tpcount=_010SmpdVote.Vote(id).value;
          var countstr=document.getElementById(str);
          countstr.innerHTML=tpcount;
          alert('OK!');
        }
  </script>

主要的cs代碼如下:

注意:1、需要在Page_Load中加上Ajax.Utility.RegisterTypeForAjax(typeof(_010SmpdVote));
其中_010SmpdVote是頁面類的名字。

下面是在頁面顯示參加投票和評論的獎項:
  private void ShowInfo(string type)
        {
                    DataTable dt = Smpd.GetAppraisalListNoPage(int.Parse(type));
                     StringBuilder sb = new StringBuilder("");
                                string htmlurl = "";
                string imgfile = "";
                string voteinfo = "";
                //sb.Append("<div class=/"hot_list/">");
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    imgfile = dt.Rows[i]["imghtmlurl"].ToString();
                    htmlurl = dt.Rows[i]["link"].ToString().Replace("http://articles.e-works.net.cn", "");
                    int n = i + 1;
                    sb.Append("<dl class=/"clearfix/">");
                    sb.Append(" <dt><strong><i>" + n + "</i></strong>");
                    sb.Append("<a target=/"_blank/" href=/"" + dt.Rows[i]["link"].ToString() + "/">" + dt.Rows[i]["titlt"].ToString() + "</a>");
                    sb.Append("<span onmouseover=/"this.style.cursor='pointer'/" onclick=/"vote('" + dt.Rows[i]["id"].ToString() + "','count_"+i+"');/"> 頂 </span>");
                    sb.Append("<span id=/"count_"+i+"/" style=/"font-family: Verdana,Arial,Helvetica,sans-serif; font-size:16px; color: rgb(255, 0, 0);/">").Append(dt.Rows[i]["dccount"].ToString()).Append("</span>");
                    //sb.Append("<span style=/"color:#000;/">『<a href=/"ShowComment.aspx?htmlurl=" + htmlurl + "&id=" + dt.Rows[i]["id"].ToString() + "/" target=/"_blank/">查看評論</a>』</span>");
                    sb.Append("<span id=/"pl_" + dt.Rows[i]["id"].ToString() + "/" onmouseover=/"this.style.cursor='pointer'/" onclick=/"showaddpl('hot_" + i + "','" + dt.Rows[i]["id"].ToString() + "')/" style=/"color:#000;/">『發表及查看評論』</span></dt>");
                    sb.Append("<dd class=/"fL pr10/">");
                    sb.Append("<a target=/"_blank/" href=/"" + dt.Rows[i]["link"].ToString() + "/">");
                    sb.Append("<img src=/"" + imgfile + "/"  border=/"0/" width=/"127/" height=/"95/"></img></a>");
                    sb.Append("</dd>");             
                          
                    voteinfo = dt.Rows[i]["info"].ToString();
                    voteinfo = commonuse.CutString(280, voteinfo);

                    sb.Append("<dd><a target=/"_blank/" href=/"" + dt.Rows[i]["link"].ToString() + "/">" + voteinfo + "</a>");

                    sb.Append("<a target=/"_blank/" href=/"" + dt.Rows[i]["link"].ToString() + "/">");
                    sb.Append("<span style=/"color:#FF0000/">詳細內容 >></span></a></dd>");
                    sb.Append("<dd><div class=/"mood_reply clear/" id=/"hot_"+i+"/">");
                    sb.Append("</div></dd></dl>");
     

                
            }

下面是幾個Ajax方法,都是被頁面javascript調用的方法,注意要想方法能被前臺js調用,必須在方法前加[Ajax.AjaxMethod()]

//投票方法

[Ajax.AjaxMethod()]
        public int Vote(int id)
        {
          
           Smpd.Vote(id.ToString(),42, "", "", "", "", "", "", "", "", "", "", "", "");
           return Smpd.GetInfoVoteNum(id);
        }

//發表評論的方法
        [Ajax.AjaxMethod()]
        public string InsertComment(int id,string username,string content)
        {
            Smpd.InsertComment(id, username, content, 1);
            return "評論成功!";
        }

//無刷新顯示評論的方法
        [Ajax.AjaxMethod()]
        public string ShowComment(int id)
        {
            StringBuilder sb = new StringBuilder("");

            DataTable dt = Smpd.GetCommentList(id, 1);
            if (dt.Rows.Count > 0)
            {
                for (int n = 0; n < dt.Rows.Count; n++)
                {
                    string username = "匿名用戶";
                    if (dt.Rows[n]["username"].ToString() != "")
                        username = dt.Rows[n]["username"].ToString();

                    sb.Append("<div class=/"mood_box_table/">");
                    sb.Append("<dl class=/"clearfix/"><dt class=/"img clearfix/">");
                    sb.Append("<div class=/"mood_authorname fL/">" + username + " </div>");
                    sb.Append("<div class=/"mood_comment_last fL/"><span class=/"gray/">");
                    sb.Append(dt.Rows[n]["addtime"].ToString());
                    sb.Append("</span></div></dt>");
                    sb.Append("<dd class=/"commentcont/">" + dt.Rows[n]["info"] + " </dd>");
                    sb.Append("</dl></div>");
                }
            }
            return sb.ToString();
        }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章