230

如何使用 jquery 渲染局部视图？

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

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

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

4

8 回答 8

293

您不能仅使用 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>
于 2009-10-15T03:26:32.367 回答
155

我已经使用 ajax 加载来做到这一点：

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

@tvanfosson 用他的回答震撼。

但是，我建议在 js 中进行改进并进行小型控制器检查。

当我们使用@Urlhelper 调用一个动作时，我们将收到一个格式化的 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);
}
于 2013-06-21T15:52:29.663 回答
12

您可以尝试的另一件事（基于 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。

为了让这一切都变得狂热，你可以使用这个 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 来调用 Action 以获取要显示的渲染 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 回答
1

如果您需要引用动态生成的值，您还可以在 @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);
    }
于 2019-07-25T14:31:46.650 回答
0

我是这样做的。

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

详细方法：

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }
于 2017-09-19T05:37:25.777 回答