Mvc Caching 多个版本的同一个局部视图

Question

我在一个页面上有五个按钮。每一个都触发相同的动作，但参数不同。反过来，返回相同的局部视图但具有不同的数据。 返回部分视图时，我将其附加到 div，但我清除了 div，因此只显示当前按钮的部分视图。 我想缓存对局部视图所做的更改，以便用户可以从一个按钮单击到下一个按钮，而不会丢失任何局部视图上的数据。

Answer 1

您可以保留 5 个不同的 div，而不是替换单个 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（或您感兴趣的任何其他属性），进行调用以获取您的部分视图，使用部分视图结果设置详细信息视图标记收到了。

我正在使用 data-view-loaded 属性来确定当用户第二次单击按钮时是否再次重新加载部分视图，

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

});