Обработчик событий Javascript не перехватывает отправку формы

Я использую бритву asp.net mvc 4, и у меня есть основное представление с несколькими флажками и кнопкой отправки. Эти флажки указывают задачи, которые необходимо выполнить. Пользователь выбирает задачи для выполнения с помощью флажков, а затем запускает процесс, нажав кнопку отправки. У меня есть блок div, на который я хочу поместить ход действия в контроллере, задачи, которые они выполняют в данный момент.

После нажатия кнопки отправки я хочу запустить первый скрипт (основной), а затем выполнить следующие задачи.

Проблема в том, что первый основной скрипт, который затем последовательно вызывает остальные, не вызывается.

Я использую ASP.NET MVC4.

Под кодом.

Вид:

@using (Html.BeginForm(
     "PerformTasks", "Tests", FormMethod.Post,
     htmlAttributes: new { id = "frm" }))
{ 
   (...)
       @Html.CheckBoxFor(m => m.task01)<span>Task 1</span><br />
       @Html.CheckBoxFor(m => m.task02)<span>Task 2</span><br />
   (...)
       <input type="submit" value="Do Tasks" />
       <div id="divStatus">
       </div>
}

<script>

// First ajax script
$("#frm").submit(function (event) {
    $("#frm").validate();
    if ($("#frm").valid()) {
       $.ajax({
                url: "/Tests/PerformTasks/",
                type: 'POST',
                data: $("#frm").serialize(),
                success: function() {            
                          perFormTask1();
                },
                beforeSend: function() { 
                     $("#divStatus").append('<br/>Begginig tasks...<br/>'); 
                }           
       });
       event.preventDefault();
    }
});

// second ajax script
function performTask1() {
  $.ajax({
    url: "/Tests/Task1/",
    type: 'POST',
    data: $("#frm").serialize(),
    success: function() { 
        $("#divStatus").append('Task1 completed.<br/>');           
        perFormTask2();
    },
    beforeSend: function() { 
        $("#divStatus").append('<br/>Begginig task 1...<br/>'); 
    }            
  });
};

function performTask2() {
  $.ajax({
    url: "/Tests/Task2/",
    type: 'POST',
    data: $("#frm").serialize(),
    success: function() { 
        $("#divStatus").append('Task2 completed.<br/>');
    },
    beforeSend: function() { 
        $("#divStatus").append('<br/>Begginig task 2...<br/>'); 
    }            
  });
};

</script>

Контроллер (TestsController.cs в папке \Controllers):

public class TestsController : Controller
{
  [HttpPost]
  public ActionResult PerformTasks(ViewModel model)
  {
      // Nothing to do here, tasks are done individually in the methods below.
      // To stay in the same page after submit button is clicked
      return Redirect(this.Request.UrlReferrer.AbsolutePath);
  }

  [HttpPost]
  public ActionResult Task1(ViewModel model)
  {
     // Task 1 should be done if checkbox in the main view is checked, otherwise not.
     bool doTask1 = model.task01;
     if (doTask1 )
     {
       // Do some stuff
     }         

     // To stay in the same page after submit button is clicked
     return Redirect(this.Request.UrlReferrer.AbsolutePath);
  }

  [HttpPost]
  public ActionResult Task2(ViewModel model)
  {
    // Task 2 should be done if checkbox in the main view is checked, otherwise not.
    bool doTask2 = model.task02;
    if (doTask2)
    {
       // Do some stuff
    }

    // To stay in the same page after submit button is clicked
    return Redirect(this.Request.UrlReferrer.AbsolutePath);
  }
}

Модель представления:

public class ViewModel
{
    public bool task01{ get; set; }
    public bool task02{ get; set; }
}

У меня есть следующие проблемы:

  1. Я должен поставить вместо потому что, если нет, я получаю сообщение об ошибке javascript '$' не определен
  2. этот скрипт $("#frm").submit(function (event) { ... // body ... } не выполняется, поэтому ни остальные действия на этом не завершаются. Таким образом, завершение события первого скрипта не достигается.

Примечание. Я проверил, что действие PerformTasks в контроллере выполняется. Другие действия Task1, Task2 на контроллере не достигаются. В сценариях вместо успеха я пробовал завершить, но безуспешно. Также я попытался заменить ActionResult в действиях, контролируемых JsonResult, и вернуть return Redirect(...) для возврата Json(""), но также безуспешно.

Похоже, что обработчик событий Javascript не перехватывает отправку формы.

Любые идеи?

Сгенерированный код:

<form action="/Tests/PerformTasks" id="frm" method="post"><fieldset style="margin-top:20px;margin-left:0px;float:left;"> 
   .... 
   <input type="submit" value="Execute" /> 
   ...
   <div id="divStatus"></div>
   ...
</form>

а затем под скриптами:

<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript">
    alert("Within Script");
    $("#frm").submit(function (event) { .. });
    ...
</script> 

Скрипты такие же, как здесь.


person Ralph    schedule 19.09.2013    source источник
comment
Не могли бы вы также опубликовать сгенерированный HTML?   -  person Jedediah    schedule 19.09.2013
comment
Я только что опубликовал часть важных частей визуализированного представления. Пожалуйста, скажите мне, какие части вас интересуют. Я не могу опубликовать всю информацию, так как эта информация с работы ... Я проверил, что по какой-то причине обработчик javascript не перехватывает отправку формы, предупреждение в скрипте, который я поставил, никогда не выполняется (см. в сгенерированном коде).   -  person Ralph    schedule 19.09.2013
comment
Это то, что я искал. И отправленная форма проходит валидацию? Вызов AJAX срабатывает?   -  person Jedediah    schedule 19.09.2013
comment
Я совершенно не разбираюсь в этом, как я могу узнать, пройду ли я проверку? Я так не думаю. Подскажите как это узнать. Действие PerformTasks в контроллере достигается, но я думаю, что оно не достигается из сценария ajax, а достигается формой submit:@using (Html.BeginForm( PerformTasks, Tests, FormMethod.Post, htmlAttributes: new { id = frm })) потому что я поставил алерты в скрипты и они никогда не срабатывают.   -  person Ralph    schedule 19.09.2013
comment
Единственная проверка, которую я использую, находится в сценарии со следующими строками: $(#frm).validate();if ($(#frm).valid()) { ... Также я поместил предупреждения в опции завершения ошибки успеха по сценариям и никогда туда не попадает.   -  person Ralph    schedule 19.09.2013
comment
@Jedediah Когда вы говорите о проверке, вы имеете в виду @Html.ValidationSummary (true)?   -  person Ralph    schedule 20.09.2013
comment
Может быть, сценарий блокировки находится не в том месте на странице?   -  person Ralph    schedule 20.09.2013


Ответы (1)


Вы не окружаете обработчик отправки формы в document.ready, он будет активирован до того, как форма окажется в DOM.

<script type="text/javascript">
    $(document).ready(function(){
        $("#frm").submit(function (event) { 
            var form = $(evt.currentTarget);

            if(!form.validate().valid()) // you'll need to check this line
                return false;

             PerformTask();
             event.preventDefault();
             return false;
        });

    });
</script> 

Я думаю, что ваша первая форма выполняет полную обратную передачу. если вы отслеживаете вкладку сети в chrome во время отправки формы, если вы видите, что она была запрошена jquery или чем-то подобным, вы знаете, что выполняете частичную обратную передачу.

чт

person Slicksim    schedule 20.09.2013