asp.net mvc ajax actionlinkをjquery/ajaxステートメントとして書き直してください。

Question

Jquery + Ajaxのみを使用してこのステートメントをどのように書き直しますか？このコードはリンクを表示します。私がクリックすると、ビューがStuffPanel idに返されます。ここで

@{ AjaxOptions options = new AjaxOptions 
      { 
       InsertionMode = InsertionMode.Replace, 
       UpdateTargetId = "StuffPanel", 
       OnBegin = "OnBeginWork", 
       OnComplete = "OnCompleteWork", 
      };} 
<p>@Ajax.ActionLink("show stuff", "Index", "Stuff", options)</p> 

Answer 1

あなたが行く：

<a href="/Index/Stuff" id="action">show stuff</a> 

$(function() { 
    $('#action').click(function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     $.ajax({ 
      url: url, 
      beforeSend: OnBeginWork, 
      complete: OnCompleteWork, 
      success: function(html) { 
       $('#StuffPanel').html(html); 
      } 
     }); 
    }); 
}); 

私はそれがやっているすべてはあなたのための正しいルーティングを取得しているとして、あなたがActionLinkのを保つお勧めします。クリックイベントを簡単にバインドできるようにIDを追加し、clickイベントコールバックを使用してajax呼び出しを開始します。成功関数を使用して、#StuffPanelの内容を応答に置き換えます。あなたはsuccessコールバックでdata変数をチェックする必要があります

$(function(){ 
    $('#id-to-link').on('click',function(e){ 
     e.preventDefault(); 
     $.ajax('Index/Stuff',{ 
      type: 'POST', 
      data: '{}', 
      dataType: 'html', 
      contentType: 'application/json; charset=utf-8', 
      success: function(data){ 
       $('#StuffPanel').html(data); 
      } 
     }); 
    }); 
} 

：あなたはこのようなものは、あなたが正しい方向に行くを取得する必要があります、提供した情報の限られた量に基づいて

Answer 2

。ビューからのHTMLは、dataまたはdataの一部のプロパティー（data.dまたはdata.messageなど）のいずれかになります。また、クリックイベントを簡単にバインドできるように、リンクに一意のIDを付ける必要があります。