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(); 
    }); 

});