Question

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

Answer 1

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

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

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

1 个答案: