Mvc緩存相同部分視圖的muiltple版本

Question

我在頁面上有五個按鈕。每一個觸發相同的動作，但具有不同的參數。反過來，相同的部分視圖將返回，但具有不同的數據。 當部分視圖返回時，我將它附加到div上，但我清除了div，因此只顯示當前按鈕的局部視圖。 我想緩存對部分視圖所做的更改，以便用戶可以從一個按鈕點擊到下一個按鈕，而不會丟失任何部分視圖中的數據。

Answer 1

除了替換單個div上的內容，您可以保留5個不同的div，每個按鈕的數據一個，並且一次只顯示一個（與單擊的按鈕關聯的那個div）。

既然您只是隱藏它，您將不會丟失任何用戶輸入的表單數據，直到他們重新加載頁面。

快速樣品。

我將創建3個按鈕和3個細節視圖（每個按鈕一個）。我使用的HTML 5點的數據屬性來定義按鈕和細節之間的關聯查看格（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(); 
    }); 

});