Question

我使用的是asp.net mvc 4 razor，我有一个主视图，它有一些复选框和一个提交按钮。这些复选框表示要执行的任务。用户通过复选框选择要执行的任务，然后通过单击提交按钮启动该过程。我有一个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>

Controller（\ Controllers下的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; }
}

我有以下问题：

我应该放，而不是因为如果没有，我得到错误消息javascript'$'未定义
这个脚本$（“＃frm”）。submit（function（event）{... // body ...}是没有被执行所以其他行动都没有完成。所以第一个脚本的事件完成不存在达到。

注意：我已检查到达控制器中的PerformTasks操作。未到达控制器上的其他操作Task1，Task2。在脚本而不是成功我尝试完成但没有成功。此外，我试图在JsonResult控制的操作中替换ActionResult，并返回返回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>

脚本与此处发布的相同。

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>

我认为你的第一张表格是完整的回发。如果您在执行表单提交时监视chrome中的网络选项卡，如果您看到它是由jquery或类似的请求，那么您知道您正在进行部分回发。

HTH

Javascript事件处理程序不拦截表单提交

1 个答案: