JavaScript的事件处理函数不是拦截表单提交 [英] Javascript event handler is not intercepting the form submission
问题描述
我使用asp.net的MVC 4剃须刀，我有，有一些复选框和一个提交按钮主视图。这些复选框表示要执行的任务。用户选择通过复选框执行的任务，然后他通过点击提交按钮启动进程。我有，我希望把控制器，他们目前正在做的任务行动的进展情况一个div块。
I am using asp.net mvc 4 razor and I have a main view that has some checkboxes and a submit button. Those checkboxes indicates the tasks to be performed. User selects the tasks to be performed through the checkboxes and then he launch the process by clicking on the submit button. I have a div block on which I want to put the progress of the action in the controller, the tasks they are currently being done.
一旦点击提交按钮，我想推出第一个脚本（主要的一个），然后在接下来的完成任务将完成。
Once the submit button is clicked, I want first script to be launched (the main one) and then on complete next tasks will be done.
的问题是，第一主脚本然后调用序列中的其他人不被调用。
The problem is that first main script which then calls the others in sequence is not being called.
我使用ASP.NET MVC 4
I am using ASP.NET MVC 4
下面以code。
查看：
@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）：
Controller (TestsController.cs under \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; }
}
下面我有问题：
- 我应该把，而不是因为如果不是，我得到
错误消息的javascript$没有定义 - 这个脚本$（＃FRM）。递交（函数（事件）{... //身体...}是
没有执行这样既不对这一行动休息
完成。因此事件完成第一个剧本是不是被
到达。
注：我已经检查了正在达到控制器的动作PerformTasks。控制器上的其他行动任务1，任务2都没有达到。
在脚本而不是成功，我曾尝试完成，但没有成功。
此外，我试图取代的ActionResult在行动由JsonResult控制和返回返回重定向（...）返回JSON（），但也没有成功。
Note:I have checked that the action PerformTasks in the controller is being reached. The others actions Task1, Task2 on the controller are not being reached. In the scripts instead of success I have tried complete but without success. Also I have tried to replace ActionResult in actions in the controlled by JsonResult and return return Redirect(...) to return Json("") but also without success.
这似乎如Javascript事件处理函数不是拦截提交表单。
It seems like Javascript event handler is not intercepting the form submission.
任何想法？
code生成的：
<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>
，然后在下面的脚本：
and then below the scripts:
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript">
alert("Within Script");
$("#frm").submit(function (event) { .. });
...
</script>
的脚本是一样张贴在这里。
The scripts are the same as posted here.
推荐答案
您不是周围的表单中的document.ready提交处理程序，在此之前的形式是在DOM它会被激活。
You aren't surrounding your form submit handler in a document.ready, it will be activated before the form is in the 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的或类似的东西要求监测铬的网络选项卡，你知道你正在做一个局部回传。
I think your first form is doing a full postback. if you monitor the network tab in chrome while you do the form submit, if you see it was requested by jquery or something like that, you know you are doing a partial postback.
心连心
这篇关于JavaScript的事件处理函数不是拦截表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
