现在的位置: 主页 > 商讯 > 文章列表

ASP.NET之Ajax系列(一)

作者:上海瑞梁浩行投资咨询有限公司 来源:www.60899055.com 发布时间:2017-09-03 12:19:42
 

ASP.NET之Ajax系列(一) 我们在Web开发中经常会接触到Ajax技术,同时Ajax技术也有很多种实现方式,那么,我们今天从第一种方式说起:ASP.NET原生控件实现Ajax。

  ASP.NET原生控件用于Ajax技术的主要是UpdatePanel和ScriptManager,站群,前者顾名思义,是一个可以用于盛放内容的容器,用于实现页面的局部更新,在使用的时候直接将需要更新的内容放入即可。后者用于调用一些服务和脚本:例如我们本次Demo中使用JavaScript调用WebService服务。

  本次Demo主要包含一个页面,一个Web服务(WebService)和一个数据通用操作类(userHelper)来实现页面无刷新检测注册时昵称是否存在的功能。

  首先,我们需要建立一个Web页面(此处选用WebForm),大致代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!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>注册</title>

<script type="text/javascript">

function check() {

var Name = document.getElementById("txtName").value;

if (Name == "") {

alert("昵称不能为空!");

}

else {

WebApplication1.WebService1.CheckName(Name, callbackCheck);

function callbackCheck(result) {

if (result == false) {

document.getElementById("checkFont").innerHTML = "<span>该昵称已存在!请重新输入!</span>";

}

else {

document.getElementById("checkFont").innerHTML = "<span>恭喜!该昵称可以使用!</span>";

}

}

}

}

</script>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server" ID="scriptManager">

<Services>

<asp:ServiceReference Path="~/WebService1.asmx" />

</Services>

</asp:ScriptManager>

<asp:UpdatePanel ID="Upnl" runat="server" UpdateMode="Always">

<ContentTemplate>

<div>

昵称:<asp:TextBox ID="txtName" runat="server"></asp:TextBox><div id="checkFont">

</div>

</div>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="btnCheck" />

<asp:PostBackTrigger ControlID="btnReFresh" />

</Triggers>

</asp:UpdatePanel>

<asp:Button ID="btnCheck" runat="server" OnClientClick="check();" Text="检测昵称" />

<asp:Button ID="btnReFresh" runat="server" Text="刷新页面" />

</form>

</body>

</html>

  我在这个页面中放入了一个ScriptManager,同时引用了一个WebService,然后将需要更新的部分放入了UpdatePanel。此外还有两个Button,第一个用于检测昵称,第二个用于刷新页面。大家看过代码之后会发现我在UpdatePanel设置时加入了一个Triggers,那么这个是干什么的呢?获取或设置触发对 UpdatePanel 控件进行更新的回发控件事件。可以看到,我将检测昵称的Button设置为AsyncPostBackTrigger模式,此为点击按钮时不刷新整个页面,只刷新UpdatePanel中的内容,而第二个按钮设为PostBackTrigger模式,则会刷新整个页面。

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网络营销 http://www.feimao666.com

  • 上一篇:飘逸的python - 偏函数functools.partial
  • 下一篇:最后一页
  •