如何使用jquery刷新视图组件而不刷新页面

Posted 2023-03-31

【中文标题】如何使用jquery刷新视图组件而不刷新页面

【英文标题】：how to refresh view component without refreshing page with using jquery

【发布时间】：2021-12-04 19:10:53

【问题描述】：

我的视图中有一个视图组件

 @await Component.InvokeAsync("UserProfileCard")

我希望当我点击一个按钮时，只有这个组件会被刷新，而不使用 jquery ajax 或 jquery Unobtrusive 刷新页面

【问题讨论】：

你点击的是什么按钮？

【参考方案1】：

围绕组件创建 div

<div id="userProfileCard">
 @await Component.InvokeAsync("UserProfileCard")
</div>

创建动作

public class MyController : Controller 
    public IActionResult GetUserProfileCardComponent() 
        return ViewComponent("UserProfileCard", <arguments...>);
    

ajax

<script>
    $.get("/MyController/GetUserProfileCardComponent", function(data) 
        $("#userProfileCard").html(data);
    );
</script>

【参考方案2】：

我知道使用 jQuery 的方式是重新绘制页面呈现的 div/span 的 .html() 并使用组件的新内容刷新它

eq：让我们假设 userProfileCard 是一个 div，那么代码将是这样的：

$("#userProfileCard").html(newData)