您的位置：首页 > 其它

AjaxPro与服务器端的交互及其传值

2008-01-10 15:01 387 查看

Ajax开发主要有两种，一是以UpdatePanel控件为代表的微软技术，一种是AjaxPro技术。

各种技术有着各自的特点。采用微软的技术UpdatePanel为例，实现简单Ajax程序几乎不需要了解DOM、网页脚本知识和XHTML知识，缺点也有一些，通常会带来一些不必要的网络流量（整个UpdatePanel控件内所有的控件内容都会提交），造成网络流量的浪费，另外就是VS2005下经常会出现 “***不是已知元素原因可能是网站中存在编译错误 ”的提示。碰到过的开发人员恐怕身有体会吧？

AjaxPro则需要开发人员孰知JS脚本和XHTML相关知识，因为所有的方法需要你自己编写网页脚本。开发速度相对会较慢一点，JS调试要相对麻烦一点。

读过周公（http://blog.csdn.net/zhoufoxcn）的一篇Blog (http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/2026908.aspx)后，决定照着实现一下
前台代码：Test.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>利用AjaxPro实现用户注册时输入用户名是否已经被注册了</title>
</head>
<body>
<form id="form1" runat="server">
<div>
用户名：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<div id="errorMsg"></div>
</div>

<script type="text/javascript" language="javascript" defer="defer">
function checkUserName_Client()
{
var userName = document.getElementById('<%=txtUserName.UniqueID %>').value;
document.getElementById('errorMsg').style.display="block";
document.getElementById('errorMsg').style.color="red";

if(userName == '')
{
document.getElementById('errorMsg').innerText = "用户名不能为空";
return false;
}

document.getElementById('errorMsg').innerText = Test.checkUserName_Server(""+userName+"").value ? "该用户名已被注册" : "可以注册";
}
</script>

</form>
</body>
</html>

后台代码：Test.aspx.cs
其中用到的数据库
表名：Users
字段名：UserName
记录可添加你喜欢的用户名

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

/**
* 参照周公的Blog
* 写作说明：本文展示了如何利用AjaxPro与服务器交互，并且给服务器传值的情况。
* 作者：奈奈
* 日期：2008-1-10
* 首发地址：http://blog.csdn.net/mndn_nana/
**/
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!this.IsPostBack)
{
txtUserName.Attributes["onkeyup"] = "javascript:checkUserName_Client();";
}
AjaxPro.Utility.RegisterTypeForAjax(typeof(Test));//注册AjaxPro组件
}

[AjaxPro.AjaxMethod]//申明可以在js中使用AjaxPro调用的服务器端方法
public bool checkUserName_Server(string userName)
{
string strConnection = System.Configuration.ConfigurationManager.AppSettings["ConnectionString"];
SqlConnection con = new SqlConnection(strConnection);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "select count(*) from Users where UserName='" + userName + "'";
con.Open();
int i = (int)cmd.ExecuteScalar();
if (i > 0)
{
return true;
//return "该用户名已被注册";
}
else
{
return false;
//return "可以注册";
}
}
}

说明：在前台aspx代码中我们写了个JS方法，负责与服务器的交互，分别是function checkUserName_Client()，请注意看：

<script type="text/javascript" language="javascript" defer="defer">
function checkUserName_Client()
{
var userName = document.getElementById('<%=txtUserName.UniqueID %>').value;
document.getElementById('errorMsg').style.display="block";
document.getElementById('errorMsg').style.color="red";

if(userName == '')
{
document.getElementById('errorMsg').innerText = "用户名不能为空";
return false;
}

document.getElementById('errorMsg').innerText = Test.checkUserName_Server(""+userName+"").value ? "该用户名已被注册" : "可以注册";
}
</script>

细心的朋友会发现在后台Test..aspx.cs里就有checkUserName_Server(string userName)方法，在JS里我们就是通过Test.checkUserName_Server(string userName)来调用的，这个服务器端方法与平常所熟悉的方法声明有点不一样，如下：

[AjaxPro.AjaxMethod]//申明可以在js中使用AjaxPro调用的服务器端方法
public bool checkUserName_Server(string userName)
{
string strConnection = System.Configuration.ConfigurationManager.AppSettings["ConnectionString"];
SqlConnection con = new SqlConnection(strConnection);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "select count(*) from Users where UserName='" + userName + "'";
con.Open();
int i = (int)cmd.ExecuteScalar();
if (i > 0)
{
return true;
//该用户名已被注册
}
else
{
return false;
//return "可以注册";
}
}

其中[AjaxPro.AjaxMethod]表明是可以被JS代码所调用的，另外方法需要的参数类型是string类型,而JS中数据是没有类型的，因为都是var来声明的，所以如何把参数值和参数类型传给服务器还是一个麻烦问题。

资料上说可以通过下述的方式解决：
Test.checkUserName_Server(""+userName+"")，服务器就自动把参数值当字符串类型来识别了；

看看下边3次运行的效果：

该用户名已经被注册过的效果：

可以注册的效果：

用户名为空时的效果：

在Page_Load里调用AjaxPro.Utility.RegisterTypeForAjax(typeof(你的aspx页面所依附的class名称));这句话必须有，预了解详细，请查找有关AjaxPro的介绍资料。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航