从客户端脚本调用服务器端函数

引言

本文介绍如何从客户端代码（即使用jQuery）调用代码后置文件函数，即服务器端编写的函数。最近，我在项目中遇到了一个需求，需要检查ApplicationCode，即用户输入的值，是否已存在于数据库中，即唯一值。如果记录存在，则输出如下所示的错误“记录存在”，否则不显示任何记录。

现在，在下面的文章中，我将讨论需要哪些先决条件以及为什么要使用它们。

服务器代码

以下方法从客户端脚本调用，正如你所看到的，方法属性、声明和定义有一些变化，我将在下面讨论。

[WebMethod]
    public static string IsExists(string value)
    {
        //code to check uniqe value call to database to check this
        return "True";
    }

WebMethod 属性

附加到 Public 方法的 WebMethod 属性指示该方法作为 XML Web 服务的一部分公开。该属性告诉 .NET 特定的公共方法作为 Web 可调用方法公开。 要使用此属性，你需要使用 *System.Web.Services* 你可以在以下位置阅读有关此属性的信息：WebMethodAttribute 类

静态方法 

静态方法与类的实例无关，仅通过 classname.methodname() 调用，即无需创建实例。 所以这就是我将方法标记为静态的原因。 它无法与 Page 类及其任何控件的实例属性和方法进行交互，因为页面方法调用不会创建 Page 或其任何控件的实例。 页面方法大致相当于独立 Web 服务的简写。

.CS 文件

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;//needed for the webmethod attribute
public

partial class _Default : System.Web.UI.Page
{
     protected void Page_Load(object sender, EventArgs e)
     {
          if (!IsPostBack)
               txtData.Attributes.Add("onblur", "focuslost()");
     }

     [WebMethod]
     public static string IsExists(string value)
     {
          return "True";
     }
}

在上面的代码中，我使用 *onblur* 注册了客户端事件，并附加了函数 *focuslost*。

.ASPX 页面上的客户端代码 jQuery .ajax() 调用

要从客户端代码调用该方法，我使用了 jQuery 函数 ajax。要了解有关此函数的更多详细信息，你可以阅读我的博客文章：Jquery Ajax 调用函数

function IsExists(pagePath, dataString, textboxid, errorlableid) {
 
$.ajax({
     type:"POST",
     url: pagePath,
     data: dataString,
     contentType:"application/json; charset=utf-8",
     dataType:"json",
     error:
          function(XMLHttpRequest, textStatus, errorThrown) {
               $(errorlableid).show();
               $(errorlableid).html("Error");
          },
     success:
          function(result) {
               var flg = true;
               if (result != null) {
                    flg = result.d;
                    if (flg == "True") {
                         $(errorlableid).show();
                    }
                    else {
                         $(errorlableid).hide();
                    }
          }
     }
    });
}

在客户端脚本中 

由于我必须检查代码是否存在，因此我将 focusout() 事件附加到我的文本框控件，因此当焦点丢失时，它会对代码后置文件的 TextChanged 事件进行 ajax 调用。

url - 包含从客户端代码（即从 asppage）调用的页面的路径。

data - 从客户端发送到服务器的数据，基本上是 json 字符串。contentType - 发送到服务器的内容类型。

dataType - 来自服务器的预期数据格式

error - 当对服务器方法的调用失败时调用

success - 当对服务器方法的调用成功时调用，并且可以在此方法中处理来自被调用方法的返回数据。

.Aspx 页面代码

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

<title></title>
<script src="JavaScript/jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
function IsExists(pagePath, dataString, textboxid, errorlableid) {
 
$.ajax({
     type:"POST",
     url: pagePath,
     data: dataString,
     contentType:"application/json; charset=utf-8",
     dataType:"json",
     error:
          function(XMLHttpRequest, textStatus, errorThrown) {
               $(errorlableid).show();
               $(errorlableid).html("Error");
          },
     success:
          function(result) {
               var flg = true;
               if (result != null) {
                    flg = result.d;
                    if (flg == "True") {
                         $(errorlableid).show();
                    }
                    else {
                         $(errorlableid).hide();
                    }
          }
     }
    });
}
function focuslost() {
     var pagePath = window.location.pathname + "/IsExists";
     var dataString = "{ 'value':'" + $("#<%= txtData.ClientID%>").val() + "' }";
     var textboxid = "#<%= txtData.ClientID%>";
     var errorlableid = "#<%= lblError.ClientID%>";
     IsExists(pagePath, dataString, textboxid, errorlableid);
}
</script>


     
          <form id="form1" runat="server">
<asp:label text="Enter unique value : " runat="server" id="lbl" />                                         
               <asp:textbox runat="server" id="txtData" />
               

<div style="display: none;"  runat="server" id="lblError">
Record exsits</div>
</form>

正如上面的代码中，focuslost 函数调用 IsExists 函数，该函数又调用服务器端函数并通知输入的值是否唯一。