MVC 4.x Подтвердить выпадающий список и перенаправить на следующую страницу - PullRequest
Новая
       36

MVC 4.x Подтвердить выпадающий список и перенаправить на следующую страницу

1 голос
/ 30 апреля 2020

Вопрос для начинающих:

У меня есть приложение MVC, в котором на странице есть три раскрывающихся списка. В настоящее время я использую AJAX, чтобы оценить раскрывающийся список при отправке формы и изменить класс CSS для отображения обратной связи, если ответ на вопрос неправильный.

HTML: 

<form method="post" id="formQuestion">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <p>This is a question:</p>
            </div>
            <div class="col-md-4">
                <select id="Question1">
                    <option value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>
            <div class="col-md-4 answerResult1">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <button class="btn btn-success" type="submit" id="btnsubmit">Submit Answer</button>
        </div>
    </div>
</form>

AJAX: 


@section scripts {
    <script>
        $(document).ready(function () {
            $("#formQuestion").submit(function (e) {
                e.preventDefault();
                console.log($('#Question1').val())
                $.ajax({
                    url: "/Home/DSQ1",
                    type: "POST",
                    data: { "selectedAnswer1": $('#Question1').val() },
                    success: function (data) { $(".answerResult1").html(data); }
                });
            })
        });
    </script>
}

Контроллер: 

        public string DSQ1(string selectedAnswer1)
        {
            var message = (selectedAnswer1 == "3") ? "Correct" : "Feed back";
            return message;
        }

У меня есть три из этих выпадающих списков, которые все оцениваются по AJAX одинаково. Мой вопрос заключается в том, как бы я go оценил все три, а затем возвратил определенный вид, если все три верны.

Я бы хотел избежать использования жестко набранных http: // address.

1 Ответ

1 голос
/ 30 апреля 2020

Вы можете объявить глобальную переменную сценария перед функцией готовности документа, это определит, допустимы ли поля. См. var dropdown1Valid = false, ....

Затем в функции успеха ajax вы можете изменить значения там. Скажите в ajax ниже, ваш ответ с первым выпадающим списком, если ваш контроллер вернул Correct, установите dropdown1Valid на true.

Наконец, в конце вашей функции отправки вы можете перенаправить проверку, если все переменные имеют значение true, затем перенаправьте с помощью window.location.href="URL HERE или используйте html helper url.action window.location.href="@Url.Action("actionName");

@section scripts {
    <script>
        var dropdown1Valid = false;
        var dropdown2Valid = false;
        var dropdown3Valid = false;

        $(document).ready(function () {
            $("#formQuestion").submit(function (e) {
                e.preventDefault();
                console.log($('#Question1').val())
                $.ajax({
                    url: "/Home/DSQ1",
                    type: "POST",
                    data: { "selectedAnswer1": $('#Question1').val() },
                    success: function (data) {
                       $(".answerResult1").html(data);

                       if(data == "Correct"){
                          // if correct, set dropdown1 valid to true
                          dropdown1Valid = true;
                       }

                       // option 1, put redirect validation here
                       if(dropdown1Valid && dropdown2Valid && dropdown3Valid){
                          // if all three are valid, redirect
                 window.location.href="@Url.Action("actionName","controllerName", new { })";
                       } 
                    }
                });

                // option 2, put redirect validation here
                if(dropdown1Valid && dropdown2Valid && dropdown3Valid){
                   // if all three are valid, redirect
                   window.location.href="@Url.Action("actionName", "controllerName", new { })";
                } 
            })
        });
    </script>
}
...