1

我正在使用ASP.NET MVC 4jQuery。我的视图上有一个按钮控件。单击它时,它会将部分视图“注入”到我的视图中。当我刷新页面时,部分视图就消失了。

我的 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>

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

4

1 回答 1

2

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

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

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

  1. 在您的页面中引用 sammy.js。
  2. 像下面这样初始化 sammy

         var app = $.sammy('body', function (context){
    
               this.get('#/PartialView1', function () {
                    fnLoadPartialView();
                });
    
    });
    
  3. 使用 href='PartialView1' 将 Retrieve 更改为

  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 ();
});
于 2013-04-24T13:22:34.340 回答