Передать значение из вида в другой вид

Question

У меня есть приложение MVC, которое хочет скрыть и показать div на одном из представлений Controller.

Итак, у меня есть родительское представление,

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

и код js,

$(document).ready(function () {
$.ajax({
    type: 'GET',
    url : '@Url.Action(actionName: "Action1", controllerName: "Controller1")',
    dataType: "html",
    async:true,
    success: function (result) { $("#div1").html(result); }
    });
$.ajax({
    type: 'GET',
    url : '@Url.Action(actionName: "Action2", controllerName: "Controller2")',
    dataType: "html",
    async:true,
    success: function (result) { $("#div2").html(result); }
    });

$.ajax({
    type: 'GET',
    url : '@Url.Action(actionName: "Action3", controllerName: "Controller3")',
    dataType: "html",
    async:true,
    success: function (result) { $("#div3").html(result); }
    });

});

Это загружает div с представлениями контроллера. Но я хочу показать один div за один раз.И каждый делившийся на 10 сек.Также есть ли лучший способ написать $ (документ) .ready (function ()? Заранее спасибо

Answer 1

$(function() {
  var divs = $(".myDiv");
  var sampleImageList = ["animals", "arch", "nature"];

  // make your ajax calls and insert it into respective div
  var request = function(action, controller, div) {
    var url = "@Url.Action(actionName: " + action + "," + "controllerName: " + controller + ")";
    var index = $(divs).index(div);
    var sampleImage = "<img src=\"https://placeimg.com/640/480/" + sampleImageList[index] + "\">";
    $(div).html(sampleImage);

    /* use ur Ajax call  
    $.ajax({
        type: 'GET',
        url: url,
        dataType: "html",
        success: function(result) {
          $(div).html(result);
        },
        error: function(xhr, status) {
          $(div).html(status); // handle error here 
        }
      }); */

  };

  var swap = function() {
    var $active = $("#myGallery .active");
    var $next = ($("#myGallery .active").next().length > 0) ? $("#myGallery .active").next() : $("#myGallery div:first");

    $active.fadeOut(function() {
      $active.removeClass("active");
      $next.fadeIn().addClass("active");
    });
  }; // swap end

  divs.each(function(index, div) {
    var action = $(div).attr("data-action");
    var controller = $(div).attr("data-controller");
    request(action, controller, div);
  }); // divs end
  
  $("#myGallery .active").fadeIn(); // show first div
  setInterval(swap, 10000);

});

#myGallery .myDiv{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="myGallery">
  <div id="div1" class="myDiv active" data-action="first" data-controller="home"> </div>
  <div id="div2" class="myDiv" data-action="second" data-controller="home"></div>
  <div id="div3" class="myDiv" data-action="third" data-controller="home"></div>
</div>

Мы используем CSS, чтобы скрыть все наши div.Сразу же мы сделаем все запросы AJAX и сохраним их в соответствующем div.Затем мы используем нашу функцию подкачки, чтобы показать или скрыть div.В случае ошибки AJAX вы можете добавить изображение-заполнитель или показать сообщение об ошибке, это ваше дело.

https://jsfiddle.net/r958njhq/