用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/" οnmοuseοver=/"this.style.cursor='pointer'/" οnclick=/"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 οnmοuseοver=/"this.style.cursor='pointer'/" οnclick=/"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() + "/" οnmοuseοver=/"this.style.cursor='pointer'/" οnclick=/"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();
        }

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ASP.NET可以利用Ajax技术实现刷新页面。Ajax是一种异步的JavaScript和XML通信技术,它可以在不刷新整个页面的情况下,向服务器提交或获取数据,并将返回的数据局部地更新到页面上。在ASP.NET中,可以通过以下步骤来实现刷新页面: 1. 引入jQuery库。 在ASP.NET页面中,需要通过<script>标签引入jQuery库,例如: ``` <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> ``` 2. 编写JavaScript代码。 通过jQuery库提供的$.ajax()方法,可以向服务器提交或获取数据,并在成功返回数据后更新页面。例如,下面的代码用于向服务器提交数据: ``` $.ajax({ type: "POST", url: "Handler.ashx", data: { name: "张三", age: 18 }, success: function (data) { $("#result").html(data); } }); ``` 其中,type表示提交数据的方式,可以是POST或GET;url表示提交数据的目标地址;data表示提交的数据,可以是JSON对象、字符串或FormData对象;success表示成功返回数据后的回调函数,data参数表示服务器返回的数据。 3. 编写服务器端代码。 在ASP.NET中,可以通过Generic Handler(通用处理程序)来处理Ajax请求。Generic Handler是一种不包含HTML标记的ASP.NET页面,可以处理各种类型的请求。例如,下面的代码用于处理上面的Ajax请求: ``` public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { string name = context.Request.Form["name"]; int age = int.Parse(context.Request.Form["age"]); // 处理请求,返回数据 context.Response.Write("提交成功!"); } public bool IsReusable { get { return false; } } } ``` 在该代码中,通过Request.Form[]属性获取提交的数据,处理请求后通过Response.Write()方法返回数据。 通过以上步骤,就可以在ASP.NET中利用Ajax技术实现刷新页面了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值