关闭

关闭

封号提示

内容

首页 ASP.NET和AJAX简洁教程.doc

ASP.NET和AJAX简洁教程.doc

ASP.NET和AJAX简洁教程.doc

上传者: jlnuyxl 2011-11-04 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《ASP.NET和AJAX简洁教程doc》,可适用于IT/计算机领域,主题内容包含介绍介绍尽管AJAX是种客户端技术但实际上的开发过程它经常要调用一个服务器端的过程。通常网站上的数据是存放在一个关系型数据库中为了让AJAX更有用处符等。

介绍介绍尽管AJAX是种客户端技术但实际上的开发过程它经常要调用一个服务器端的过程。通常网站上的数据是存放在一个关系型数据库中为了让AJAX更有用处处理服务器端数据需要一种简单可靠的方法。幸运的是ASPNETAJAX提供了一种有效的基础架构来做这件事情浏览器和服务器在Internet上可以进行AJAX通信。自然而然WebService在数据传输和客户端服务器之间的一般通信方面可以扮演一个重要角色。本文就演示了如果通过ASPNETAJAX调用ASPNETwebservices。软件需求本文所有的范例都是使用ASPNETAJAXRC版而且要在SQLServer(Express版即可)上有一个Northwind数据库。范例使用VisualStudio作为开发环境。范例场景范例开发了一个Web页面用于输入Northwind数据库职员表中的职员数据。页面通过ASPNETAJAX功能调用一个WebService来完成职员表中的数据增、删、改、查。创建一个WebService作为开始使用VisualStudio创建一个新的Web站点注意把ASPNETAJAX项目模板添加到新站点对话框这个对话框包括一个"ASPNETAJAXEnabledWebSite"模板。图:新站点创建模板使用"ASPNETAJAXEnabledWebSite"模板创建的新站点和用普通方法创建的站点区别如下:它的Webconfig自动包括许多ASPNETAJAX专用的配置信息。SystemWebExtensions程序集被添加到引用中。当然我们可以更改一个普通的Web站点以使之符合AJAX要求但模板可以大大简化我们的工作。现在我们创建了一个新的Web站点添加一个新的webservice并命名为EmployeeServiceasmxEmployeeService将包括个Web方法MethodNameDescriptionGetEmployees()返回Employees表里的雇员列表。这个列表是一个Employee对象数组GetEmployee()接收EmployeeID参数返回Employee对象的详细信息Insert()给Employees表里增加一个新的雇员信息Update()更新Employees表里的某个雇员信息Delete()删除Employees表里的某个雇员信息表:EmployeeService中的Web方法GetEmployees()和GetEmployee()方法以Employee对象的形式返回数据因此首先创建一个Employee类。右键单击AppCode文件夹选择“添加新项…”添加一个叫Employee的类下面显示Employee类的全部代码:publicclassEmployee{privateintintEmployeeIDprivatestringstrFirstNameprivatestringstrLastNamepublicintEmployeeID{get{returnintEmployeeID}set{intEmployeeID=value}}publicstringFirstName{get{returnstrFirstName}set{strFirstName=value}}publicstringLastName{get{returnstrLastName}set{strLastName=value}}}Employee类申明三个Private变量来分别存放employeeID,firstname和lastname三个变量再封装在三个public属性中:EmployeeID,FirstName和LastName。打开webconfig文件添加<connectionStrings>部分如下:<connectionStrings><addname="connstr"connectionString="datasource=sqlexpressinitialcatalog=northwindintegratedsecurity=true"><connectionStrings>这部分存放数据库链接字符串用于指向Northwind数据库确保修改SqlServer名称、IP地址以及验证方式以和我们的开发环境相符。现在打开EmployeeServicecs添加如下代码:privatestringstrConn=""publicEmployeeService(){strConn=ConfigurationManagerConnectionStrings"connstr"ConnectionString}代码使用了ConfigurationManager类来读取配置文件中的数据库链接字符串并存放在一个类级别的变量strConn中这个变量将被下面的所有WebMethod所使用。现在添加GetEmployees()webmethod:WebMethodpublicEmployeeGetEmployees(){SqlConnectioncnn=newSqlConnection(strConn)cnnOpen()SqlCommandcmd=newSqlCommand()cmdConnection=cnncmdCommandText="selectemployeeid,firstname,lastnamefromemployees"SqlDataReaderreader=cmdExecuteReader()List<Employee>list=newList<Employee>()while(readerRead()){Employeeemp=newEmployee()empEmployeeID=readerGetInt()empFirstName=readerGetString()empLastName=readerGetString()listAdd(emp)}readerClose()cnnClose()returnlistToArray()}代码创建了SqlConnectionandSqlCommand对象然后执行SELECT查询以获取Employees表中EmployeeID,FirstName和LastName字段。结果通过SqlDataReader返回。然后创建一个genericbasedEmployee数组通过While循环给每个Employee实例的属性赋值。当While循环完毕的时候关闭SqlDataReader和SqlConnection。GetEmployees()方法返回的类型是Employee数组。因此genericList使用List类中的ToArray()方法来转换成Employee数组。现在添加一个GetEmployee()webmethod如下:WebMethodpublicEmployeeGetEmployee(intpEmployeeId){SqlConnectioncnn=newSqlConnection(strConn)cnnOpen()SqlCommandcmd=newSqlCommand()cmdConnection=cnncmdCommandText="selectemployeeid,firstname,lastnamefromemployeeswhereemployeeid=id"SqlParameterid=newSqlParameter("id",pEmployeeId)cmdParametersAdd(id)SqlDataReaderreader=cmdExecuteReader()Employeeemp=newEmployee()while(readerRead()){empEmployeeID=readerGetInt()empFirstName=readerGetString()empLastName=readerGetString()}readerClose()cnnClose()returnemp}GetEmployee()webmethod接受一个employeeID参数作为输入代码和前面的非常相似但这次只返回一个employee。注意使用SqlParameter来定义传入的EmployeeID。现在再添加Insert()、Update()和Delete()webmethods其中Insert()webmethod以要添加的Employee的firstname和lastname作为参数Update()webmethod以要更新的employeeID以及新的firstname和lastname作为参数并执行UPDATE语句Delete()webmethod以要删除的employeeID作为参数然后执行DELETE语句WebMethodpublicintInsert(stringpFirstName,stringpLastName){SqlConnectioncnn=newSqlConnection(strConn)cnnOpen()SqlCommandcmd=newSqlCommand()cmdConnection=cnncmdCommandText="insertintoemployees(firstname,lastname)values(fname,lname)"SqlParameterfname=newSqlParameter("fname",pFirstName)SqlParameterlname=newSqlParameter("lname",pLastName)cmdParametersAdd(fname)cmdParametersAdd(lname)inti=cmdExecuteNonQuery()cnnClose()returni}WebMethodpublicintUpdate(intpEmployeeId,stringpFirstName,stringpLastName){SqlConnectioncnn=newSqlConnection(strConn)cnnOpen()SqlCommandcmd=newSqlCommand()cmdConnection=cnncmdCommandText="updateemployeessetfirstname=fname,lastname=lnamewhereemployeeid=id"SqlParameterfname=newSqlParameter("fname",pFirstName)SqlParameterlname=newSqlParameter("lname",pLastName)SqlParameterid=newSqlParameter("id",pEmployeeId)cmdParametersAdd(fname)cmdParametersAdd(lname)cmdParametersAdd(id)inti=cmdExecuteNonQuery()cnnClose()returni}WebMethodpublicintDelete(intpEmployeeId){SqlConnectioncnn=newSqlConnection(strConn)cnnOpen()SqlCommandcmd=newSqlCommand()cmdConnection=cnncmdCommandText="deletefromemployeeswhereemployeeid=id"SqlParameterid=newSqlParameter("id",pEmployeeId)cmdParametersAdd(id)inti=cmdExecuteNonQuery()cnnClose()returni}这就完成了webservice的创建。到目前为止还没有做任何和AJAX特性相关的任何工作现在时机已经成熟我们通过下面的代码更改webservice类的定义:usingSystemWebScriptServicesWebService(Namespace="http:tempuriorg")WebServiceBinding(ConformsTo=WsiProfilesBasicProfile)ScriptServicepublicclassEmployeeService:SystemWebServicesWebService{注意特地标明的黑体字我们导入了SystemWebScriptServices命名空间这个命名空间来自SystemWebExtensions程序集这个命名空间提供了ScriptService属性这将使webservice可以被来自客户端的JavaScript(如ASPNETAJAX)调用。好了我们开始准备从ASPNETAJAX调用WebService了!如何调用WebService这部分我们将创建一个Web页面作为数据输入通过调用刚刚创建的WebService来操作Employees表。作为开始我们先添加一个EmployeeServiceClientaspx页面打开工具箱选择View>Toolbox菜单在工具箱上选中AJAXExtensions这样的节点(见图)图:增加模板后的新站点创建对话框AJAXExtensions部分显示一个Web页面上所有可以使用的ASPNETAJAX组件。所有使用ASPNETAJAX的页面都需要一个ScriptManager组件。打开ScriptManager属性窗口定位Services属性打开Service引用编辑器如图:图:Service引用编辑器点击对话框底部的Add按钮设置Path属性以指向WebService(EmployeeServiceasmx)的虚拟路径下面的标记将会产生在Web页面文件中:<asp:ScriptManagerID="ScriptManager"runat="server"><Services><asp:ServiceReferencePath="EmployeeServiceasmx"><Services><asp:ScriptManager>对每个WebService调用都需要在<asp:ScriptManager>部分添加一个<asp:ServiceReference>元素此标记把要使用的webservice注册到当前webform上。图:设计页面表单表单包括一个下拉框(<SELECT>)用于显示所有的employeeIDs一旦选中其中一个employeeIDemployee的详细信息将显示在个文本框中然后可以更新这些信息。如果要添加一个employee只需要输入firstname和lastname然后点击“插入”按钮就可以了。同理如果要删除一个employee选择下拉框中的employeeID点击“删除”按钮。在INSERT、UPDATE或者DELETE操作完成后将会显示成功或者失败的信息。下面是所有的页面代码:<table><tr><tdcolspan=""><asp:LabelID="Label"runat="server"FontSize="XLarge"Text="EmployeeManagement"><asp:Label><td><tr><tr><tdstyle="width:px"><asp:LabelID="Label"runat="server"Text="EmployeeID:"><asp:Label><td><tdstyle="width:px"><selectid="Select"><select><td><tr><tr><tdstyle="width:px"><asp:LabelID="Label"runat="server"Text="FirstName:"><asp:Label><td><tdstyle="width:px"><inputid="Text"type="text"><td><tr><tr><tdstyle="width:px"><asp:LabelID="Label"runat="server"Text="LastName:"><asp:Label><td><tdstyle="width:px"><inputid="Text"type="text"><td><tr><tr><tdalign="center"colspan=""><inputid="Button"type="button"value="Insert"><inputid="Button"type="button"value="Update"><inputid="Button"type="button"value="Delete"><td><tr><tr><tdalign="center"colspan=""><spanid="lblMsg"style="fontweight:boldcolor:red"><span><td><tr><table>注意:我们没有使用ASPNET服务器端控件如DropDownList、TextBox以及Button。取而代之的是我们用的传统的HTML控件如:<SELECT>以及<INPUT>。这因为我们要想通过客户端JavaScript调用webservice而不是通过服务端代码。同理注意底下的<SPAN>标记这是用来显示成功或者失败的信息的。下一步在<head>元素内增加一个<script>部分添加一个CallWebMethod()的函数:functionCallWebMethod(methodType){switch(methodType){case"select":EmployeeServiceGetEmployees(FillEmployeeList,ErrorHandler,TimeOutHandler)breakcase"selectone":varselect=documentgetElementById("Select")varempid=selectoptionsselectselectedIndexvalueEmployeeServiceGetEmployee(empid,DisplayEmployeeDetails,ErrorHandler,TimeOutHandler)breakcase"insert":vartext=documentgetElementById("Text")vartext=documentgetElementById("Text")EmployeeServiceInsert(textvalue,textvalue,InsertEmployee,ErrorHandler,TimeOutHandler)breakcase"update":varselect=documentgetElementById("Select")varempid=selectoptionsselectselectedIndexvaluevartext=documentgetElementById("Text")vartext=documentgetElementById("Text")varemp=newEmployee()empEmployeeID=empidempFirstName=textvalueempLastName=textvalueEmployeeServiceUpdate(empid,textvalue,textvalue,UpdateEmployee,ErrorHandler,TimeOutHandler)breakcase"delete":varselect=documentgetElementById("Select")varempid=selectoptionsselectselectedIndexvalueEmployeeServiceDelete(empid,DeleteEmployee,ErrorHandler,TimeOutHandler)break}}CallWebMethod()函数就是用来调用webservice的中央控制函数。这个函数接收一个字符串参数用来标识调用的方法它包括一个switch语句来判断调用的方法每个case块调用一个webmethod。注意webmethod是如何被调用的:ASPNETAJAX框架自动创建一个JavaScript代理类这个代理类和要调用的webservice有相同的名称。因此上面代码中EmployeeService并不是真正的类而是一个JavaScript代理类。代理类包括原始webservice中所有的WebMethod。除了原来的webmethod所包括的参数外每个方法还包括个额外的参数。第一个参数是一个JavaScript函数用于当webmethod成功完成时调用的。记住:所有客户端和服务器端的AJAX通信都是异步的因此这个函数用来捕获webmethod的返回值。第二个参数是用于发生错误的情况下调用的JavaScript函数。最后第三个参数是当调用WebService发生超时的情况下调用的JavaScript函数。第一种情况case("select")就是简单的调用GetEmployees()方法第二种情况case("selectone")调用GetEmployee()方法通过传统的JavaScript代码获取下拉框中的employeeID同理第三、第四、第五个Case依次调用Insert()、Update()和Delete()方法。上面的代码通过个JavaScript函数实现相应的webmethod成功调用:FillEmployeeList(),DisplayEmployeeDetails(),InsertEmployee(),UpdateEmployee()以及DeleteEmployee()。每个函数接收一个参数作为webmethod相应的返回值。functionFillEmployeeList(result){varselect=documentgetElementById("Select")for(vari=i<resultlengthi){varoption=newOption(resultiEmployeeID,resultiEmployeeID)selectoptionsadd(option)}}functionDisplayEmployeeDetails(result){vartext=documentgetElementById("Text")vartext=documentgetElementById("Text")textinnerText=resultFirstNametextinnerText=resultLastNamevarlblMsg=documentgetElementById("lblMsg")lblMsginnerText=""}functionInsertEmployee(result){if(result>){varlblMsg=documentgetElementById("lblMsg")lblMsginnerText="Employeeaddedsuccessfully!"}else{varlblMsg=documentgetElementById("lblMsg")lblMsginnerText="Erroroccurredwhileaddingnewemployee!"}}functionUpdateEmployee(result){if(result>){varlblMsg=documentgetElementById("lblMsg")lblMsginnerText="Employeeupdatedsuccessfully!"}else{varlblMsg=documentgetElementById("lblMsg")lblMsginnerText="Erroroccurredwhileupdatingtheemployee!"}}functionDeleteEmployee(result){if(result>){varlblMsg=documentgetElementById("lblMsg")lblMsginnerText="Employeedeletedsuccessfully!"}else{varlblMsg=documentgetElementById("lblMsg")lblMsginnerText="Erroroccurredwhiledeletingemployee!"}}FillEmployeeList()函数以Employee对象数组作为输入参数还记得GetEmployees()webmethod返回的Employee对象数组吧。然后对这个数组迭代处理在每次迭代中一个新的OPTION元素被创建并添加到下拉框中。DisplayEmployeeDetails()函数以一个Employee对象作为输入这个Employee对象包括了一个Employee的详细信息并显示在个文本框中。InsertEmployee(),UpdateEmployee()和DeleteEmployee()函数以一个整型的数值标明INSERT,UPDATE和DELETE操作所影响的记录数一个大于的数值标明操作成功并在<SPAN>标记内显示一个成功的信息否则显示一个错误信息。当页面第一次加载时需要用现有的employeeID给下拉框赋值这得通过调用一个特定的名为pageLoad()的函数中实现:functionpageLoad(){CallWebMethod("select")}pageLoad()函数在客户端浏览器页面加载时自动调用最后错误处理(errorhandler)和超时处理(timeouthandler)函数如下:functionErrorHandler(result){varmsg=resultgetexceptionType()"rn"msg=resultgetmessage()"rn"msg=resultgetstackTrace()alert(msg)}functionTimeOutHandler(result){alert("Timeout:"result)}TimeOutHandler()函数在任何webmethod调用发生超时的情况下调用。它仅仅显示了一个Alert给用户。ErrorHandler()函数在有错误发生的情况下调用其输入result参数提供了个方法:getexceptionType()、getmessage()以及getstackTrace()。这三个方法分别返回异常类型(typeofexception)、详细错误信息和堆栈跟踪(stacktrace)。这里ErrorHandler()函数也仅仅显示了一个alert给终端用户。测试网页现在我们已经实现了webservice和客户端应用程序。测试一下吧!运行网页试着增加、更新、删除一个employee看看图显示更新一个employee后的效果:图:更新Employee后的页面效果要想测试错误处理函数把初始化数据库链接字符串改成一个空值然后运行网页看看这次就会显示一个警报(alert)如图:图:链接字符串错误报警调用外部WebServices这个例子中EmployeeService也是Web站点的一部分。有时候我们的程序也许需要调用根本就没有部署在我们的域的webservices。ASPNETAJAX内部需要依赖XMLHTTP对象而由于安全原因是不能和部署在其它外部站点进行通信的。这就意味着上面所说的技术对外部的webservices调用无效。不幸的是ASPNETAJAX关于此问题还没有直接的解决方案(至少在RC版本)。然而微软发布了一个仍在CTP阶段的“Bridge”技术我们可以使用此技术来调用一个部署在本地的封装(Wrapper)的类然后在这个类中来调用外部的实际的WebService。在当前的RC版本中我们可以在我们的WebSite中创建一个WrapperWebService以它来调用最初的WebService。然后在客户端程序中通过调用WrapperWebService实现通信。下面显示必要的步骤:在web站点中添加一个web引用指向外部的Webservice创建一个本地Webservice在新创建的Webservice中提供封装的webmethod这些方法调用外部的WebMethod用本文中所说的方法在客户端应用程序中调用本地新添加的webService。调用ASPNETWebServices的基础架构ASPNETAJAX提供了完整的架构以从客户端JavaScript调用ASPNETwebservices。我们可以轻松地用AJAX把服务器端数据集成进用户响应的Web页面中。而我们所需要做的就是仅仅用ScriptService属性来标识webService。ASPNETAJAX框架会为我们的webservice自动生成JavaScript代理然后通过使用代理来调用webmethods。

职业精品

精彩专题

上传我的资料

热门资料

资料评价:

/ 15
所需积分:0 立即下载

意见
反馈

返回
顶部

Q