Отображать сообщение об ошибке в том же всплывающем диалоговом окне в mvc

У меня есть приложение 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>
}

person OiC    schedule 10.07.2017    source источник


Ответы (1)


Я думаю, проблема в том, что вы делаете пост, и страница полностью обновляется. Почему бы не сделать валидацию с помощью jQuery и если все верно то сделать пост.

person Villa_pr    schedule 10.07.2017
comment
Как я могу это сделать? Извините, это мой первый проект MVC. - person OiC; 10.07.2017
comment
Привет, вы можете использовать что-то вроде var test = $(":input").val() для очень, если хотя бы один из входов имеет значение. Вы можете сделать оператор if в $("#ASearchbtn").click(function (){}), который у вас есть, и если он пройдет, запустите ajax - person Villa_pr; 10.07.2017
comment
Куда мне поместить сообщение об ошибке? Кроме того, если это не пройдет, как я могу обновить всплывающее модальное окно, чтобы отобразить сообщение об ошибке? - person OiC; 10.07.2017
comment
Я не вижу, где вы используете ViewBag.ErrMsg в своем представлении, но вы можете использовать простой ‹span› или ‹div› и с jquery сделать что-то вроде $("#divOrSpanID).text(ваше сообщение здесь);` если это не так' пройти мимо - person Villa_pr; 10.07.2017
comment
У меня есть этот код, который захватывает пользовательский ввод var ASData = $("#ASForm").serialize() после того, что вы сказали, я сделал if(ASData != null) {//ajax call}, но он по-прежнему выполняет вызов ajax, даже если пользовательский ввод отсутствует - person OiC; 10.07.2017
comment
О, я использую ViewBag.ErrMsg в своем частичном представлении, содержащем форму расширенного поиска. Поскольку я хочу отобразить сообщение об ошибке в том же всплывающем модальном окне, я решил, что должен поместить туда сообщение об ошибке и поставить оператор if о том, отображать его или нет. - person OiC; 10.07.2017
comment
Привет, пожалуйста, если вы можете опубликовать код с изменениями, чтобы я мог лучше видеть, что вы делаете, и лучше помочь вам. Также вы проверяете, что ASData имеет значение null, когда вы ничего не вводите? - person Villa_pr; 11.07.2017
comment
Я отредактировал свой пост выше с моим обновленным кодом, я также включил частичное представление формы предварительного поиска. Он больше не делает сообщение, если поля пусты, поэтому мне просто нужно заставить его отображать сообщение об ошибке в том же всплывающем модальном окне, когда пользователь не вводит данные при нажатии кнопки поиска. - person OiC; 11.07.2017
comment
что вы можете сделать, так это <span id= "errormsg" class="text-danger" style="font-weight: bold"></span> отметить, что я даю <span> идентификатор, и с ним вы можете просто использовать jquery, когда условие не выполняется, как это $("#errormsg).text("your message here");. вам больше не нужно использовать окно просмотра и не забудьте очистить сообщение о пролете $("#errormsg).text(""); при выполнении условий - person Villa_pr; 11.07.2017
comment
Я только что сделал именно то, что вы сказали, но по какой-то причине текст в моем интервале не меняется, когда форма недействительна. Итак, у меня if(form.valid()){ $("ErrMsg).text("") //ajax call } //эта часть работает, else{ $("ErrMsg).text("At least one field is required")}//эта не работает. Он не закрывает мое всплывающее окно, но также не отображает сообщение об ошибке. Я добавил диапазон в моей форме предварительного поиска. Может ли быть так, что он не попадает в мой оператор else? - person OiC; 11.07.2017
comment
Итак, мне удалось исправить эту проблему, но у меня такое чувство, что я делаю это неправильно, потому что, когда поля пусты, они фактически переходят к части error: моего вызова ajax. Это действительно не попало в другую часть моего утверждения. Что я сделал, так это добавил сообщение об ошибке в раздел ошибок моего ajax-вызова error: function(error) { $("ErrMsg).text("At least one field is required"); } Это нормально или я должен это исправить? - person OiC; 11.07.2017
comment
Привет, что я вижу из представления расширенного поиска, так это то, что у вас есть form.valid, но вы не указали, какое поле является обязательным, поэтому форма всегда действительна. Я предлагаю вам вместо этого использовать значение переменной ASData для оператора if, потому что, если вы используете обязательный атрибут, все поле должно содержать значение - person Villa_pr; 11.07.2017
comment
Это не работает, validator.unobtrusive.parse(ASData), не нравится, что ASData сериализуется(). - person OiC; 11.07.2017
comment
вы можете сделать console.log и показать мне, что показывает ASData, когда все поля пусты - person Villa_pr; 11.07.2017
comment
Там написано Uncaught Error: Syntax error, unrecognize expression: fName=&LName=&..., это почти список моих файлов. - person OiC; 11.07.2017
comment
в этом случае я предлагаю использовать этот подход, упомянутый Срину в В этом примере он использует класс, чтобы проверить, имеет ли поле значение - person Villa_pr; 11.07.2017