jqueryを使用して部分ビューをレンダリングするにはどうすればよいですか?
次のように部分的なビューをレンダリングできます。
<% Html.RenderPartial("UserDetails"); %>
どうすればjqueryを使用して同じことができますか?
jqueryを使用して部分ビューをレンダリングするにはどうすればよいですか?
次のように部分的なビューをレンダリングできます。
<% Html.RenderPartial("UserDetails"); %>
どうすればjqueryを使用して同じことができますか?
回答:
jQueryのみを使用して部分ビューをレンダリングすることはできません。ただし、部分ビューをレンダリングするメソッド(アクション)を呼び出し、jQuery / AJAXを使用してページに追加することができます。以下では、ボタンのデータ属性からアクションのURLをロードし、GETリクエストを起動して、部分ビューに含まれているDIVを更新されたコンテンツに置き換えるボタンクリックハンドラーがあります。
$('.js-reload-details').on('click', function(evt) {
evt.preventDefault();
evt.stopPropagation();
var $detailDiv = $('#detailsDiv'),
url = $(this).data('url');
$.get(url, function(data) {
$detailDiv.replaceWith(data);
});
});
ここで、ユーザーコントローラーには、detailsという名前のアクションがあります。
public ActionResult Details( int id )
{
var model = ...get user from db using id...
return PartialView( "UserDetails", model );
}
これは、部分的なビューがIDのコンテナーであると想定しているdetailsDiv
ため、全体を呼び出しの結果の内容で置き換えるだけです。
親ビューボタン
<button data-url='@Url.Action("details","user", new { id = Model.ID } )'
class="js-reload-details">Reload</button>
User
はコントローラ名で、のdetails
アクション名です@Url.Action()
。UserDetails部分ビュー
<div id="detailsDiv">
<!-- ...content... -->
</div>
私はこれを行うためにajaxロードを使用しました:
$('#user_content').load('@Url.Action("UserDetails","User")');
UserDetails
は、部分的なビューではなく、アクションの名前ですか?
@Url.Action("ActionName","ControllerName", new { area = "AreaName" } )
代わりにやってHandcodingを。
@tvanfossonは彼の答えで揺れ動く。
ただし、js内の改善と小さなコントローラーチェックをお勧めします。
@Url
ヘルパーを使用してアクションを呼び出すと、フォーマットされたhtmlを受け取ります。.html
実際の要素(.replaceWith
)ではなく、コンテンツ()を更新することをお勧めします。
詳細:jQueryのreplaceWith()とhtml()の違いは何ですか?
$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
$('#detailsDiv').html(data);
});
これは、コンテンツが何度も変更される可能性があるツリーで特に役立ちます。
コントローラでは、リクエスタに応じてアクションを再利用できます。
public ActionResult Details( int id )
{
var model = GetFooModel();
if (Request.IsAjaxRequest())
{
return PartialView( "UserDetails", model );
}
return View(model);
}
(tvanfossonの答えに基づいて)試すことができる別のことは次のとおりです。
<div class="renderaction fade-in"
data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>
次に、ページのスクリプトセクションで:
<script type="text/javascript">
$(function () {
$(".renderaction").each(function (i, n) {
var $n = $(n),
url = $n.attr('data-actionurl'),
$this = $(this);
$.get(url, function (data) {
$this.html(data);
});
});
});
</script>
これにより、ajaxを使用して@ Html.RenderActionがレンダリングされます。
そして、それをすべてファンシーなsjmansyにするために、このcssを使用してフェードイン効果を追加できます。
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity: 0; /* make things invisible upon start */
-webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation: fadeIn ease-in 1;
-o-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
私はMVCが大好きな男:-)
<div class="renderaction fade-in" ...></div>
要素。
「UserDetails」部分ビューまたはコントロールのレンダリング結果を返すアクションをコントローラー上に作成する必要があります。次に、jQueryからHttp GetまたはPostを使用してアクションを呼び出し、レンダリングされたHTMLを表示します。
標準のAjax呼び出しを使用して同じ結果を得る
$.ajax({
url: '@Url.Action("_SearchStudents")?NationalId=' + $('#NationalId').val(),
type: 'GET',
error: function (xhr) {
alert('Error: ' + xhr.statusText);
},
success: function (result) {
$('#divSearchResult').html(result);
}
});
public ActionResult _SearchStudents(string NationalId)
{
//.......
return PartialView("_SearchStudents", model);
}
動的に生成された値を参照する必要がある場合は、次のように@ URL.Actionの後にクエリ文字列パラメーターを追加することもできます。
var id = $(this).attr('id');
var value = $(this).attr('value');
$('#user_content').load('@Url.Action("UserDetails","User")?Param1=' + id + "&Param2=" + value);
public ActionResult Details( int id, string value )
{
var model = GetFooModel();
if (Request.IsAjaxRequest())
{
return PartialView( "UserDetails", model );
}
return View(model);
}