ASP.NET MVCでjQueryを使用して部分ビューをレンダリングする


223

jqueryを使用して部分ビューをレンダリングするにはどうすればよいですか?

次のように部分的なビューをレンダリングできます。

<% Html.RenderPartial("UserDetails"); %>

どうすればjqueryを使用して同じことができますか?


以下の記事もご覧ください。tugberkugurlu.com/archive/…異なるアプローチに従い、方法を強化します。
tugberk

ばかげた質問。UserDetailsはcshtmlページとしての部分的なビューですか?UserDetails.cshtml?部分ビューをロードしようとしています。そして通常私は次のように使用します:@ Html.Partial( "〜/ Views / PartialViews / FirstPartialViewTwo.cshtml")
George Geschwend

1
@GeorgeGeschwend、誰かがそれに応答することができるまで、何もここで愚かではありません。UserDetails(UserDetails.cshtml)は、ユーザーコントローラー内のパーシャルビューです。マークされた回答のコメントのように、ビューの完全なパスをハードコーディングするのではなく、Url.Actionを使用することをお勧めします。
Prasad

回答:


286

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>

私はあなたが与えたこのサンプルコードで悪い要求を受け続けます。そのままコピーして、コントローラーのアクションを変更しました。「ユーザー」が何のためかわかりません。
chobo2 2009年

1
実行できるコードが含まれていないため、「可能性が高い」コントローラとアクションの名前を使用しました。「詳細」をアクションに、「ユーザー」をコントローラー名に置き換えるだけです。
tvanfosson 2009年

1
素晴らしい回答tvanfossonをありがとう。

これがRazorでどのように機能するか考えていますか?$ .get( "@ Url.Action(\" Manifest \ "、\" Upload \ "、new {id =" + key + "})"、function(data){$( "<div />")を試しました.replaceWith(data);});
Patrick Lee Scott

1
@Zapnologica-テーブル全体を再ロードする場合、プラグインは元々接続されていたDOM要素が置き換えられているため、プラグインの再適用が必要になる場合があります。JSONとしてデータを返すメソッドdatatables.net/examples/data_sources/server_side.html
tvanfosson

152

私はこれを行うためにajaxロードを使用しました:

$('#user_content').load('@Url.Action("UserDetails","User")');

46
一般に、パスをハードコーディングする代わりに、Url.Actionヘルパーを使用するほうがよいと思います。これは、Webサイトがルートではなくサブディレクトリにある場合に失敗します。ヘルパーを使用すると、その問題が修正され、動的に設定される値を持つパラメーターを追加できます。
tvanfosson 2010年

18
$( '#user_content')。load( '@ Url.Content( "〜/ User / UserDetails")')を実行してそれを回避することができます-クエリ文字列パラメーターでJavaScriptを叩く必要がある場合、私はこのメソッドをよく使用しますURLの末尾
Shawson 2012

この回答でUserDetailsは、部分的なビューではなく、アクションの名前ですか?
Maxim V. Pavlov

4
@Prasad:URLは必ず使用して評価されるべきである@Url.Action("ActionName","ControllerName", new { area = "AreaName" } )代わりにやってHandcodingを
Imad Alazani 2013年

3
@PKKG。@ Url.Action()はRazorでのみ評価されます。OPがコードを別のjsファイルに入れて参照したい場合、これは機能しません。
マイケル

60

@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);
}

11

(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が大好きな男:-)


なぜそれぞれ機能したのですか?使い方?次のようなものはありますか:data-actionurl = "@ Url.Action(" details "、" user "、new {id = Model.ID} data-actionurl =" Another Action "?
user3818229

いいえ、各関数はdata-actionurl属性を持つすべてのhtml要素をループし、アクションメソッドのajaxリクエストを呼び出すことでそれを満たします。だから複数の<div class="renderaction fade-in" ...></div>要素。
Peter

9

「UserDetails」部分ビューまたはコントロールのレンダリング結果を返すアクションをコントローラー上に作成する必要があります。次に、jQueryからHttp GetまたはPostを使用してアクションを呼び出し、レンダリングされたHTMLを表示します。


このjQuery関数で更新されたデータを更新する時間間隔を設定する方法
Neeraj Mehta 2013年

5

標準の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);
        }

0

こうやってやった。

$(document).ready(function(){
    $("#yourid").click(function(){
        $(this).load('@Url.Action("Details")');
    });
});

詳細方法:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

0

動的に生成された値を参照する必要がある場合は、次のように@ 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);
    }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.