JavaScript事件处理函数不是截取表单提交(Javascript event handler

2019-10-18 15:30发布

我使用asp.net的MVC 4剃刀和我有有一些复选框和一个提交按钮的主视图。 这些复选框指示要执行的任务。 用户选择通过复选框来执行任务,然后他通过点击提交按钮启动进程。 我有,我希望把控制器,它们目前正在完成的任务行动的进展情况一个div块。

一旦点击提交按钮,我想推出第一个脚本(主要的一个),然后在未来完成任务将完成。

问题是,第一主脚本,然后调用顺序别人不会被调用。

我使用ASP.NET MVC 4

下面的代码。

视图:

@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):

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”)。提交(函数(事件){... //身体...}所以在这个动作既没有休息结束。所以事件完成第一个脚本是没有达到。

注:我已经检查了正在达到控制器的动作PerformTasks。 控制器上的其他行动任务1,任务2都没有达到。 在脚本而不是成功,我曾尝试完成,但没有成功。 此外,我试图取代的ActionResult在行动中被JsonResult控制和返回返回重定向(...)返回JSON(“”),但也没有成功。

它看起来像Java脚本事件处理函数不是拦截提交表单。

有任何想法吗?

代码生成:

<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> 

这些脚本一样贴在这里。

Answer 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> 

我想你的第一种形式是做一个完整的回发。 如果监控铬网络选项卡,而你做的表单提交,如果你看到它是由jQuery的或类似的东西的要求,你知道你在做一个局部回传。

心连心



文章来源: Javascript event handler is not intercepting the form submission