Как перехватить событие отправки с помощью jQuery в приложении ASP.NET? - PullRequest
Новая
       43

Как перехватить событие отправки с помощью jQuery в приложении ASP.NET?

28 голосов
/ 05 августа 2009

Я пытаюсь обработать событие submit элемента form с помощью jQuery. 

    $("form").bind("submit", function() {
        alert("You are submitting!");
    });

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

Есть ли способ заставить эту работу? Я мог бы присоединиться к событиям отдельных элементов, которые инициируют отправку, но это не идеально - слишком много возможностей (например, выпадающие списки с autopostback = true, сочетания клавиш и т.

Обновление: Вот минимальный тестовый пример - это все содержимое моей страницы aspx: 

<%@ page language="vb" autoeventwireup="false" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:scriptmanager id="ScriptManager" runat="server" enablepartialrendering="true">
                <scripts>
                    <asp:scriptreference path="/Standard/Core/Javascript/Jquery.min.js" />
                </scripts>
            </asp:scriptmanager>
            <p>
                <asp:linkbutton id="TestButton" text="Click me!" runat="server" /></p>
        </div>
    </form>

    <script type="text/javascript">
        $(document).ready(function() {
            alert("Document ready.");
            $("form").submit(function() {
                alert("Submit detected.");
            });
        });
    </script>

</body>
</html>

При нажатии на ссылку я получаю предупреждение «Документ готов», но не «Отправка обнаружена».

Ответы [ 8 ]

34 голосов
/ 05 августа 2009

Спасибо, @Ken Browning и @russau за то, что указали мне в направлении угона __doPostBack. Я видел несколько разных подходов к этому:

  1. Напечатайте мою собственную версию __doPostBack и поместите ее позже на страницу, чтобы перезаписать стандартную.
  2. Перегрузите Render на странице и вставьте свой собственный код в существующий __doPostBack.
  3. Воспользуйтесь преимуществами функциональной природы Javascript и создайте ловушку для добавления функциональности в __doPostBack.

Первые два кажутся нежелательными по нескольким причинам (например, предположим, что в будущем кому-то еще понадобится добавить свои собственные функции в __doPostBack), поэтому я перешел к # 3.

Эта addToPostBack функция является разновидностью обычной техники pre-jQuery, которую я использовал для добавления функций в window.onload,, и она хорошо работает: 

addToPostBack = function(func) {
    var old__doPostBack = __doPostBack;
    if (typeof __doPostBack != 'function') {
        __doPostBack = func;
    } else {
        __doPostBack = function(t, a) {
            if (func(t, a)) old__doPostBack(t, a);
        }
    }
};

$(document).ready(function() {
    alert("Document ready.");
    addToPostBack(function(t,a) {
        return confirm("Really?")
    });
});

Редактировать: Изменен addToPostBack, чтобы

  1. может принимать те же аргументы, что и __doPostBack
  2. добавляемая функция имеет место до __doPostBack
  3. добавляемая функция может возвращать false, чтобы прервать обратную передачу
14 голосов
/ 21 сентября 2009

У меня был успех с решением с переопределением __doPostBack(), чтобы вызывать переопределение на form.submit() (т.е. $('form:first').submit(myHandler)), но я думаю, что оно перегружено. Начиная с ASP.NET 2.0 самый простой обходной путь:

  1. Определите функцию javascript, которую вы хотите запустить при отправке формы, т.е. 

    <script type="text/javascript">

function myhandler()
{
    alert('you submitted!');
}

</script>

  2. Зарегистрируйте вашу функцию обработчика в вашем коде, т.е. 

    protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    ScriptManager.RegisterOnSubmitStatement(Page, Page.GetType(), 
                                            "myHandlerKey", "myhandler()");
}

Вот и все! myhandler() будет вызываться из простых отправок с помощью кнопки и автоматических __doPostBack() вызовов.

4 голосов
/ 05 августа 2009

Да, это раздражает. Я заменяю __doPostBack своим собственным, чтобы можно было отправлять события в огонь.

Iirc, это проблема при отправке формы через javascript (который вызывает __doPostBack do) в IE (возможно, и в других браузерах).

Моя __doPostBack замена вызывает $(theForm).submit() после репликации поведения по умолчанию (вставка значений в скрытые входы)

1 голос
/ 14 февраля 2013

Если вы используете .NET Framework 3.5 или более поздней версии, вы можете использовать ScriptManager.RegisterOnSubmitStatement () в коде на стороне сервера. Зарегистрированный скрипт будет вызываться как при обычной отправке, так и при DoPostback. 

ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "myKey", "SomeClientSideFunction();");
1 голос
/ 05 августа 2009

Я не знаю, как это сделать с помощью jQuery, но вы можете добавить свойство OnClientClick к элементу управления ASP.NET: 

<asp:linkbutton id="TestButton" text="Click me!" runat="server" OnClientClick="alert('Submit detected.');" />
0 голосов
/ 11 декабря 2012 
 $(document).ready(function () {

          $(this).live("submit", function () {

                console.log("submitted");
             }
}
0 голосов
/ 22 мая 2012

Это работает для захвата отправки: 

$("form input[type=submit]").live("click", function(ev) {
    ev.preventDefault();
    console.log("Form submittion triggered");
  });
0 голосов
/ 07 декабря 2011

Вам необходимо добавить OnclientClick к кнопке ссылки

OnClientClick = "if (! $ ('# Form1'). Valid ()) return false;"

...