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

时间:2013-04-24 13:04:47

标签: javascript asp.net asp.net-mvc jquery

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

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

1 个答案:

答案 0 :(得分: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'

  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. 5

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