ASP.NET之Ajax系列（一）
asp.net原生控件用于ajax技术的主要是updatepanel和scriptmanager，前者顾名思义，是一个可以用于盛放内容的容器，用于实现页面的局部更新，在使用的时候直接将需要更新的内容放入即可。后者用于调用一些服务和脚本：例如我们本次demo中使用javascript调用webservice服务。
本次demo主要包含一个页面，一个web服务（webservice）和一个数据通用操作类（userhelper）来实现页面无刷新检测注册时昵称是否存在的功能。
首先，我们需要建立一个web页面（此处选用webform），大致代码如下：
<%@ page language="c#" autoeventwireup="true" codebehind="webform2.x.cs" inherits="webapplication1.webform2" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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>
<p>
昵称：<asp:textbox id="txtname" runat="server"></asp:textbox><p id="checkfont">
</p>
</p>
</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模式，则会刷新整个页面。
在第一个检测昵称的按钮点击时会调用一个js方法：check()，在check()函数中，我们首先去获取textbox中用户输入的名称，然后将名称传入js调用的webservice方法中进行操作，得到结果后再根据结果去设置p要显示的内容，如果存在则返回值为false。这里有一个js回调函数的概念：回调函数用于在异步操作中扩展第一个函数的功能，我们此处是为了在返回结果之后设置p的innerhtml的值。如果不使用回调函数而直接使用同步的话，可能会不执行函数的内容。
接下来是webservice，在建立webservice时，需要注意将[system.web.script.services.scriptservice]这行代码的注释取消掉，vs2010中建立后会提示使用asp.net
ajax从脚本中调用此web服务时就需要这样，否则会调用不到该方法。webservice中代码如下：
复制代码
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.services;
namespace webapplication1
{
/// <summary>
/// webservice1 的摘要说明
/// </summary>
[webservice(namespace = "https://tempuri.org/")]
[webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]
[system.componentmodel.toolboxitem(false)]
// 若要允许使用 asp.net ajax 从脚本中调用此 web 服务，请取消对下行的注释。
[system.web.script.services.scriptservice]
public class webservice1 : system.web.services.webservice
{
[webmethod]
public string helloworld()
{
return "hello world";
}
[webmethod]
public bool checkname(string name)
{
return userhelper.checkname(name);
}
}
}
复制代码
我们此处调用的checkname方法，源自于数据通用类中的checkname方法，userhelper中实现方法代码如下：
复制代码
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.data;
using system.data.sqlclient;
namespace webapplication1
{
public class userhelper
{
public static bool checkname(string name)
{
string con = @"data source=205zhangxk\sqlexpress;initial catalog=myqq;connect timeout=30;trusted_connection=true";
using (sqlconnection sqlcon = new sqlconnection(con))
{
string sql = "select count(*) from users where nickname='" + name + "'";
sqlcon.open();
sqlcommand cmd = sqlcon.createcommand();
cmd.commandtext = sql;
int res = int.parse(cmd.executescalar().tostring());
if (res == 1)
{
return false;
}
else
{
return true;
}
}
}
}
}
推荐阅读
-
Asp.Net生命周期系列一
-
ASP.NET MVC IOC依赖注入之Autofac系列（一）
-
spring-boot-2.0.3不一样系列之番外篇 - 自定义session管理，绝对有值得你看的地方
-
Asp.net自定义控件系列（一）
-
python微信跳一跳系列之自动计算跳一跳距离
-
《ASP.NET Core In Action》读书笔记系列一 ASP.NET Core 的诞生
-
服务注册中心之ZooKeeper系列(一)
-
容器之beanfactory抽丝剥茧系列一
-
asp.net core 系列之允许跨域访问2之测试跨域(Enable Cross-Origin Requests:CORS)
-
详解ASP.NET Core 之 Identity 入门（一）