3

Добрый вечер!

Программированием занимаюсь совсем недавно, не могу разобраться в одном вопросе.

На странице есть некоторые контейнеры для изображений, сформированных на основе универсального частичного представления:

                    <!--конвертер 2-->
                    <div class="w100h31">
                        <div class="w30h100 center">
                            @{Html.RenderAction("ImageControl", "Image", new { imageref = "/Content/Images/69.png", name = "Конвертер 2", i = 0.5 });}
                        </div>
                    </div>
                    <!--конвертер 3-->
                    <div class="w100h31">
                        <div class="w30h100 center">
                            @{Html.RenderAction("ImageControl", "Image", new { imageref = "/Content/Images/69.png", name = "Конвертер 3", i = 0 });}
                        </div>
                    </div>
                </div>

Необходимо чтобы дочерние действия (RenderAction) обновлялись с определенной периодичностью. Ну и соответственно без перезагрузки всей страницы.

Например, раз в десять секунд происходит обновления действия и соответственно если в контроллере, формирующем частичное представление есть изменения зависимых данных, он формировал новое частичное представление.

0

1 ответ 1

1

Привет!

Здесь важно понимать, что в MVC, в отличии от WebForms, нет каких-то волшебных элементов, которые позволят тебе управлять клиентской частью страницы.

Поэтому вопрос с обновлением каких-то конкретных элементов без перезагрузки страницы можно решить только через js.

1) Добавим класс и id контейнера к твоему View, чтобы их различать

            <!--конвертер 2-->
            <div class="w100h31">
                <div class="w30h100 center container" containerid="2">
                    @{Html.RenderAction("ImageControl", "Image", new { imageref = "/Content/Images/69.png", name = "Конвертер 2", i = 0.5 });}
                </div>
            </div>
            <!--конвертер 3-->
            <div class="w100h31">
                <div class="w30h100 center container" containerid="3">
                    @{Html.RenderAction("ImageControl", "Image", new { imageref = "/Content/Images/69.png", name = "Конвертер 3", i = 0 });}
                </div>
            </div>

2) На наш Ajax-запрос необходимо высылать новый контейнер. Для его формирования создадим View с именем Ajax:

@{
    Layout = null;
}

@{Html.RenderAction("ImageControl", "Image", new { imageref = ViewBag.imageHref, name = ViewBag.imageName, i = ViewBag.i });}

3) Теперь в контроллере, который генерит твою страницу добавим метод:

public ActionResult Ajax(int id) //id будет содержать id контейнера
{         
   //здесь ты пишешь код, который как-то изменяет твой контейнер. Результаты записываешь в переменные ниже
   @ViewBag.imageHref=""; 
   @ViewBag.imageName="";
   @ViewBag.i=1;
   return View("Ajax");
}

4) Теперь добавим на страницу с контейнерами скрипт, который будет их обновлять

<script>
var timerId = setInterval(function () {
            replaceContainers();
        }, 1000); //выполнять функцию раз в 1 секунду
function replaceContainers(){
    var $c = $(".container").each(function () {
        var id = $(this).attr("containerid"); //получаем id
        $.ajax({
            type: "GET",
            url: "/Home/Ajax/" + id, //Home-замени на имя твоего контроллера. 
            contentType: false,
            processData: false,         
            success: function (result) {
                $(this).html(result); //обновляем div
            },
            error: function (xhr, status, p3) {
                alert(xhr.responseText);
            }
        });
    });
}
</script>
3
  • Спасибо, как только протестирую напишу о результатах. А если этих элементов подразумевается множество( собственно для этого и реализован некоторый ImageControl), возможно скрипт запускать для элементов класса container без привязки к id? 29 дек 2016 в 6:09
  • Скрипт и сейчас запускается для всех элементов класса container. Идентификатор служит только для того, чтобы их различать. Если необходимости в этом нет, то в скрипте необходимо убрать строку var id = $(this).attr("containerid");, а урл будет url: "/Home/Ajax/",. Из элементов можно убрать параметр containerid и в контроллере тоже можно убрать параметр, т.е. получится public ActionResult Ajax() 29 дек 2016 в 11:43
  • Спасибо, обязательно отпишусь о результатах 30 дек 2016 в 4:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.