jQuery Ajax Вызов GET не обновляет sh данные на html странице после успеха, даже если переменная данных показывает правильные значения

Question

Я использую значение, соответствующее раскрывающемуся элементу, и выполняю определенное c действие в контроллере в зависимости от значения. Функция контроллера вызывается с помощью вызова jQuery ajax GET. Функция контроллера правильно вычисляет и заполняет список, который затем извлекается в представлении. Я уже убедился, что в зависимости от значения параметра (0, 1 или 2) контроллер правильно заполняет данные в vm.SomeList. Однако что очень озадачивает, так это то, что как только контроллер вызывает View, код Model.SomeList имеет абсолютно правильные значения. Однако отображаемые данные никогда не меняются, и я попытался вызвать location.reload (true), хотя мне не нужно обновлять sh страницу для отображения данных. Возможно, я не понимаю, как работают звонки jQuery. Я тщательно исследовал это и до сих пор не могу понять проблему. В частности, параметр списка моделей просмотра всегда содержит правильные данные в зависимости от выбранного мной варианта. Я определенно могу сделать эту работу без ajax, но теперь мне очень любопытно. Любые указатели (включая предупреждения о непонимании basi c jQuery) будут очень приветствоваться

Контроллер:

 public ActionResult FuncA(string param)
 {
        var vm = new SomeViewModel();
        ....
        ....

        try
        {
          
            // update a variable in view model...
            vm.someList = GetList(param);
          
            return View(vm);
        }
        catch (Exception e)
        {
              // no exception thrown (I verified this)
        }
 }

View (.cs html) @ Html. EnumDropDownListFor (m => m.routed, "Routed to", new {@class = "col-sm-2 form-control"})

...

    @if (Model.SomeList.Any())
    {

        foreach (var item in Model.SomeList)
        {
            <tr>
            <!-- display the list items -->
            ...
            </tr>
        }
    }

</tbody>

jQuery Позвоните:

<script type="text/javascript">
    $(document).ready(function () {
        ...

        $('#filter').click(

            function () {
                alert("Reached 1");

                $.ajax({
                    url: '@Url.Action("FuncA", "Home")',
                    type: 'GET',
                    data: {             
                            param: $('#routed').val()
                          },
                    dataType: 'text',
                    cache: false,
                    success: function (response) {
                        alert("Reached 2");
                        if (response != null) {
                            alert("Reached 3");
                            location.reload(true);

                        }
                        else {
                            alert("null response");
                        }
                        return false;
                    },
                    error: function () {
                        alert("Error!")
                    }
                })
            }
        )

    });

Answer 1

Обратите внимание на следующее.

$(function() {
  $('#filter').click(function(e) {
    e.preventDefault();
    console.log("Filter Click - Event Triggered.");
    $.ajax({
      url: '@Url.Action("FuncA", "Home")',
      type: 'GET',
      data: {
        param: $('#routed').val()
      },
      dataType: 'text',
      cache: false,
      success: function(response) {
        console.log("AJAX Success", response);
        if (response != null) {
          console.log("AJAX Payload Not NULL");
          location.href = location.href + "?" + Date.now();
        } else {
          console.log("AJAX Payload is empty.");
        }
      },
      error: function(x, e, t) {
        console.log("AJAX Error", e, t);
      }
    });
  });
});

Это немного более очищено и должно предоставить гораздо больше деталей в консоли для тестирования.

Используя событие click, мы можно использовать .preventDefault(). Если не получится, ничего не произойдет. В случае успеха страница все равно будет обновлена.

location.reload(true);

Это должно работать для перезагрузки страницы, а не для кеширования. Если это не так, попробуйте вернуть себе местоположение с помощью дополнительного запроса.

location.href = location.href + "?" + Date.now();

Это должно гарантировать, что браузер не загрузит кешированную версию.