ページを通常のポストバックからAJAX呼び出しに変換する過程で(JavaScriptを使用してUIを完全にロード/制御し、ASP.Netを厳密にバックエンドとして使用する)、GridViewをAJAXソースのデータセットに置き換えたいと思いました。
私は現在、DataTablesを使用してGridViewをきれいにしていますが、APIには、AJAXを使用してテーブルのデータをリモートで調達するオプションがあります。APIにはJSONオブジェクトを返す必要がありますがfnServerData
、XML応答を必要なJSONデータソースに変換できるオプションのコールバックを提供できるようです。
「だから」、「<WebMethod()>
データソースを返すために一緒に叩いたほうがいい」と思いまし<WebMethod()>
た。過去にいくつかの関数を作成しましたが、常に新しいASMXファイルを追加しました(カスタムクラスを使用してそれを駆動する)またはそうすることが理にかなっている既存のものを拡張した。<WebMethod()>
この特定のページでは、ページのコンテキスト外でこのテーブルのデータソースにアクセスできるようにする必要がないため、ASPXページのコードビハインドにを追加してみようと思いました。
プログラマーのウェブ上には、私が髪を引っ張ってきたものをうまく引っ張っている例がいくつかあるようです。
私は見つけることができるすべての例に従いましたが、どれも私のために働いていません。誰かが私が間違っているところを指摘するか、ASP.Net 2.0がこのように機能しないことを確認できることを期待して、非常に簡単な例をまとめました。
ASPマークアップ:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="AJAXText.aspx.vb" Inherits="_AJAXText" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
<script type="text/javascript" src='<%=Helpers.ToAbsoluteURL("~/_cs/js/jquery-1.6.4.min.js") %>'></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: window.location.href + "/Hello",
data: {
"What": "World"
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, textStatus, jqXHR) {
$('div').text(textStatus);
},
complete: function (jqXHR, textStatus) {
$('div').text(textStatus);
},
error: function (jqXHR, textStatus, errorThrown) {
$('div').text(textStatus);
}
});
});
</script>
</body>
</html>
コードビハインド:
Imports System.Web.Services
Partial Class _AJAXText
Inherits System.Web.UI.Page
<WebMethod()> _
Public Shared Function Hello(ByVal What As String) As String
Dim msg As String = "Hello, " & What & "!"
Return msg
End Function
End Class
私は上記にいくつかの小さな変更を試みましたが、いずれの場合もAJAX呼び出しは次を返します。
<!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>
<title>Untitled Page</title>
</head>
<body>
<form name="form1" method="post" action="AJAXText.aspx?What=World%2fHello"
id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJOTU4MjMyMzI1ZGQT/2jrJ+cI2ERazl2Hw7l7TI5XiA==" />
</div>
<div></div>
</form>
<script type="text/javascript" src='http://localhost:3719/Maggie/_cs/js/jquery-1.6.4.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: window.location.href + "/Hello",
data: {
"What": "World"
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, textStatus, jqXHR) {
$('div').text(textStatus);
},
complete: function (jqXHR, textStatus) {
$('div').text(textStatus);
},
error: function (jqXHR, textStatus, errorThrown) {
$('div').text(textStatus);
}
});
});
</script>
</body>
</html>
私が返されることを期待しているのは:
<?xml version="1.0" encoding="utf-8"?>
<string>Hello, World!</string>
誰かが何かアイデアを持っていますか:
- 私が間違っていることは何ですか?
- または、ASP.Net 2.0は
<WebMethod()>
ASPXページでを使用できませんか?