2009-05-06 23 views
1

ねえ。さて、ここに状況です。私は、親ページに一連の同様の部分ビューを読み込むことができるようにしたいと思います。 thisの記事(AJAXパネルをシミュレートする)で行われているのと同じように。AJAXでASP.NET MVCの部分ビューをロードする適切な方法はありますか?

この記事では、コントローラ上で対応するアクションメソッドを非同期的に呼び出すため、この記事では正常に動作しているようです。しかし、彼が使用している方法は最高のハッキングのように見え、非常に優雅に見えません。何が起こっているのかの簡単な概要は:

これは、非同期に読み込まれる独立したウィジェットです。

<% using (Ajax.Form("ReportOne", null, 
     new AjaxOptions { UpdateTargetId = "resultOne" }, 
     new { id="reportFormOne" })) { } %> 

<script type="text/javascript"> 
    $get("reportFormOne").onsubmit(); 
</script> 

対応する出力の形式は次のようになります。

<form action="/Home/ReportOne/reportFormOne" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, { insertionMode: 0, updateTargetId: 'resultDiv' }); return false;"> 

    <!-- Your form elements here... --> 

</form> 

私は上記したように、これは、これを達成するについて行くには本当にエレガントな方法のように見えるしていませんが、私はしました(jQueryや他の手段を使って)これのための代替手段を探していましたが、そうしたことで失敗しました。

答えて

2

jQueryソリューション:ページの読み込みが完了した後でアクションからhtmlを読み込みます。

<script type='text/javascript'> 
$(function() { 
    $.load('<%= Url.Action("ReportOne", "Home", new { id = "reportFormOne" }) %>', null, function(response,status,xhr) { 
     $('#partialView').html(reponse); 
    }); 
}); 
</script> 

... 

<div id='partialView'> 
</div> 
+0

ありがとうございます。これは素晴らしいことです。しかし、同様のデータを持つ複数の部分的なビューを追加する必要がある場合は、jQueryを使用して各ウィジェットのIDをDBから取得し、アクションを呼び出すたびにループする必要があります。これはjQueryに非常に頼っているようです。 – blparker

+0

これをViewData(またはモデル)ですべて生成し、jQueryコードを動的に構築して、必要な特定の項目だけを取得することができます。これにより、必要なクライアント側のコードが簡略化されます。 – tvanfosson

関連する問題