在 mvc 中的同一对话框弹出窗口中显示错误消息

Question

我有一个 MVC 应用程序，我在其中实现了高级搜索对话框弹出窗口。如果用户没有在任何文本框中键入任何内容并单击搜索按钮，我想保持弹出窗口打开并在同一弹出窗口中显示错误消息。我的问题是它将关闭该对话框弹出窗口并在主页上显示用于高级搜索和错误消息的文本框。谁能告诉我我做错了什么？

索引视图

<div class="modal fade" id="AdvSearch">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <p style="font-weight: bold" class="modal-title">Advance Search</p>
            </div>
            <div class="modal-body">
                <form id="AdvanceSearchForm">
                    @Html.Partial("AdvSrchForm")
                </form>
            </div>
            <div class="modal-footer">
                <table>
                    <tr>
                        <td><p align="left">% accepts wildcard</p></td>
                        <td width="320px"></td>
                        <td><input type="submit" value="Search" class="btn btn-default" id="ASearchbtn" /></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function () {
    $("#ASearchbtn").click(function () {

        var form = $('#AdvanceSearchForm');
        $.validator.unobtrusive.parse(form);
        form.validate();
        var ASData = $("#AdvanceSearchForm").serialize();

        if (form.valid())
        {
            $.ajax({
                type: "POST",
                url: "/SearchPayment/SubLookup",
                data: ASData,
                cache: false,
                success: function (response) {
                    $("#AdvSearch").modal("hide");
                    $('.modal-backdrop').remove();
                    $('#ASGrid').html('');
                    $('#ASGrid').html(response);
                    $('#ASGrid').show();
                    $("#DataList").hide();
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
})

控制器

public ActionResult Index()
    {

        return View();
    }

[HttpPost]
    public ActionResult AdvanceSearch(Payments filter)
    {

        Session.Clear();
        //get data from db base on filter
        if (!((filter.fName ?? filter.LName ?? filter.grp ?? filter.sec ?? filter.zip ?? filter.hPhone ?? filter.SSN) == null && filter.bday == null))
        {
            model = GetUserSession(filter);

            model = (PremiumPayments)Session["PaymentData"];
            return PartialView("SubscriberGrid", model);
        }
        else
        {
            ViewBag.ErrMsg = "Invalid Search - At least one field is required.";
            return PartialView("AdvSrchForm");
        }
    }

高级搜索表单（部分视图）

@model PaymentFinder.Models.PremiumPayments

<table class="advsrchfrm">
    <tr>
        <td>@Html.Label("First Name %")</td>
        <td>@Html.TextBoxFor(x => x.fName, new { @class = "form-control"}
</td>
        <td>@Html.Label("Last Name %")</td>
        <td>@Html.TextBoxFor(x => x.LName, new { @class = "form-control" })
</td>
    </tr>
    <tr>
        <td>@Html.Label("Birthdate")</td>
        <td>@Html.TextBoxFor(x => x.bday, "", new { placeholder = 
DateTime.Now.ToString("d") })</td>
        <td>@Html.Label("Phone #")</td>
        <td>@Html.TextBoxFor(x => x.hPhone, new { @class = "form-control" })
</td>
    </tr>
    <tr>
        <td>@Html.Label("Zip Code")</td>
        <td>@Html.TextBoxFor(x => x.zip, new { @class = "form-control" })
</td> 
    </tr>
</table>

<br />

@if (//condition to display this)
{
    <span class="text-danger" style="font-weight: 
bold">@Html.Raw(ViewBag.ErrMsg)</span>
}

Answer 1

我认为问题是因为您正在执行 post 并且页面完全刷新。为什么不使用 jQuery 进行验证，如果一切都有效，则进行 post.

在 mvc 中的同一对话框弹出窗口中显示错误消息

Display error message in the same dialog popup in mvc

model-view-controller

popup

asp.net-mvc-partialview

error-messaging