当前位置: 代码迷 >> ASP.NET >> 无刷新更新解决办法
  详细解决方案

无刷新更新解决办法

热度:859   发布时间:2013-02-25 00:00:00.0
无刷新更新
不知道各位有没有去过cnbeta.com?
在cnbeta中发表完评论的时候,它只是在面尾添加评论而不用刷新,
这个在asp.net中怎样实现?
希望各位能给出答案(代码),如果满意的话我会加分加到100分。

------解决方案--------------------------------------------------------
看看ajax就知道,不是不刷新,应该叫局部刷新
------解决方案--------------------------------------------------------
是ajax技术
------解决方案--------------------------------------------------------
ajax 托一个UpdatePannel,是最简单的实现方式。
------解决方案--------------------------------------------------------
探讨
看看ajax就知道,不是不刷新,应该叫局部刷新

------解决方案--------------------------------------------------------
微软的ajax就是最简单的了
------解决方案--------------------------------------------------------
方法一.AjaxPro的使用


1.在项目中添加引用,浏览找到AjaxPro.2.dll文件

2.在Web.config中的system.web里面写入以下代码
</configuration>
<system.web>
<httpHandlers>
<add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>
</system.web>
<//configuration>

3.在加载事件中,加入
AjaxPro.Utility.RegisterTypeForAjax(typeof(类名));

4.写的方法都要用
 [AjaxPro.AjaxMethod]开头,然后在写方法

5.调用时必须写清楚
 命名空间名.类名.方法,例:WebUI._Default.getData();

6.调用可分两中方法(同步调用,异步调用)
 
//在后台写的无参方法
[AjaxPro.AjaxMethod]
public string getStr()
{
return "hello my friends";
}
//在后台写的有参方法
 [AjaxPro.AjaxMethod]
public string getString(string str)
{
return str + "Say: hello my friends";
}

a.同步调用
 (1).拖入html控件button
 (2).双击,自动显示在.aspx的脚本中
 (3).在里面写入你要输入的内容
 例:
//------------------同步调用无参-----------
function Button1_onclick() 
{
var res=WebUI._Default.getStr();
alert(res.value);

  
//------------------同步调用有参------------
function Button2_onclick() //TextBox1为服务器控件
{
var str=document.getElementById("<%=TextBox1.ClientID%>").value;
var res=WebUI._Default.getStr(str);
alert(res.value);
}


b.异步调用
 (1).拖入html控件button
 (2).双击,自动显示在.aspx的脚本中
 (3).在里面写入你要输入的内容
 例:
//-----------------异步调用无参-----------------
function Button3_onclick() {
WebUI._Default.getStr(getStrCallBack);
}
function getStrCallBack(res)
{
alert(res.value);
}
//-----------------异步调用有参-----------------
function Button4_onclick() {
var str=document.getElementById("<%=TextBox1.ClientID %>").value;
WebUI._Default.getString(str,getStringCallBack);
}
function getStringCallBack(res)
{
alert(res.value);
}

7.调用对象

//对象
[AjaxPro.AjaxMethod]
public Class getClass()
{
Class cla = new Class();
cla.C_Id = 100;
cla.C_Name = "34班";
cla.Count = 20;
return cla;
}
//------------------同步调用对象-----------
function Button5_onclick() {
var res=WebUI._Default.getClass().value;
alert("班级编号:"+res.C_Id+"名称:"+res.C_Name+"人数:"+res.Count);
}
//------------------异步调用对象-----------
function Button6_onclick() {
WebUI._Default.getClass(getClassCallBack);
}
function getClassCallBack(clas)
{
var res=clas.value;
alert("班级编号:"+res.C_Id+"名称:"+res.C_Name+"人数:"+res.Count);
}


8.数据集的使用
 //方法
[AjaxPro.AjaxMethod]
public DataSet getInfo()
{
return WebUI.GetDataSet.getList();
}

//--------------------异步调用数据集--------------
function Button8_onclick() {
WebUI._Default.getInfo(getDataSetCallBack);
}
function getDataSetCallBack(res)
{
var dataset=res.value;
var strHtml="";
strHtml +='<table style ="border-collapse:collapse ; border-color:Gray ;" border="1px">';
strHtml +=' <tr>';
strHtml +=' <td>学生编号</td>';
strHtml +=' <td>名称</td>';
strHtml +=' <td>年龄</td>';
strHtml +=' </tr>';

for(var i=0;i<dataset.Tables[0].Rows.length;i++)
{
strHtml +=' <tr>';
strHtml +=' <td>'+ dataset.Tables[0].Rows[i].stu_id +'</td>';
strHtml +=' <td>'+ dataset.Tables[0].Rows[i].stu_name +'</td>';
strHtml +=' <td>'+ dataset.Tables[0].Rows[i].stu_age +'</td>';
strHtml +=' </tr>';
}
strHtml +=' </table>';
thedata.innerHTML=strHtml;//thedata是一个<div id="thedata"></div>中的thedata
}

 

9.验证码的使用

//----------------------验证码的使用(必须采用同步调用)----------------------

//验证码的使用
[AjaxPro.AjaxMethod]
public bool ValidCodeData(string code)
{
return (HttpContext.Current.Session["CheckCode"].ToString()==code);
}

function Button9_onclick() {
var code=document.getElementById("<%=TextBox2.ClientID %>").value;
var bool=WebUI._Default.ValidCodeData(code).value;
if(bool==true)
{
alert("ok");
}else
{
alert("no");
}
}
AjaxPro.dll文件网上很多的,自己下,如果找不到呢,给我发个留言,我发你邮箱

 


方法二,直接调用:
javascript中:<%=后台方法%>
 function says()
{
alert("<%=Say()%>");
}
function del()
{
alert("<%=DeleteByID(8)%>");//DeleteByID(8)后台方法名
}


方法三,采用ICallbackEventHandler回调

/**//*
 * 对ICallbackEventHandler接口进行声明,要在客户端调用服务端代码而不回发,必须声明该接口并且实现它的两个方法:
 * RaiseCallbackEvent()、GetCallbackResult()
 * RaiseCallbackEvent()的参数是从前台传过来的,根据传来的参数执行不同的代码并将结果用GetCallbackResult()返回前台
*/

//必须声明System.Web.UI.ICallbackEventHandler接口
public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
//定义一个回调的返回值
private string Result;
//定义两个变量,用来接收页面传过来到操作数
private string Num1;
private string Num2;
protected void Page_Load(object sender, EventArgs e)
{

}

/**//// <summary>
/// 该方法是回调执行的方法,根据参数在这个方法中处理回调的内容,该方法没有返回值
/// </summary>
/// <param name="eventArgument">此参数是从客户端传过来的</param>
public void RaiseCallbackEvent(string eventArgument)
{
//eventArgumeng 为javascript从客户端传递的参数,本例传过来三个参数用“/”分割将每个参数取出存入数组
string[] PagParams = eventArgument.Split('/');
Num1 = PagParams[1];
Num2 = PagParams[2];
//根据第一个参数(所选的操作符),调用不同的执行函数
switch (PagParams[0])
{
case "0":
Result = add(); break;
case "1":
Result = sub(); break;
case "2":
Result = multi(); break;
case "3":
Result = division(); break;
}
}

/**//// <summary>
/// 该方法是返回回调的结果给客户端
/// </summary>
/// <returns></returns>
public string GetCallbackResult()
{
return Result;
}

//一下四个函数是通过RaiseCallbackEvent方法,调用的回调要执行操作的函数
private string add()
{
double addResult = double.Parse(Num1) + double.Parse(Num2);
return addResult.ToString();
}

private string sub()
{
double addResult = double.Parse(Num1) - double.Parse(Num2);
return addResult.ToString();
}

private string multi()
{
double addResult = double.Parse(Num1) * double.Parse(Num2);
return addResult.ToString();
}

private string division()
{
double addresult = double.Parse(Num1) / double.Parse(Num2);
return addresult.ToString();
}
}


方法四:直接采用ajax控件

------解决方案--------------------------------------------------------
页面上加入ScriptManager ,再加上UpdatePanel,把以前的使用的那些服务器控件,放在这个UpdatePanel里面就可以实现ajax效果了。
------解决方案--------------------------------------------------------
《征服asp.net 2.0 ajax 》。你看看这本书吧。
------解决方案--------------------------------------------------------
这就是AJAX技术,.net也有自己的ajax控件,但不推荐使用,因为效率十分低下,这个问题在三级联动的下拉菜单中特别明显。
要有高效的AJAX,还是需要你有相当的java脚本知识,即JS。用上jquery这个JS库,要 JS就十分轻松。
------解决方案--------------------------------------------------------
恩,楼上都是正解~
------解决方案--------------------------------------------------------
探讨
引用:
页面上加入ScriptManager ,再加上UpdatePanel,把以前的使用的那些服务器控件,放在这个UpdatePanel里面就可以实现ajax效果了。


这个不行,UpdatePanel比较大的话,页面会有明显的闪动

------解决方案--------------------------------------------------------
怎么失望呢

那种效果就应该用ajax来实现啊


------解决方案--------------------------------------------------------
使用UpdatePannel就可以简单的实现了
------解决方案--------------------------------------------------------
看看ajax就知道,不是不刷新,应该叫局部刷新

------解决方案--------------------------------------------------------
AJAX能实现你说的那种效果。
你可以研究一下AJAX 百度上搜索一下,看看介绍。很奇特的。呵呵
当然实现AJAX的方法也有好几种,微软提供的ajax控件是一个简单的方法。
  相关解决方案