Блог

Итак, в настоящее время я пытаюсь заменить частичное представление, которое обновляется, на ajax. Я пытаюсь заменить его загрузчиком

Изображение ниже должно объяснить, что я пытаюсь сделать.

При нажатии кнопки вместо частичного представления должен отображаться загрузчик (синий прямоугольник) (красный прямоугольник и текст прямо над ним, я забыл поместить туда текст), но, как вы можете видеть, он отображает их отдельно.

Вот как вызывается кнопка:

  @{using (Ajax.BeginForm("_LogOut", "User",
                new AjaxOptions
                {
                    UpdateTargetId = "userInformation",
                    LoadingElementId = "loader-container",
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "GET"
                }))
            {
                <button type="submit" class="btn btn-danger btn-raised text-center">
                    <i class="material-icons">refresh</i> 
                    Refresh Data
                </button>
            }
        }
  

Если вы хотите более подробно взглянуть на то, как создается это частичное представление: http://pastebin.com/1mMfpQyB

Кнопка обновляет данные правильно — так что это работает! Единственная проблема заключается в (как я полагаю) взаимодействии «UpdateTargetId» и «LoadingElementId».

Я не знаю, действительно ли это лучшее решение, но оно работает, хотя и немного хакерски:

             @{
            using (Ajax.BeginForm("_LogOut", "User",
                new AjaxOptions
                {
                    UpdateTargetId = "userInformation",
                    LoadingElementId = "loadercontainer",
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "GET",
                    OnBegin = "$('#userInformation').slideUp(); $('#loadercontainer').slideDown()",
                    OnComplete = "$('#userInformation').slideDown(); $('#loadercontainer').slideUp()"
                }))
            {
                <button type="submit" class="btn btn-danger btn-raised text-center">
                    <i class="material-icons">refresh</i> 
                    Refresh Data
                </button>
            }
        }
  

Подводя итог, я делегировал ajaxoptions onbegin и oncomplete для вызова некоторого jquery:

 OnBegin = "$('#userInformation').slideUp(); $('#loadercontainer').slideDown()",
OnComplete = "$('#userInformation').slideDown(); $('#loadercontainer').slideUp()"