logo

JavaScript 调用 ASP.NET 服务器端方法的最简单的方法

作者:孟宪会 阅读:2601 发表于:2011-02-19 08:59:33

对于这样的问题,有很多解决方法,如果你返回的内容是简单的内容,如注册用户时候的验证信息,只需返回存在与否,那么可以采用下面最最简单的代码实现:

C# 代码
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  
//测试方法1
  public String GetSimpleMethod(String inputData)
  {
    
//业务处理。
    return "你输入的值:" + inputData;
  }

  
protected void Page_Load(object sender, EventArgs e)
  {
    
if (Request.QueryString["input"] != null)
    {
      Response.ClearContent();
      Response.Write(GetSimpleMethod(Request.QueryString[
"input"]));
      Response.End();
    }
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  
<title></title>
  
<script type="text/javascript">
    var textBox1
= "<%=TextBox1.ClientID %>";
    function GetData() {
      var t
= document.getElementById(textBox1);
      var h
= window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP");
      h.open(
"GET", "<%=Request.FilePath %>?input=" + encodeURIComponent(t.value) + "&" + Date.parse(new Date()), true);
      h.setRequestHeader(
"Connection", "close");
      h.onreadystatechange
= function() {
        
if (h.readyState == 4) {
          
if (h.status == 200) {
            document.getElementById(
"info").innerHTML = h.responseText;
          }
        }
      }
      h.send(
null);
    }    
  
</script>
</head>
<body>
  
<form id="form1" runat="server">
  
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  
<asp:Button ID="Button1" runat="server" Text="调用服务器方法 GetSimpleMethod" OnClientClick="GetData();return false;" />
  
<div id="info"></div>
  
</form>
</body>
</html>

对于需要返回复杂的对象,则需要对对象进行序列化等的处理,可以采取下面的简单方法。使用这个方法需要注意以下3点:
1,后台方法必须标记为 [System.Web.Services.WebMethod] 属性;
2,后台方法必须是 static 类型的静态方法;
3,ScriptManager 必须设置 EnablePageMethods="true"。

ASPX 代码
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>

<script runat="server">
  
//测试方法1
  [System.Web.Services.WebMethod]
  public static String GetSimpleMethod(String inputData)
  {
    
return "你输入的值:" + inputData;
  }

  
//测试方法2
  [System.Web.Services.WebMethod]
  public static System.Collections.Generic.List
<BlogUser> GetListObjectMethod(int inputData)
  {
    System.Collections.Generic.List
<BlogUser> ulist = new System.Collections.Generic.List<BlogUser>();
    System.Random r
= new Random();
    
for (int i = 0; i < 6; i++)
    {
      BlogUser u
= new BlogUser();
      u.UserName
= "孟宪会" + inputData.ToString();
      u.Score
= r.Next(0, 100);
      ulist.Add(u);
    }
    
return ulist;
  }

  
//用于返回的测试类。
  public class BlogUser
  {
    public String UserName { set; get; }
    public Int32 Score { set; get; }
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  
<title></title>
  
<script type="text/javascript">
    
var textBox1 = "<%=TextBox1.ClientID %>";
    
function GetData1() {
      PageMethods.GetSimpleMethod(document.getElementById(textBox1).value, OnSucceeded1, OnFailed);
    }

    
function GetData2() {
      PageMethods.GetListObjectMethod(document.getElementById(textBox1).value, OnSucceeded2, OnFailed);
    }

    
function OnSucceeded1(result, userContext, methodName) {
      alert(result)
    }
    
function OnSucceeded2(result, userContext, methodName) {
      alert(result)
      
var html = "<table border=1>";
      
for (var i = 0; i < result.length; i++) {
        html
+= "<tr>";
        html
+= "<td>" + result[i].UserName + "</td><td>" + result[i].Score + "</td>";
        html
+= "</tr>";
      }
      html
+= "</table>";
      document.getElementById(
"info").innerHTML = html;

    }

    
function OnFailed(error, userContext, methodName) {
      
if (error !== null) {
        alert(
"调用方法错误:\r\n " + error.get_message());
      }
    }
  
</script>

</head>
<body>
  
<form id="form1" runat="server">
  
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
  
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  
<asp:Button ID="Button1" runat="server" Text="调用服务器方法 GetSimpleMethod" OnClientClick="GetData1();return false;" />
  
<asp:Button ID="Button2" runat="server" Text="调用服务器方法 GetListObjectMethod" OnClientClick="GetData2();return false;" />
  
<div id="info"></div>
  
</form>
</body>
</html>