如何在asp.net mvc页面刷新后保留注入的部分视图

How to retain an injected partial view after page refresh in asp.net mvc

本文关键字：注入保留视图刷新 asp net mvc 更新时间：2023-09-26

我使用ASP.NET MVC 4和jQuery。我的视图上有一个按钮控件。当它被点击时，它会"注入"一个局部视图到我的视图中。当我刷新页面时，部分视图就消失了。

我的HTML标记:

<button id="RetrieveButton" type="button">Retrieve</button>
<div id="RuleDetails">
     <div class="main-content">
          <p>Some text.</p>
     </div>
</div>

我的jQuery返回部分视图，并调用AJAX返回HTML:

$('#RetrieveButton').click(function () {
     $.ajax(
     {
          type: 'POST',
          url: '@Url.Action("GetRuleDetails")',
          data: {
               systemCode: $('#SystemCodes').val()
          },
          dataType: "html",
          success: function (result) {
               alert('success');
               var domElement = $(result);
               $("#RuleDetails").html(domElement);
          },
          error: function (result) {
               alert('error');
          }
     });
});

我的动作方法:

public ActionResult GetRuleDetails()
{
     RuleViewModel viewModel = new RuleViewModel();
     return PartialView("_RuleInformation", viewModel);
}

My partial view:

@model MyProject.ViewModels.Rules.RuleViewModel
<div class="main-content">
     <h2>Rule Details</h2>
</div>

如果我要刷新页面，我需要这个"注入"的部分视图保持在那里。目前，如果我要刷新它，它会"重置"，并且注入的部分已经消失了。

它不会再次呈现该部分视图，因为它不记得按钮的单击状态。

实现您正在寻找的方法之一是使用sammy.js

单击按钮，您可以使用sammy.js(例如:'#/partialview')设置hashurl，并在页面刷新hashurl部分保持完整(但不去服务器)。然后可以相应地操作客户端代码

在你的页面中引用sammy.js

像下面那样初始化sammy

     var app = $.sammy('body', function (context){
           this.get('#/PartialView1', function () {
                fnLoadPartialView();
            });
});

更改检索到与href='PartialView1'

function fnLoadPartialView (){
         $.ajax(
     {
          type: 'POST',
          url: '@Url.Action("GetRuleDetails")',
          data: {
               systemCode: $('#SystemCodes').val()
          },
          dataType: "html",
          success: function (result) {
               alert('success');
               var domElement = $(result);
               $("#RuleDetails").html(domElement);
          },
          error: function (result) {
               alert('error');
          }
     });
            }

5 .

$('#RetrieveButton').click(function () {
     fnLoadPartialView ();
});