web-dev-qa-db-ja.com

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

Jqueryを使用して部分ビューをレンダリングする方法

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

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

Jqueryを使ってどうすれば同じことができますか？

javascriptjqueryasp.net-mvcrenderpartial
217
Prasad

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

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

JQueryだけを使って部分ビューをレンダリングすることはできません。ただし、jQuery/AJAXを使用して部分ビューをレンダリングし、それをページに追加するメソッド（アクション）を呼び出すことはできます。以下では、ボタンのデータ属性からアクションのURLをロードし、部分ビューに含まれているDIVを更新されたコンテンツで置き換えるためのGETリクエストを起動するボタンクリックハンドラがあります。

$('.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>

@Url.Action()のUserはコントローラー名、detailsはアクション名です。 UserDetails部分ビュー

<div id="detailsDiv">
    <!-- ...content... -->
</div>
280
tvanfosson

@ tvanfossonは彼の答えにはまっています。

しかし、私はjs内の改善と小さなコントローラチェックをお勧めします。

@Urlヘルパーを使ってアクションを呼び出すと、フォーマットされたhtmlを受け取ることになります。実際の要素（.html）ではなく、コンテンツ（.replaceWith）を更新することをお勧めします。

Atの詳細： 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);
}
59
Custodio

あなたが試すことができるもう一つのことは（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>

これはあなたの@ Html.RenderActionをajaxを使ってレンダリングします。

そしてそれをすべてファンシーにするには、この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が大好きな人:-)

10
Peter

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

9
Chris Pietschmann

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

私はこんな感じでした。

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

詳細方法：

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }
0
Avan

動的に生成された値を参照する必要がある場合は、次のように@ 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);
    }
0
Rider Harrison