我如何使用jquery渲染部分视图?

我们可以像这样渲染局部视图:

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

我们如何使用jquery做同样的事情?


当前回答

使用标准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);
        }

其他回答

你不能只使用jQuery渲染局部视图。但是,您可以调用一个方法(action)来为您呈现部分视图,并使用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")');

我是这样做的。

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

具体方法:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

你可以尝试的另一件事(基于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。使用ajax的RenderAction。

为了让它更花哨,你可以使用下面的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;
}

我爱你! -)

使用标准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);
        }