230

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

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

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

jqueryを使用して同じことをどのように行うことができますか？

4

8 に答える 8

293

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>

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

<div id="detailsDiv">
    <!-- ...content... -->
</div>
于 2009-10-15T03:26:32.367 に答える
155

これを行うために ajax load を使用しました：

$('#user_content').load('@Url.Action("UserDetails","User")');
于 2009-11-12T11:37:08.197 に答える
12

（tvanfossonの回答に基づいて）試すことができるもう1つのことは次のとおりです。

<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が大好きです:-)

于 2014-10-29T14:58:08.820 に答える
10

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

于 2009-10-15T03:25:40.457 に答える
6

標準の 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);
        }
于 2018-12-15T17:04:38.710 に答える