how to refresh view component without refreshing page with using jquery-CodePudding

I have a view component inside my view

 @await Component.InvokeAsync("UserProfileCard")

and I want when I click on a button only this component will be refresh without refreshing the page with using jquery ajax or jquery Unobtrusive

CodePudding user response：

create div around component

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

create action

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

ajax

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

CodePudding user response：

Using jQuery the way i know is by repainting the .html() of the div/span the page is rendered in and refreshing it with new content of the component

eq: let us assume userProfileCard is a div then code would be like-:

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