1

と を使用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>

HTMLを返すAJAX呼び出しで部分ビューを返す私のjQuery：

$('#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

ボタンのクリック状態を記憶していないため、その部分ビューを再びレンダリングすることはありません。

探しているものを実現する方法の 1 つは、sammy.jsを使用することです。

ボタンをクリックすると、sammy.js(例: '#/partialview') を使用してハッシュ URL を設定できます。ページを更新すると、ハッシュ URL 部分はそのまま残ります (ただし、サーバーには移動しません)。そして、それに応じてクライアントコードを操作できます

  1. ページで sammy.js の参照を取得します。

  2. 以下のようにサミーを初期化します

         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.

$('#RetrieveButton').click(function () {
     fnLoadPartialView ();
});
于 2013-04-24T13:22:34.340 に答える