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

Question

我正在使用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);
}

我的部分观点：

@model MyProject.ViewModels.Rules.RuleViewModel

<div class="main-content">
     <h2>Rule Details</h2>
</div>

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

Answer 1

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

使用sammy.js 实现您所寻找的方法之一

点击按钮后，您可以使用sammy.js（例如：'#/partialview'）设置 hashurl，并且页面刷新 hashurl 部分保持不变（但不会转到服务器）。然后你可以相应地操作客户端代码

1. 在您的页面中引用 sammy.js。

2. 像下面这样初始化 sammy

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

3. 将 Retrieve 更改为 with href='PartialView1'

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