6

ボタンクリックでメソッドを呼び出そうとしjQueryています.これは私がこれまでに持っているものです:

$("a.AddToCart").click(function () {
            var link = document.URL;

            $.ajax({
                 type:"POST",
                 url: "/Account/AddToCartHack",
                 data: {url : link},
                 contentType: "application/json; charset=utf-8",
                 dataType: "json"
            });
        });


[WebMethod]
    public void AddToCartHack(string url)
    {
        GeneralHelperClass.URL = url;
    }

ここでやろうとしているのは、class add to cart のリンクをクリックしたときに、メソッドを呼び出しAddToCartHackて、現在の URL をパラメーターとして渡したいということです。呼び出されていないように見えるので、何か間違ったことをしているに違いありませんAddToCartHack。

私は何を間違っていますか？

4

5 に答える 5

26

コードには非常に多くの問題があり、どこから始めればよいかわかりません。それでは、インタラクティブなリファクタリング セッションを実施しましょう (私のコメントは気にせず、最終的な推奨ソリューションを見たいだけの場合は、回答の最後までスクロールしてください)。

最初:イベント ハンドラーfalseから戻って、アンカーの既定のアクションをキャンセルしていないようです。.click()これを行わないことで、実際にはブラウザーにアンカーのデフォルト アクションを実行させたままにします (これは、アンカーについてご存知のように、href 属性が指している URL にリダイレクトすることです。この結果として、AJAX 呼び出しには決してブラウザーが既にページを離れており、これ以上スクリプトが実行されていないため)。したがって、ハンドラーから false を返して、AJAX スクリプトを実行し、同じページにとどまる可能性を与えます。

$("a.AddToCart").click(function () {
    var link = document.URL;

    $.ajax({
        type:"POST",
        url: "/Account/AddToCartHack",
        data: {url : link},
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });

    return false;
});

2 番目:contentType: 'application/json'要求ヘッダーを指定しましたが、JSON をまったく送信していません。application/x-www-form-urlencodedjQuery のデフォルトであるリクエストを送信しています。したがって、あなたの場合、この無意味なパラメーターを取り除きます。

$("a.AddToCart").click(function () {
    var link = document.URL;

    $.ajax({
        type:"POST",
        url: "/Account/AddToCartHack",
        data: {url : link},
        dataType: "json"
    });

    return false;
});

3 番目: サーバー側のコードが JSON ( dataType: 'json') を返すように指定しましたが、サーバー側のコードは何も返しません。空メソッドです。ASP.NET MVC では、C# メソッドと呼ばれるものに名前があります。これはコントローラー アクションと呼ばれます。また、ASP.NET MVC コントローラー アクションでは、void ではなく ActionResults が返されます。したがって、コントローラのアクションを修正してください。また、[WebMethod]属性を削除します。これは、ASP.NET MVC では使用されなくなりました。

public class AccountController: Controller
{
    public ActionResult AddToCartHack(string url)
    {
        GeneralHelperClass.URL = url;
        return Json(new { success = true });
    }
}

4 番目: サーバー側のヘルパーを使用してこの URL を生成する代わりに、JavaScript でコントローラー アクションに URL をハードコードしました。これの問題は、アプリケーションを IIS の仮想ディレクトリに配置すると、コードが壊れてしまうことです。それだけでなく、Global.asax でルートのパターンを変更することにした場合は、URL が ではなくなるため、すべてのスクリプトを変更する必要があります{controller}/{action}。この問題を解決するためにお勧めするアプローチは、目立たない AJAX を使用することです。したがって、HTML ヘルパーを使用してアンカーを生成するだけです。

@Html.ActionLink(
    "Add to cart", 
    "AddToCartHack", 
    "Account", 
    null, 
    new { @class = "AddToCart" }
)

次に、目立たないようにこのアンカーを AJAX 化します。

$('a.AddToCart').click(function () {
    var link = document.URL;

    $.ajax({
        type: 'POST',
        url: this.href,
        data: { url : link }
    });

    return false;
});

5番目：ハンドラーdocument.URL内で変数を使用しているようです。.click()他の場所で定義されているはずのグローバル javascript 変数のようです。残念ながら、この変数が定義されているコードの部分も、それが使用される理由も示していないため、これを行うためのより良い方法を実際に提案することはできませんが、何か問題があると感じています. それとも、これは現在のブラウザの URL であるはずですか? そのため、プロパティを使用する必要がありwindow.location.hrefます。そのように：

$('a.AddToCart').click(function () {
    $.ajax({
        type: 'POST',
        url: this.href,
        data: { url : window.location.href }
    });

    return false;
});

またはさらに良いことに、それを元のアンカーの一部にします (最終的で推奨される解決策):

@Html.ActionLink(
    "Add to cart", 
    "AddToCartHack", 
    "Account", 
    new { url = Request.RawUrl }, 
    new { @class = "AddToCart" }
)

そして簡単に：

$('a.AddToCart').click(function () {
    $.ajax({
        type: 'POST',
        url: this.href
    });

    return false;
});

今では、最初に持っていたものと比べてはるかに優れています. ページで JavaScript を無効にしても、アプリケーションが動作するようになりました。

于 2012-12-30T13:52:18.210 に答える
0

これが Asp.Net Web フォームの場合は、webmethod を静的にする必要があります。そうしないと、JavaScript を介してメソッドにアクセスできなくなります。

于 2012-12-31T08:54:44.740 に答える
0 
$(document).ready(function () {

    $.ajax({

        url: "Testajax.aspx/GetDate",
        data: "f=GetDate",
        cache: false,
        success: function (content) {
            $('#tableData').append('My Dear Friend');
            alert(content);

        },
        failure: function (response) {
            alert("no data found");
        }


    });
});

于 2013-02-27T18:22:13.227 に答える
0

あなたのajax機能をチェックするために成功とエラー関数を追加してください

       ...


       $.ajax({
                 type:"POST",
                 url: "/Account/AddToCartHack",
                 data: {url : link},
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
               success: function(){
                 alert('success');
                },
              error:function(){ 
                  alert('error');
                }
            });
        ....
于 2012-12-31T07:19:26.800 に答える
0

以下に示すように、スクリプトメソッドをこのように配置します

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
于 2012-12-30T17:35:35.477 に答える