Вызвать ViewComponents, используя javascript

Question

Я пытаюсь вызвать ViewComponent, используя javascript, чтобы облегчить загрузку страницы, теперь я вызвал viewcomponent с помощью бритвы, но загрузка страницы занимает много времени, как это сделать?

Вот метод в контроллере:

public async Task<IViewComponentResult> InvokeAsync(string id)
{
    //var notifications = _context.Notifications.Include(m => m.ApplicationUser).Include(m => m.Sender).OrderByDescending(m => m.Id);

    return View(await _context.Follows.Include(f=>f.User.University).Include(f=>f.User.Faculty).Where(n=>n.FollowedUserId==id).ToListAsync());
}

и вызов метода (jQuery):

<script>
    $(document).ready(function () {
        $('#viewallfollowers').click(
            function () {

                $("#followersrefresh").load("@await Component.InvokeAsync("Follower", new { id=Model.ApplicationUser.Id })");

              });
    });
</script>

Answer 1

ViewComponent не может быть загружен непосредственно в InvokeAsyn c в js, он получит соответствующий html при загрузке вашей страницы, а не при запуске события щелчка, поэтому ваша страница будет загружаться в течение длительного времени, что возникает из-за ошибки в вашем js.

Чтобы реализовать событие щелчка для загрузки представления компонента представления, вам необходимо использовать ajax get request в событии щелчка, чтобы применить к контроллеру к return the html код компонента просмотра.

Контроллер:

 public IActionResult GetMyViewComponent(string uid)
        {
            return ViewComponent("Follower", new { id = uid});//it will call Follower.cs InvokeAsync, and pass id to it.
        }

Просмотр:

@model WebApplication_core_mvc.Models.MyCompModel
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Index</h1>

@section Scripts{
    <script>
   $(document).ready(function () {
        $('#viewallfollowers').click(function () {
            {
                $("#followersrefresh").empty();
                var _url = '@Url.Action("GetMyViewComponent", "Home")';
                $.ajax({
                    type: "GET",
                    url: _url,
                    data: { uid: $(this).prop("name") },
                    success: function (result) {
                        $("#followersrefresh").html(result);
                    },
                });
            }
        });
    });
    </script>
}
<input id="viewallfollowers" type="button" value="button" name="@Model.ApplicationUser.Id"/>
<div id="followersrefresh" >
</div>

ViewComponents.Follower.cs:

 public class Follower : ViewComponent
    {
        private readonly MyDbContext _context;
        public Follower(MyDbContext context)
        {
            _context = context;
        }
        public async Task<IViewComponentResult> InvokeAsync(string id)
        {
            return View(await _context.Follows.Include(f=>f.User.University).Include(f=>f.User.Faculty).Where(n=>n.FollowedUserId==id).ToListAsync());
        }
    }

Здесь результат теста:

Answer 2

Компонент просмотра - это, по сути, страница-бритва, которая отображает html во время выполнения. Таким образом, вы не можете вызвать его, используя js. Но вы можете выполнить перенаправление на действие get в вашем контроллере и вернуть компонент представления. Отметьте аналогичный SO:

Вызвать ViewComponent, используя javascript