c# - 在 Razor Page 中有条件地调用 ViewComponent

Question

我是 Razor Pages 和 View Components 的新手，很明显我没能理解这些概念:

我有一个示例页面，该页面在_Layout 中呈现，如下所示:

@page "{value1?}/{value2?}"
@model MyProject.Pages.ExampleModel
@{
    ViewData["Title"] = "Example";
}

现在我需要根据 value1 和 value2 有条件地调用 ViewComponent:

public class ExampleModel : PageModel
{
    public async Task<IActionResult> OnGetAsync(string value1, string value2)
    {
        // this contains a lot of logic, db access etc, and passing objects to the component, but I'm abbreviating

        if (value1 == null && value2 == null)
        {
            return this.ViewComponent(nameof(SomeComponent));
        }
        else
        {
            return this.ViewComponent(nameof(SomeOtherComponent));
        }

        // return Page();
    }
}

这是我用来调用组件的扩展:

public static class PageModelExtensions
{
    public static ViewComponentResult ViewComponent(this PageModel pageModel, string componentName, object arguments)
    {
        return new ViewComponentResult
        {
            ViewComponentName = componentName,
            Arguments = arguments,
            ViewData = pageModel.ViewData,
            TempData = pageModel.TempData
        };
    }
}

这是可行的，但因为我没有调用 return Page()，所以组件在未调用 _Layout 的情况下呈现。我应该如何处理这个问题？

Answer 1

如果您想像这样从 Razor 页面中呈现 View 组件，一种选择是在您的 PageModel 类中指定所述 View 组件的名称，然后使用 Component.InvokeAsync在相应的 .cshtml 文件中。这可能是这样的:

示例.cshtml.cs

public class ExampleModel : PageModel
{
    public string ViewComponentName { get; set; }

    public async Task<IActionResult> OnGetAsync(string value1, string value2)
    {
        ...

        if (value1 == null && value2 == null)
            ViewComponentName = nameof(SomeComponent);
        else
            ViewComponentName = nameof(SomeOtherComponent);

        return Page();
    }
}

示例.cshtml

@page "{value1?}/{value2?}"
@model MyProject.Pages.ExampleModel

...

@await Component.InvokeAsync(Model.ViewComponentName)

在 Example.cshtml.cs 中，ViewComponentName 是一个新属性，它(不出所料)表示应作为页面的一部分呈现的 View 组件的名称，这在 Example.cshtml 中实现使用 Component.InvokeAsync。