Mvc Кэширование muiltple версия с тем же частичным видом

Question

У меня есть пять кнопок на странице. Каждый из них запускает одно и то же действие, но с разными параметрами. В свою очередь, тот же частичный вид - это возврат, но с разными данными. Когда возвращается частичный вид, я добавляю его в div, но я очищаю div так, чтобы отображался только частичный вид текущей кнопки. Я хотел бы, чтобы кешировать изменения, сделанные на частичном представлении, чтобы пользователи могли щелкнуть с одной кнопки на другую, не потеряв там данных ни на одном из частичных представлений.

Answer 1

Вместо замены содержимого на одном div вы можете хранить 5 разных div, по одному для каждой информации, и показывать только по одному (тот, который связан с нажатой кнопкой).

Поскольку вы просто скрываете его, вы не потеряете введенные пользователем данные формы, пока не перезагрузите страницу.

Быстрый образец.

Я создам 3 кнопки и 3 вида деталей (по одной для каждой кнопки). Я использую HTML 5 данных атрибуты, чтобы определить связь между кнопками и деталью просмотром DIV (data-details-view свойства)

<div id="btnContainer"> 
    <button type="button" class="item-btn" data-val="1" data-details-view="details-1">Form 1</button> 
    <button type="button" class="item-btn" data-val="2" data-details-view="details-2">Form 2</button> 
    <button type="button" class="item-btn" data-val="3" data-details-view="details-3">Form 3</button> 
</div> 

<!-- Now we will have details pane for each form --> 
<div> 
    <div class="item-details" id="details-1" data-view-loaded="false"></div> 
    <div class="item-details" id="details-2" data-view-loaded="false"></div> 
    <div class="item-details" id="details-3" data-view-loaded="false"></div> 
</div> 

Теперь есть некоторые JavaScript, чтобы слушать щелчок даже на кнопке, прочитать Id (или другое свойство, которое вас интересует), Сделать звонок, чтобы получить частичный вид, Установить разметку представления деталей с полученным результатом частичного просмотра.

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

$(function() { 

    $("button.item-btn").click(function(e) { 

     e.preventDefault(); 
     var clickedBtn = $(this); 

     //Hide all the details views. 

     $(".item-details").hide(); 

     var targetDivId = clickedBtn.data("details-view"); 
     var loadedAlready = $("#" + targetDivId).data("view-loaded"); 
     if(!loadedAlready) 
     { 
      //Assuming urlToPartialView contains the url to your partial view and the 
      // endpoint accepts an id value. you can change this anyway you want 

      var url = urlToPartialView+ clickedBtn.data("val"); 

      alert(url); 

      $.get(url, function(res) { 

       $("#" + targetDivId).html(res).data("view-loaded",true); 
      }); 
     } 
     //Show detail view for only the clicked one. 
     $("#" + targetDivId).show(); 
    }); 

});