在实现ajax后,表单未在客户端验证

时间:2014-01-21 17:38:41

标签: javascript jquery ajax asp.net-mvc asp.net-mvc-4

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");
}

1 个答案:

答案 0 :(得分:0)

您应该检查您的表单是否有效,之后进行ajax调用:

$('#reservSearch').submit(function () {
    if($(this).valid()) {
         // ajax call
    }
    return false;
});