MVCの順序付けられていないHTMLリストのアンカータグから部分ビューをロードする方法は？

Question

私は、順序付けられていないリストを表示するマスタービューを持っています。リストの各要素の中で、別の場所にある同じページに部分的なビューをロードするために、アンカータグを配置しました。私の目標は、ページの読み込みを行うことです。ユーザーが1つの要素をクリックすると、パーシャルビューが読み込まれます。

マスタービュー：インデックス

<ul> 
 
    <li> 
 
     <a> 
 
      apples 
 
     </a> 
 
     
 
    </li> 
 
    <li> 
 
     <a> 
 
      oranges 
 
     </a> 
 

 
    </li> 
 

 
</ul>

部分ビュー：パーシャルビューのための_partialView

<div id="rightside"> 
 
     <h1>Hello</h1> 
 
    </div>

コントローラ： treeviewController

私は 'apples'と 'oranges'を部分表示をロードするためのハイパーリンクにしたいと思います。さらにラインを下ろすと、ユーザーが選択した内容に基づいて、リストの各項目に異なる部分表示がロードされます。

誰でも私のマスタービューのために私のcshtmlファイルでこれを行うための最善の方法を提案できますか？

Answer 1

ボタンクリックやハイパーリンククリックのようなイベントで部分ビューをレンダリングする場合は、jQueryでajax呼び出しを使用する必要があります。部分的なビューを返すアクションメソッドを作成します。ボタンをクリックしてこのアクションメソッドを呼び出すと、ajaxが成功すると、部分ビューをロードするdivを選択し、その応答を内側のhtmlとして追加します。

$('#btn').click(function (e) { 
e.preventDefault(); // <------------------ stop default behaviour of button(if button type is submit) 
var element = $("#YourDiv"); // <--------------Your div where you want to render the partial view. use # if id and . if class 
$.ajax({ 
    url: "/Home/YourAction",  
    success: function (data) { 
     if (data.status == "Success") { 
      $(element).html(data); //<------------ place the response in your div 
     } else { 
      alert("Error occurs!"); 
     } 
    }, 
    error: function() { 
     alert("An error has occured!!!"); 
    } 
}); 

これが役に立ちます。