当我在浏览器上单击前进和后退Buton时，我所有动态创建的PartialView都会消失

问题描述

我可以在视图中创建多个Partialviews

Create.cshtml

@model Opto.Models.Recipe

....
 
<div id="Far" class="tab-pane active card-body">
                            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                            <div class="row form-group">
                                <div class="col">
                                    <div class="text-left" dir="ltr">
                                        <partial name="RecipeFarSighted.cshtml" Model="Model.FarSighted" />
                                    </div>
                                    <hr />
                                    <div class="text-center" dir="rtl">
                                        <div id="FarSightedBillsSection">
                                            @*FarSightedBills will be created here by javascript*@
                                        </div>
                                        <a onclick="AddBill('far')" style="cursor:pointer"><img src="~/images/Plus.png" width="25" height="25" /></a>
                                        <br /><br />
                                        @if (!Model.FarSighted.Share)
                                        {
                                            <div class="form-group row form-check">
                                                <label class="form-check-label col">
                                                    <input asp-for="FarSighted.Share" type="checkBox"> عدم دریافت عینک
                                                </label>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                            <br />
                        </div>
...
@section Scripts{
        <script>
        var farIndex = 0;
        var farRealCount = 0;

function AddBill(type)
        {
                tag = "<div id='farSightedBill" + farIndex + "' ><a onclick=\"RemovePartial('far'," + farIndex + ")\" style='cursor: pointer'><img src='/images/Minus.png' width='25' height='25' /></a><h4><a onclick=\"$('#farSighted" + farIndex + "').collapse('toggle')\" style='cursor: pointer' data-target='#farSighted" + farIndex + "' id='farBillTitle" + farIndex + "' > عینک دائمی " + (farRealCount + 1) + "</a ></h4 > <br /><div class='collapse' id='farSighted" + farIndex + "'></div></div > ";
                $.get('/Glasses/displayFarBill?index=' + farIndex +
                            '&packFactor=' + '@(Model.FarSighted?.PackFactor)' + '&lenseCover=' + '@(Model.FarSighted?.LenseCover)',function (partial) {
                                $('#FarSightedBillsSection').append(tag);
                                $('#farSighted' + farIndex).append(partial);
                                $('#farSighted' + farIndex).collapse('show');
                                //aaa(farIndex);
                                farIndex++;
                                farRealCount++
                            });
}
</script>
}

当我单击浏览器的“后退”按钮然后前进时，我的所有部分视图都将消失。我该如何解决？ 当我在控制器中提交操作方法进行验证时，其中有一些错误，当它返回查看时，其中没有任何部分，该怎么办？

解决方法

首先，使用“前进和后退”按钮浏览已访问的网页。它可能使用BFCache，它将缓存包括jquery（源代码）在内的整个页面。并且在“后退”后不会显示您添加的部分视图，正向单击是因为它是由jquery添加的。jquery将更改html代码，但不会更改源代码。单击Back，Forward按钮时，浏览器将重新加载源代码，并将其呈现为html代码。要显示部分视图，您只能像这样在代码中直接添加它们：

<div class="text-left" dir="ltr">
       <partial name="RecipeFarSighted.cshtml" Model="Model.FarSighted" />
</div>