首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

关于Ajax无刷新有关问题

2011-12-13 
关于Ajax无刷新问题前台代码:%@Pagelanguage c# Codebehind WebForm1.aspx.cs AutoEventWireup f

关于Ajax无刷新问题
前台代码:
<%@   Page   language= "c# "   Codebehind= "WebForm1.aspx.cs "   AutoEventWireup= "false "   Inherits= "AjaxDemo.WebForm1 "   %>
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN "   >
<HTML>
<HEAD>
<title> WebForm1 </title>
<script   language= "javascript "   type= "text/javascript "   >                
                        //城市------------------------------
                        function   cityResult()  
                        {  
                                var   city=document.getElementById( "TextBox1 ");
                                WebForm1.GetCityList(city.value,get_city_Result_CallBack);
                        }
                       
                        function   get_city_Result_CallBack(response)
                        {
                                if   (response.value   !=   null)
                                {                                        
                                        //debugger;
                                        document.getElementById( "DropDownList1 ").style.display= "block ";
document.getElementById( "DropDownList1 ").length=0;                            
                             var   ds   =   response.value;
                                        if(ds   !=   null   &&   typeof(ds)   ==   "object "   &&   ds.Tables   !=   null)
                                        {                                        
                                                for(var   i=0;   i <ds.Tables[0].Rows.length;   i++)
                                     {


                                             var   name=ds.Tables[0].Rows[i].city;
                                       var   id=ds.Tables[0].Rows[i].cityID;
                                       document.getElementById( "DropDownList1 ").options.add(new   Option(name,id));
                                     }
                                        }
                                }
                                else
                                {
document.getElementById( "DropDownList1 ").style.display= "none ";
                                }                          
                                return
                        }
                     
                        function   getData()
                        {
                                var   province=document.getElementById( "DropDownList1 ");
                                var   pindex   =   province.selectedIndex;
                                var   pValue   =   province.options[pindex].value;
                                var   pText     =   province.options[pindex].text;                                                                                                

                                document.getElementById( " <%=TextBox1.ClientID%> ").innerText=pText;
                        }
</script>
</HEAD>
<body>
<form   id= "Form1 "   method= "post "   runat= "server ">
<FONT   face= "宋体 "> </FONT> <FONT   face= "宋体 "> </FONT>


<br>
<asp:DropDownList   ID= "DropDownList1 "   runat= "server "   Width= "72px "   Height= "8px "> </asp:DropDownList>
<br>
<asp:TextBox   ID= "TextBox1 "   runat= "server "> </asp:TextBox>
</form>
</body>
</HTML>

后台代码:
using   System;
using   System.Collections;
using   System.ComponentModel;
using   System.Data;
using   System.Drawing;
using   System.Web;
using   System.Web.SessionState;
using   System.Web.UI;
using   System.Web.UI.WebControls;
using   System.Web.UI.HtmlControls;
using   AjaxPro;
using   System.Data.SqlClient;

namespace   AjaxDemo
{
///   <summary>
///   WebForm1   的摘要说明。
///   </summary>
public   class   WebForm1   :   System.Web.UI.Page
{
protected   System.Web.UI.WebControls.TextBox   TextBox1;
protected   System.Web.UI.WebControls.DropDownList   DropDownList1;

private   void   Page_Load(object   sender,   System.EventArgs   e)
{
//   在此处放置用户代码以初始化页面
AjaxPro.Utility.RegisterTypeForAjax(typeof(WebForm1));

if   (!Page.IsPostBack)
{
this.TextBox1.Attributes[ "onchange "]   =   "javascript:cityResult() ";
this.DropDownList1.Attributes.Add( "OnSelectedIndexChanged ",   "getData(); ");
}
}
[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.Read)]
public   DataSet   GetCityList(int   provinceid)
{
string   sql   =   "select   *   from   a01   where   a0101   like   '% "   +   provinceid   +   "% ' ";

return   GetDataSet(sql);

}

public   static   DataSet   GetDataSet(string   sql)
{
string   ConnectionString   =   System.Configuration.ConfigurationSettings.AppSettings[ "ConnectionString "];
SqlDataAdapter   sda   =   new   SqlDataAdapter(sql,   ConnectionString);
DataSet   ds   =   new   DataSet();
sda.Fill(ds);
return   ds;
}

Web.config
<?xml   version= "1.0 "   encoding= "utf-8 "   ?>
<configuration>
<appSettings>
<add   key= "database1 "   value= "Server=.;database=database1;uid=sa;pwd=; "   />
</appSettings>
       
    <system.web>
                  <httpHandlers>
<add   verb= "POST,GET "   path= "ajaxpro/*.ashx "   type= "AjaxPro.AjaxHandlerFactory,   AjaxPro "   />
</httpHandlers>
……

要求:Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
但我一运行有出错的,那位大哥帮忙看下,最终的结果能够运行出来就行,想学习下无刷新技术

[解决办法]
建议不要用前台xml来生产select的option,速度有问题,毕竟ie是脚本解释
A(Select)请求后,发出Ajax请求,后台产生B(Select)的全部html代码,由前台
document.getElementById( 'B ').outerHTML = htmls;
这样快
[解决办法]
js中怎么能用DataSet呢?

你需要添加一个实体类A01。将DataSet -> A01[],然后返回给js,ajax.net会生成json对象,


可以直接使用。
[解决办法]
WebForm1.GetCityList(city.value,get_city_Result_CallBack);

第一个参数是你的传入参数,第二个get_city_Result_CallBack 对应的是你的aspx页面的回掉脚本函数.

热点排行