Index页面有一个部分视图(ReservSearch.cshtml)用于输入搜索参数,另一个用于通过ajax显示结果(Rates.cshtml),它调用HomeController中的GetRates()动作。
在使用ajax调用之前,表单正确验证,即它没有调用GetRates()操作,除非填写了所有必填字段,但是“部分”视图显示在其自己的另一个页面中,因此ajax调用在Index页面中正确显示它。
在实施ajax调用之后,如果用户在单击提交按钮之前正确输入了所有值,则“费率视图”会在“索引”页面的div中显示它应该位于的位置。
问题是,现在,无论何时提交表单,它总是在控制器中调用GetRates()Action方法,即使表单中没有输入值。它仍然有效,因为ajax执行错误函数而不是成功,但我想知道这是否是正确的方法,如果我的代码是正确的。
// VIEW: ReservSearch.cshtml
@model Models.ReservSearch
@using (Html.BeginForm("GetRates", "Home", FormMethod.Post, new { @id = "reservSearch"}))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div>
@Html.TextBoxFor(model => model.DropOffDate)
@Html.ValidationMessageFor(model => model.DropOffDate)
</div>
<div>
@Html.TextBoxFor(model => model.PickUpDate)
@Html.ValidationMessageFor(model => model.PickUpDate)
</div>
<div>
<input type="submit" value="GET RATES"/>
</div>
}
<script>
$(function () {
$('#reservSearch').submit(function () {
$.ajax({
url: '/Home/GetRates',
type: "POST",
dataType: 'html',
data: $("#reservSearch").serialize(),
success: function (data) { $('#ratesView').html(data); }, //Fill div with results
//error: function () { alert('Error: #reservSearch()'); }
});
// it is important to return false in order to cancel the default submission of the form and perform the AJAX call (copied from another post)
return false;
});
});
</script>
enter code here
//家庭控制器
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult GetRates([Bind(Include = "DropOffLoc,DropOffDate,PickUpDate")] ReservSearch reservSearch)
{
if (ModelState.IsValid)
{
// Code ....
return PartialView("~/Views/Shared/Rates.cshtml", rates);
}
return PartialView("~/Views/Shared/ErrorInfo.cshtml");
}
答案 0 :(得分:0)
您应该检查您的表单是否有效,之后进行ajax调用:
$('#reservSearch').submit(function () {
if($(this).valid()) {
// ajax call
}
return false;
});