Кнопка JQuery asp.net Click Click через ajax

Ответ 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.
  });
});

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

Edit:

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

Суть в том, что вы создаете метод static, отмеченный атрибутом 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).

Ответ 2

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

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

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

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

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

Ответ 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, чтобы отправить кнопку на сервер.

Ответ 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();
  }
 }
}

Ответ 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, чтобы событие прекратило обработку. Если я не показываю диалоговое окно, я возвращаю 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
}

To:

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;

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