我尝试覆盖提交行为的<form>
,因此我使用下一个代码:
<script type="text/javascript">
$(function () {
var form = $("#FilterForm");
form.submit(function () {
alert("Submit");
$.ajax({
url: form.attr("action"),
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
success: function (response) {
alert(response);
$('#Container').html(response);
},
error: function () {
$('#Container').html(loadingFailedStr);
},
timeout: 15000
});
return false;
})
});
</script>
此脚本块位于我的表单之后。在部分视图中声明此表单:
<div class="panel card-0">
<div class="panel-body">
@using (Html.BeginForm("TasksGridViewPartial", "Tasks", new { StaffId = staffId, StageId = stageId }, FormMethod.Post, new { id = "FilterForm", enctype = "multipart/form-data" }))
{
<fieldset>
<div class="form-group row">
<div class="col-md-2 col-sm-6">
@Html.Label(Headers.DateCreate)
<div class="datepicker">
@Html.TextBoxFor(m => m.CreatedOn1, new { @class = "form-control" })
</div>
<div class="datepicker">
@Html.TextBoxFor(m => m.CreatedOn2, new { @class = "form-control" })
</div>
</div>
<div class="col-md-2 col-sm-6">
@Html.Label(Headers.DateClose)
<div class="datepicker">
@Html.TextBoxFor(m => m.ClosedOn1, new { @class = "form-control" })
</div>
<div class="datepicker">
@Html.TextBoxFor(m => m.ClosedOn2, new { @class = "form-control" })
</div>
</div>
<div class="col-md-2 col-sm-6">
@Html.Label(Headers.DateStart)
<div class="datepicker">
@Html.TextBoxFor(m => m.StartDate1, new { @class = "form-control" })
</div>
<div class="datepicker">
@Html.TextBoxFor(m => m.StartDate2, new { @class = "form-control" })
</div>
</div>
<div class="col-md-2 col-sm-6">
@Html.Label(Headers.DateEnd)
<div class="datepicker">
@Html.TextBoxFor(m => m.EndDate1, new { @class = "form-control" })
</div>
<div class="datepicker">
@Html.TextBoxFor(m => m.EndDate2, new { @class = "form-control" })
</div>
</div>
<div class="col-md-2 col-sm-6">
@Html.Label(Headers.DateCheck)
<div class="datepicker">
@Html.TextBoxFor(m => m.VerifiedOn1, new { @class = "form-control" })
</div>
<div class="datepicker">
@Html.TextBoxFor(m => m.VerifiedOn2, new { @class = "form-control" })
</div>
</div>
<div class="col-md-2 col-sm-6">
@Html.Label(Headers.TaskNumber)
<div style="padding: 4px;">
@Html.TextBoxFor(m => m.VerifiedOn1, new { @class = "form-control", type = "number" })
</div>
<div style="padding: 4px;">
@Html.TextBoxFor(m => m.VerifiedOn2, new { @class = "form-control", type = "number" })
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-3 col-sm-6">
@Html.LabelFor(m => m.Executors)
@Html.ListBoxFor(m => m.Executors, executors, new { @class = "selectpicker form-control", @title = Messages.ChooseExecutors, multiple = "" })
</div>
<div class="col-md-3 col-sm-6">
@Html.LabelFor(m => m.Projects)
@Html.ListBoxFor(m => m.Projects, projects, new { @class = "selectpicker form-control", @title = Messages.ChooseProjects, multiple = "" })
</div>
<div class="col-md-3 col-sm-6">
@Html.LabelFor(m => m.Statuses)
@Html.ListBoxFor(m => m.Statuses, statuses, new { @class = "selectpicker form-control", @title = Messages.ChooseStatuses, multiple = "" })
</div>
</div>
<div class="form-group row" style="padding-top: 24px;">
<div class="col-md-12">
<button type="submit" class="btn btn-primary">@Actions.Apply</button>
<button type="button" class="btn btn-default">@Actions.ClearFilters</button>
<button type="button" class="btn btn-default">@Actions.ShowAccepted</button>
<button type="button" class="btn btn-default">@Actions.HideAccepted</button>
</div>
</div>
</fieldset>
}
</div>
</div>
我渲染这个部分视图,调用@Html.Action("FilterPartial")
最有趣的是我检查了文档就绪事件中的form
变量,并将其声明为需要。但submit
仍未被调用
问题可能在哪里?
答案 0 :(得分:1)
return false
是不够的,您还需要阻止默认值:
$(function () {
var form = $("#FilterForm");
form.submit(function (e) { // Pass the event to the function
e.preventDefault(); // Stop the form submitting.
$.ajax({
url: form.attr("action"),
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
success: function (response) {
alert(response);
$('#Container').html(response);
},
error: function () {
$('#Container').html(loadingFailedStr);
},
timeout: 15000
});
return false;
})
});