在 ASP.NET MVC 中使用 jQuery 渲染局部视图

IT技术 javascript jquery asp.net-mvc renderpartial
2021-01-28 11:37:40

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

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

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

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

6个回答

您不能仅使用 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>
知道这将如何与 Razor 一起使用吗?试过 $.get( "@Url.Action(\"Manifest\",\"Upload\", new { id = " + key + " })", function(data) { $("<div/>") .replaceWith(data); } );
2021-03-14 11:37:40
再次感谢 tvanfosson 的精彩回答。
2021-03-23 11:37:40
@Zapnologica - 如果您要重新加载整个表格,则可能需要重新应用该插件,因为它最初连接到的 DOM 元素已被替换。将其连接到以 JSON 形式返回数据的方法可能会更好,datatables.net/examples/data_sources/server_side.html
2021-04-04 11:37:40
我不断收到您提供的示例代码的错误请求。我按原样复制,只是更改了它应该转到的控制器操作。我不确定“用户”是什么。
2021-04-07 11:37:40
我只是使用了一些“可能”的控制器和动作名称,因为您没有包含任何我们可以通过的代码。只需将“详细信息”替换为您的操作,将“用户”替换为您的控制器名称。
2021-04-08 11:37:40

我使用 ajax load 来做到这一点:

$('#user_content').load('@Url.Action("UserDetails","User")');
@PKKG。@Url.Action() 仅在 Razor 中计算。如果 OP 想要将他们的代码放在一个单独的 js 文件中并引用它,这将不起作用。
2021-03-12 11:37:40
@Prasad:的url应该总是使用进行评估@Url.Action("ActionName","ControllerName", new { area = "AreaName" } ),而不是做Handcoding
2021-03-18 11:37:40
一般来说,我认为你最好使用 Url.Action 助手而不是硬编码路径。如果您的网站位于子目录而不是根目录中,这将会中断。使用帮助程序可以解决该问题,并允许您添加具有动态设置值的参数。
2021-03-23 11:37:40
你可以做 $('#user_content').load('@Url.Content("~/User/UserDetails")') 来解决这个问题 - 如果我需要 javascript 来处理查询字符串参数,我经常使用这个方法在网址的末尾
2021-03-27 11:37:40
在这个答案中,UserDetails是动作的名称,而不是局部视图,对吗?
2021-04-01 11:37:40

@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);
}

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

为了让它成为狂热的 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 :-)

不, each 函数循环遍历所有具有 data-actionurl 属性的 html 元素,并通过调用 action 方法的 ajax 请求来填充它。所以多<div class="renderaction fade-in" ...></div>元素。
2021-03-21 11:37:40
你为什么每个函数?怎么运行的?你有没有类似的东西: data-actionurl="@Url.Action("details","user", new { id = Model.ID } data-actionurl="另一个动作"?
2021-03-30 11:37:40

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

如何设置时间间隔以刷新此 jQuery 函数中的更新数据
2021-03-21 11:37:40