现在的位置: 首页 > 综合 > 正文

用ajax.NET 实现无刷新投票、评论

2017年11月19日 ⁄ 综合 ⁄ 共 6667字 ⁄ 字号 评论关闭

 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();
        }

抱歉!评论已关闭.