在 Web 服务中捕获鼠标移动

• 下载 CaptureMouseMovement - 6.06 KB

引言

使用 AJAX 通过 Web 服务捕获鼠标移动。Web 服务的优势在于，你可以通过 JavaScript 函数调用 Web 服务，并与数据库进行交互。这里我开发了一个简单的网页，其中包含一个位于 div 标签内的图像。当你移动这个图像时，最新的位置会被 Web 服务捕获，信息会被存储到数据库中，而无需页面加载。

使用代码

Web 服务 (Service_Position.asmx)
在 VS 2005 中创建一个启用 AJAX 的网站。创建一个名为 'Service_Position.asmx' 的 Web 服务。将 System.Web.Script.Services.ScriptService 特性添加到服务类。此特性允许从 ASP.NET AJAX 客户端代码访问 Web 服务。在 'StorePos1' 函数中，我传递了 2 个参数 x 和 y。

//
// Service_Position.asmx
//
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<System.Web.Script.Services.ScriptService()> _
Public Class Service_Position
Inherits System.Web.Services.WebService
<WebMethod(EnableSession:=True)> _
Public Function StorePos1(ByVal x, ByVal y) As String
Dim posX As String
Dim posY As String
posX = x
posY = y
'StoreinDB(x, y)
Return "1"
End Function
End Class
		

创建一个名为 'Default.aspx' 的文件。创建一个 div 控件和一个图像控件。

<div id="lay1" runat="server" class="displayretainer" style=" left: 270px; width: auto; text-indent: 15px; position: absolute; top: 158px; height: auto; text-align: center; cursor:move;" onMouseDown="Move(this,'Img1')">
<asp:Image ID="Img1" ImageUrl="smiley1_tn.gif" runat="server" /> 
</div>

在 mousedown 事件中，我们获取 x 和 y 位置，并将其发送到 Web 服务。

Service_Position.StorePos1(x1,y1); 

在脚本管理器中，我们需要引用 Web 服务文件。

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/Service_Position.asmx" />
</Services>
</asp:ScriptManager>

完成了。现在在屏幕上移动图像对象，并检查你的数据库，看看它是如何被捕获的。

关注点

我正在我的新项目在线 T 恤设计师中使用这个概念。这是一个简单而有用的想法。

历史

N/A