何时使用分部视图和 ViewComponent？

Question

我是 asp.net core 的初学者。我正在构建文件转换网站。PNG 到 JPG、PDF 到 Word 等。在那里我有趣地使用 fileuplaod 控件来上传对话内容。相反，我认为在每个视图上使用相同的控件，将此控件放在一个类中并调用它们。当我在网上搜索时，我发现以下两种方法

1. 视图组件方法
2. 局部视图法

现在我很困惑该用什么？请注意，页面之间的上传文件类型会有所不同。在 JPG 到 PNG 转换器页面上，我必须将 fileuplaod 控件限制为仅使用 JPEG 图像。所以我想将一些参数传递给这个公共控件，并在上传过程完成后，我想回调到调用页面以进行特定的转换。

所以到目前为止我已经实施了以下事情

我遵循 ViewComponent 方法

@model BassModel
@*<form asp-controller="FileUploadViewComponent" enctype="multipart/form-data">*@
    <div class="card card-body">
        <strong>Select PDF file to convert</strong> <div id="chooseFile"><input type="file" asp-for="@Model" accept="image/*" /></div>
        <br />
    </div>
    <br />
    <input asp-action="Index" type="button" value="Upload" class="btn btn-primary" />
    <input asp-action="Clear" type="submit" value="Clear" class="btn btn-outline-primary" />
    <br />
@*</form>*@

在 PDF 到 Word 视图中

<form asp-controller="FileUploadController">
    @section _FileUpload{
        @await Component.InvokeAsync("_FileUpload", Model)
    }
</form>

在 _layout 页面上

<div class="container">
    <div class="row">
        <div class="col-md-7">
            <div class="container background_color_white">
                <main role="main" class="pb-3">
                    @RenderBody()
                </main>
            </div>
            <br />
            <div class="container background_color_white">
                @RenderSection("_FileUpload",false)
            </div>
        </div>
</div>

到目前为止我做到了这一点。错误即将来临。但在进一步之前，我想确保我所做的事情是正确的。我的方向正确吗？

Answer 1

相反，我认为在每个视图上使用相同的控件，将此控件放在一个类中并调用它们。当我在网上搜索时，我发现以下两种方法

视图组件方法

局部视图法

现在我很困惑该用什么？

好吧，根据您的场景，让我们看看在什么情况下我们应该更好地使用分部视图

1. 如果您想分割较大的标记文件
2. 您希望减少项目中的冗余文件。

注意：根据 Microsoft 的建议，我们不应使用需要复杂渲染逻辑或代码执行来渲染标记的部分视图。使用视图组件代替部分视图。你可以在这里检查一下。

然而，根据场景，您似乎不想在任何地方使用相同的控件，并且您的项目中有复杂的逻辑实现，这里我们介绍为什么我们应该使用视图组件的关键原因

虽然部分视图和视图组件相似，但视图组件更强大，可以处理复杂的需求，因为它取决于调用时传递的数据，完全符合您的要求。

您的场景的演示实现：

如果能分享您的错误详细信息您现在的情况就更好了。尽管如此，根据您共享的片段，我尝试根据场景为您模拟一个快速演示：

组件型号：

public class UploadComponentModel
    {
        public IFormFile? MyUploadedFile { get; set; } = null;
        public string? FileExtntionName { get; set; } = string.Empty;
        public string? UploadedFileName { get; set; } = string.Empty;
    }

查看组件类和目录：

    [ViewComponent(Name = "FileUploader")]
    public class FileUploaderViewComponent : ViewComponent
    {

        public IViewComponentResult Invoke(UploadComponentModel filUploadViewModel)
        {
            return View("FileUploader", filUploadViewModel);
        }
    }

查看共享文件夹中的组件cshtml：

@model DotNet6MVCWebApp.Models.UploadComponentModel
<div class="col-sm-4">
    <div class="card" style="width: 18rem; margin-bottom:20px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
        <div class="card-body">
            <form asp-controller="FileUploadViewComponent" asp-action="Index" enctype="multipart/form-data">
                <div class="card card-body">
                    <strong>Select PDF file to convert</strong> <div id="chooseFile"><input type="file" asp-for="MyUploadedFile" accept="image/*" /></div>
                    <br />
                </div>
                <br />
                <input type="submit" value="Upload" class="btn btn-primary" />
                <input asp-action="Clear" type="submit" value="Clear" class="btn btn-outline-primary" />
                <br />
                <label asp-for="FileExtntionName" class="control-label">@Model.FileExtntionName</label>
                <br />
                <label asp-for="UploadedFileName" class="control-label">@Model.UploadedFileName</label>
            </form>
        </div>
    </div>

</div>

控制器：

public class FileUploadViewComponentController : Controller
    {
        public IActionResult Index(UploadComponentModel FileName)
        {

            var uploadedFileDetails = new UploadComponentModel();
            if (FileName.MyUploadedFile == null)
            {
                return View(uploadedFileDetails);
            }
            else
            {
                string checkFileExtension = System.IO.Path.GetExtension(FileName.MyUploadedFile.FileName);

             
                uploadedFileDetails.MyUploadedFile = FileName.MyUploadedFile;
                uploadedFileDetails.FileExtntionName = checkFileExtension;
                uploadedFileDetails.UploadedFileName = FileName.MyUploadedFile.FileName;
                return View(uploadedFileDetails);
            }
         
        }
    }

注意：在这里您可以检查所需的文件扩展名并根据您的要求设置条件逻辑，最后传递将通过组件的模型。

检查文件类型：

               string[] expectedFile = { ".pdf", ".png", ".jpeg" };

                if (expectedFile.Contains(checkFileExtension))
                {
                    uploadedFileDetails.FileExtentionMessage = "Right extension uploaded";
                }

在视图中调用视图组件：

@model DotNet6MVCWebApp.Models.UploadComponentModel
<div>

    @await Component.InvokeAsync("FileUploader",Model)
</div>

注意：这仅用于演示目的，以帮助您消除错误并模拟场景的想象实现。

输出：

注意：如果您仍然有兴趣了解有关View 组件的更多详细信息，您可以在此处查看我们的官方文档