在ASP中使用jQuery呈现部分视图。NET MVC

How do I render the partial view using jquery?

如何使用jquery呈现部分视图?

We can render the partial View like this:

我们可以这样呈现部分视图:

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

How can we do the same using jquery?

如何使用jquery实现同样的功能?

6 个解决方案

#1

You can't render a partial view using only jQuery. You can, however, call a method (action) that will render the partial view for you and add it to the page using jQuery/AJAX. In the below, we have a button click handler that loads the url for the action from a data attribute on the button and fires off a GET request to replace the DIV contained in the partial view with the updated contents.

不能仅使用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) {
        $detailsDiv.replaceWith(data);
    });
});

where the user controller has an action named details that does:

其中，用户控制器有一个名为details的操作:

public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}

This is assuming that your partial view is a container with the id detailsDiv so that you just replace the entire thing with the contents of the result of the call.

这是假设您的局部视图是一个带有id detailsDiv的容器，因此您只需用调用结果的内容替换整个内容。

Parent View Button

父视图按钮

 <button data-url='@Url.Action("details","user", new { id = Model.ID } )'
         class="js-reload-details">Reload</button>

UserDetails partial view

UserDetails局部视图

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

#2

I have used ajax load to do this:

我使用了ajax load来完成:

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

#3

@tvanfosson rocks with his answer.

@tvanfosson对他的回答感到震惊。

However, I would suggest an improvement within js and a small controller check.

但是，我建议在js内部进行改进，并进行一个小的控制器检查。

When we use @Url helper to call an action, we are going to receive a formatted html. It would be better to update the content (.html) not the actual element (.replaceWith).

当我们使用@Url helper调用一个操作时，我们将接收格式化的html。最好是更新内容(.html)而不是实际的元素(. replacewith)。

More about at: What's the difference between jQuery's replaceWith() and html()?

更多关于at: jQuery的replaceWith()和html()有什么区别?

$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
    $('#detailsDiv').html(data);
}); 

This is specially useful in trees, where the content can be changed several times.

这在树中特别有用，在树中可以多次修改内容。

At the controller we can reuse the action depending on requester:

在控制器中，我们可以根据请求者重用操作:

public ActionResult Details( int id )
{
    var model = GetFooModel();
    if (Request.IsAjaxRequest())
    {
        return PartialView( "UserDetails", model );
    }
    return View(model);
}

#4

Another thing you can try (based on tvanfosson's answer) is this:

另一件你可以尝试的事情(基于tvanfosson的回答)是:

<div class="renderaction fade-in" 
    data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>

And then in the scripts section of your page:

然后在你的页面的脚本部分:

<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>

This renders your @Html.RenderAction using ajax.

这使你的@Html。RenderAction使用ajax。

And to make it all fansy sjmansy you can add a fade-in effect using this css:

为了使所有的fansy 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;
}

Man I love mvc :-)

男人我爱mvc:)

#5

You'll need to create an Action on your Controller that returns the rendered result of the "UserDetails" partial view or control. Then just use an Http Get or Post from jQuery to call the Action to get the rendered html to be displayed.

您需要在控制器上创建一个操作，该操作返回“UserDetails”部分视图或控件的呈现结果。然后使用jQuery的Http Get或Post调用这个动作来显示呈现的html。

#6

I did it like this.

我是这样做的。

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

Details Method:

具体方法:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }