Jquery asp.net событие нажатия кнопки через ajax

Question

Мне было интересно, если кто-нибудь может указать мне в правильном направлении. У меня есть кнопка asp.net с событием щелчка (который запускает некоторый код на стороне сервера). То, что я хотел бы сделать, это назвать это событие через ajax и jquery. Есть какой-либо способ сделать это? Если это так, я хотел бы несколько примеров.

Заранее спасибо

Answer 1

Это то, где jQuery действительно сияет для разработчиков ASP.Net. Допустим, у вас есть эта кнопка ASP:

Когда это отрисовывается, вы можете посмотреть на источник страницы, и идентификатор на ней будет не btnAwesome, а $ ctr001_btnAwesome или что-то в этом роде. Это делает боль в заднице найти в javascript. Введите jQuery.

$(document).ready(function() {
  $("input[id$='btnAwesome']").click(function() {
    // Do client side button click stuff here.
  });
});

Идентификатор $ = выполняет регулярное выражение для идентификатора ENDING с btnAwesome.

Edit:

Вы хотели, чтобы вызов ajax вызывался из события нажатия кнопки на стороне клиента? Как ты хотел позвонить? Есть много действительно хороших статей об использовании jQuery для выполнения ajax-вызовов кода ASP.Net за методами.

Суть в том, что вы создаете статический метод , помеченный атрибутом WebMethod. Затем вы можете позвонить на него, используя jQuery, используя $ .ajax.

$.ajax({
  type: "POST",
  url: "PageName.aspx/MethodName",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
    // Do something interesting here.
  }
});

Я изучил материал WebMethod у: http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Там действительно много хорошего ASP.Net/jQuery. Убедитесь, что вы прочитали о том, почему вы должны использовать msg.d в ответе на .Net 3.5 (возможно, начиная с 3.0).

Answer 2

Мне нравится ответ Громера, но у меня возникает вопрос: а что, если у меня несколько элементов btnAwesome в разных элементах управления?

Чтобы удовлетворить эту возможность, я бы сделал следующее:

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

Это не совпадение с регулярным выражением, но, на мой взгляд, совпадение с регулярным выражением не то, что здесь необходимо. Если вы ссылаетесь на определенную кнопку, вам нужно точное совпадение текста, например:

Если, однако, вы хотите выполнить одно и то же действие для каждого btnAwesome, тогда ответьте на вопрос Громера.

Answer 3

На странице веб-форм ASP.NET уже есть метод JavaScript для обработки PostBacks, который называется __doPostBack.

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

Используйте следующее в вашем кодовом файле для генерации JavaScript, который выполняет PostBack. Использование этого метода обеспечит использование правильного 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>

Теперь вы можете использовать "btnLogin_Click ()" из вашего javascript для отправки нажатия кнопки на сервер.

Answer 4

В клиентской части обработайте событие нажатия кнопки, используйте свойство ClientID, чтобы получить идентификатор кнопки:

$(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();
  }
 }
}

Answer 5

Я обнаружил, что хочу сделать это, и я рассмотрел вышеупомянутые ответы и сделал их гибридный подход. Это немного сложно, но вот что я сделал:

Моя кнопка уже работала с постом на стороне сервера. Я хотел, чтобы это продолжало работать, поэтому я оставил «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"/>

Если я проверяю атрибут onclick кнопки HTML во время выполнения, он на самом деле выглядит следующим образом:

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

Затем в своем Javascript я добавил метод OnClick_Submit. В моем случае мне нужно было проверить, нужно ли показывать диалог пользователю. Если я показываю диалоговое окно, я возвращаю false, вызывая остановку обработки события. Если я не показываю диалоговое окно, я возвращаю истину, заставляя событие продолжить обработку и моя логика обратной передачи запускается как раньше.

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;

И, наконец, я могу предоставить логику, основанную на том, есть ли у меня сообщение, и на основе значения этого сообщения.