web-dev-qa-db-ja.com

JQuery asp.net ajax経由のボタンクリックイベント

誰かが私を正しい方向に向けることができるかどうか疑問に思っていました。クリックイベントのあるasp.netボタンがあります（サーバー側のコードを実行します）。私がやりたいのは、ajaxとjqueryを介してこのイベントを呼び出すことです。これを行う方法はありますか？もしそうなら、私はいくつかの例が大好きです。

前もって感謝します

jqueryasp.netajaxevents
33
zSynopsis

これは、jQueryがASP.Net開発者にとって本当に輝くところです。あなたがこれを持っているとしましょうASPボタン：

それがレンダリングされると、ページのソースを見ることができ、そのIDはbtnAwesomeではなく、$ ctr001_btnAwesomeまたはそのようなものになります。これにより、javascriptで見つけるのが大変になります。 jQueryを入力します。

 $（document）.ready（function（）{
 $（ "input [id $ = 'btnAwesome']"）。click（function（）{
 //実行クライアント側のボタンはこちらをクリックします。
}）; 
}）;

Id $ =は、btnAwesomeでID ENDINGの正規表現一致を実行しています。

編集：

クライアント側のボタンクリックイベントからajax呼び出しを呼び出したいですか？何に電話したいですか？ jQueryを使用してメソッドの背後にあるASP.Netコードへのajax呼び出しを行うことに関して、本当に良い記事がたくさんあります。

その要点は、WebMethod属性でマークされたstaticメソッドを作成することです。その後、$。ajaxを使用してjQueryを使用して呼び出しを行うことができます。

 $。ajax（{
タイプ： "POST"、
 url： "PageName.aspx/MethodName"、
 data： "{}"、
 contentType： "application/json; charset = utf-8"、
 dataType： "json"、
 success：function（msg）{
 //何か面白いことをするここに。
  }
}）;

WebMethodのことを以下から学びました： http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

本当に良いASP.Net/jQueryがたくさんあります。 .Net 3.5（おそらく3.0以降）のリターンでmsg.dを使用する必要がある理由について必ず読んでください。

64
Gromer

Gromerの答えは気に入っていますが、疑問が残ります。異なるコントロールに複数の 'btnAwesome'がある場合はどうすればよいですか？

その可能性に応えるために、私は次のことをします。

$(document).ready(function() {
  $('#<%=myButton.ClientID %>').click(function() {
    // Do client side button click stuff here.
  });
});

それは正規表現の一致ではありませんが、私の意見では、正規表現の一致はここで必要なものではありません。特定のボタンを参照している場合、このような正確なテキスト一致が必要です。

ただし、すべてのbtnAwesomeに対して同じアクションを実行する場合は、Gromerの答えに進みます。

13
Lucas Wilson-Richter

ASP.NET Webフォームページには、「__ doPostBack」と呼ばれるPostBackを処理するJavaScriptメソッドが既にあります。

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}

コードファイルで次を使用して、PostBackを実行するJavaScriptを生成します。このメソッドを使用すると、コントロールの適切なClientIDが使用されます。

protected string GetLoginPostBack()
{
    return Page.ClientScript.GetPostBackEventReference(btnLogin, string.Empty);
}

次に、ASPXページでjavascriptブロックを追加します。

<script language="javascript">
function btnLogin_Click() {
  <%= GetLoginPostBack() %>;
}
</script>

最終的なjavascriptはこのようにレンダリングされます。

<script language="javascript">
function btnLogin_Click() {
  __doPostBack('btnLogin','');
}
</script>

これで、JavaScriptから「btnLogin_Click（）」を使用して、ボタンクリックをサーバーに送信できます。

10
jacksonakj

クライアント側でボタンのクリックイベントを処理し、ClientIDプロパティを使用してボタンのIDを取得します。

$(document).ready(function() {
$("#<%=myButton.ClientID %>,#<%=muSecondButton.ClientID%>").click(

    function() {
     $.get("/myPage.aspx",{id:$(this).attr('id')},function(data) {
       // do something with the data
     return false;
     }
    });
 });

サーバーのページで：

protected void Page_Load(object sender,EventArgs e) {
 // check if it is an ajax request
 if (Request.Headers["X-Requested-With"] == "XMLHttpRequest") {
  if (Request.QueryString["id"]==myButton.ClientID) {
    // call the click event handler of the myButton here
    Response.End();
  }
  if (Request.QueryString["id"]==mySecondButton.ClientID) {
    // call the click event handler of the mySecondButton here
    Response.End();
  }
 }
}
4
user434917

私はこれをやりたいと思ったので、上記の答えを確認し、それらのハイブリッドアプローチを行いました。それは少しトリッキーになりましたが、ここに私がやったことです：

私のボタンはすでにサーバー側の投稿で機能していました。私はそれが機能し続けるようにしたかったので、「OnClick」はそのままにしておきましたが、OnClientClickを追加しました。

OnClientClick="if (!OnClick_Submit()) return false;"

重要な場合の完全なボタン要素は次のとおりです。

<asp:Button UseSubmitBehavior="false" runat="server" Class="ms-ButtonHeightWidth jiveSiteSettingsSubmit" OnClientClick="if (!OnClick_Submit()) return false;" OnClick="BtnSave_Click" Text="<%$Resources:wss,multipages_okbutton_text%>" id="BtnOK" accesskey="<%$Resources:wss,okbutton_accesskey%>" Enabled="true"/>

実行時にHTMLボタンのonclick属性を調べると、実際には次のようになります。

if (!OnClick_Submit()) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$PlaceHolderMain$ctl03$RptControls$BtnOK", "", true, "", "", false, true))

次に、JavascriptにOnClick_Submitメソッドを追加しました。私の場合、ユーザーにダイアログを表示する必要があるかどうかを確認する必要がありました。ダイアログを表示すると、falseが返され、イベントの処理が停止します。ダイアログを表示しない場合は、trueを返し、イベントの処理を続行し、ポストバックロジックを従来どおりに実行します。

function OnClick_Submit() {
    var initiallyActive = initialState.socialized && initialState.activityEnabled;
    var socialized = IsSocialized();
    var enabled = ActivityStreamsEnabled();

    var displayDialog;

    // Omitted the setting of displayDialog for clarity

    if (displayDialog) {
        $("#myDialog").dialog('open');
        return false;
    }
    else {
        return true;
    }
}

次に、ダイアログが受け入れられたときに実行されるJavascriptコードで、ユーザーがダイアログをどのように操作したかに応じて、次のことを行います。

$("#myDialog").dialog('close');
__doPostBack('message', '');

上記の「メッセージ」は、実際に送信するメッセージによって異なります。

しかし、待ってください、まだあります！

サーバー側のコードに戻り、OnLoadを以下から変更しました。

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e)
    if (IsPostBack)
    {
        return;
    }

    // OnLoad logic removed for clarity
}

に：

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e)
    if (IsPostBack)
    {
        switch (Request.Form["__EVENTTARGET"])
        {
            case "message1":
                // We did a __doPostBack with the "message1" command provided
                Page.Validate();
                BtnSave_Click(this, new CommandEventArgs("message1", null));
                break;

            case "message2":
                // We did a __doPostBack with the "message2" command provided
                Page.Validate();
                BtnSave_Click(this, new CommandEventArgs("message2", null));
                break;
            }
            return;
    }

    // OnLoad logic removed for clarity
}

次に、BtnSave_Clickメソッドで次のことを行います。

CommandEventArgs commandEventArgs = e as CommandEventArgs;
string message = (commandEventArgs == null) ? null : commandEventArgs.CommandName;

最後に、メッセージがあるかどうか、およびそのメッセージの値に基づいてロジックを提供できます。

3
Kirk Liemohn