标签: asp.net-core-viewcomponent

从ViewComponent返回自定义html

在ASP.NET Core应用程序中,我想从ViewComponent返回自定义html.我可以返回自定义文本,但html将被编码而不是嵌入:

public class BannerViewComponent : ViewComponent
{
  public async Task<IViewComponentResult> InvokeAsync(string param1, int param2)
  {
    return Content("<strong>some custom html</strong>");
  }
}
Run Code Online (Sandbox Code Playgroud)

我在.cshtml页面中使用它:

    @await Component.InvokeAsync("BannerView")
Run Code Online (Sandbox Code Playgroud)

在页面上,这将显示为<strong>some custom html</strong>而不是一些自定义的HTML.
如何从ViewComponent直接返回HTML而不是文本?

c# asp.net-core asp.net-core-viewcomponent

4
推荐指数
2
解决办法
2389
查看次数

使用部分视图从多个位置引用相同的js文件

我正在为MVC6应用程序设置一个架构,而且我在很大程度上依赖于ViewComponents.我的目标是让每个ViewComponent都有自己的javascript部分,但是从这里阅读, rendersection不能与ViewComponents一起工作,所以我一直试图用另一种方式来做.

在我的_Layout.cshtml中

在关闭body标签之前我有这个部分:

  @{Html.RenderPartial("_LayoutScriptsPartial"); }
Run Code Online (Sandbox Code Playgroud)

_LayoutScriptsPartial中

<environment names="Development">
  <script src="~/lib/jquery/dist/jquery.js"></script>    
  <script src="~/js/app.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
      <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
        asp-fallback-src="~/lib/jquery/dist/jquery.min.js">
      </script>

       <script src="~/js/app.min.js" asp-append-version="true"></script>
</environment>
Run Code Online (Sandbox Code Playgroud)

现在在/ Views/Shared/Components/MyComponent/Default.cshtml中的一个组件中,我引用了另一个包含此内容的局部视图,它是一个轮播ViewComponent

 @model MyProj.MyViewModel
 @{Html.RenderPartial("_LayoutScriptsPartial"); }

 @if (!string.IsNullOrEmpty(Model.ImageUrl))
 {


<script type="text/javascript">

    var cssClass= "@Model.cssClass";
    var imageUrl = "@Model.ImageUrl";

    webbCore.carouselSetBackgroundImage(cssClass, imageUrl);

</script>

 }
Run Code Online (Sandbox Code Playgroud)

我必须这样做的唯一原因是我的视图组件可以使用所有必需的js文件.如您所见,我多次引用_LayoutScriptsPartial.当我使用chromes f12调试并观看网络部分时,我没有多次下载相同的javascript文件.我仍然对这个解决方案感觉不好.我环顾四周,没有找到任何好的解决方案来处理我真正喜欢的js文件和ViewComponents.这样的东西适合我的需要.

我的问题:这个解决方案有多好,有什么优点和缺点,有没有更好的方法来处理js文件和ViewComponents?

javascript razor asp.net-core asp.net-core-viewcomponent

4
推荐指数
1
解决办法
770
查看次数

使用 Razor Pages 在 Asp.NET Core 2.2 中找不到 ViewComponent

我创建了一个非常简单的视图组件(/ViewComponents/MenuViewComponent.cs):

namespace MySite.ViewComponents
{    
    public class MenuViewComponent : ViewComponent
    {
        public Task<IViewComponentResult> InvokeAsync()
        {
            return Task.FromResult((IViewComponentResult)View("Default"));
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

视图部分在这里(/Pages/Components/Menu/Default.cshtml):

<div>Menu</div>
Run Code Online (Sandbox Code Playgroud)

我从文件中调用菜单,_Layout.cshtml如下所示:

@await Component.InvokeAsync("MenuViewComponent");
Run Code Online (Sandbox Code Playgroud)

查看页面时,我收到以下错误消息:

InvalidOperationException: A view component named 'MenuViewComponent' could not be found.
A view component must be a public non-abstract class, not contain any generic parameters, 
and either be decorated with 'ViewComponentAttribute' or have a class name ending with the 'ViewComponent' suffix. 
A view component must not be decorated with …
Run Code Online (Sandbox Code Playgroud)

c# razor asp.net-core-viewcomponent asp.net-core-2.2

4
推荐指数
1
解决办法
5049
查看次数

如何在 ASP.NET Core 中视图组件的表单和控制器之间进行交互?

我是 ASP.NET Core 网页设计的初学者。我编写了一个视图组件,该组件具有一个表单,其中包含一些与视图模型相关的输入。这些输入之一是文件输入(IFormFile数据类型)。

我想将此视图模型提交给控制器的操作(POST操作),检查模型的有效性,如果模型状态有效,则返回另一个视图组件,如果模型状态无效,则使用此视图模型保留在该视图组件上。

这是我的视图模型:PricingViewModel.cs

public class PricingViewModel
{
    [Display(Name = "Select a file")]
    public IFormFile formFile { get; set; }

    [Display(Name = "ColumnCode")]
    [Required(ErrorMessage = "Enter {0} value, please")]
    public string colCode { get; set; }

    [Display(Name = "ColumnName")]
    [Required(ErrorMessage = "Enter {0} value, please")]         
    public string colName { get; set; }
}   
Run Code Online (Sandbox Code Playgroud)

我的视图组件(控制器):PricingComponent.cs

public class PricingComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(PricingViewModel pricing)
    {               
        return await Task.FromResult((IViewComponentResult)View("PricingView", pricing));
    }
} …
Run Code Online (Sandbox Code Playgroud)

javascript c# ajax asp.net-core asp.net-core-viewcomponent

4
推荐指数
1
解决办法
3218
查看次数

何时使用分部视图和 ViewComponent?

我是 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>*@
Run Code Online (Sandbox Code Playgroud)

在 PDF 到 Word 视图中

<form asp-controller="FileUploadController">
    @section _FileUpload{
        @await Component.InvokeAsync("_FileUpload", Model)
    } …
Run Code Online (Sandbox Code Playgroud)

asp.net-mvc-partialview asp.net-core asp.net-core-viewcomponent

4
推荐指数
1
解决办法
1528
查看次数

ASP.NET Core:调用视图组件不尊重授权属性

我实现了 AspNetCore.Authorization 并用[Authorize]. 如果我从浏览器调用控制器,这是可行的。然而,视图组件可以访问数据:

看法:

@foreach (Category category in Model) {
    <a class="btn btn-block
       asp-action="Index"
   asp-controller="Note"
   asp-route-categoryid=@category.CategoryID
   asp-route-page="1">
    @category.Name
</a>
Run Code Online (Sandbox Code Playgroud)

这导致视图组件填充了来自 @category.Name 的数据,而浏览器的地址栏实际上无法访问该数据。

视图组件:

[Authorize]
public class NavigationMenuViewComponent : ViewComponent
{
    private INoteRepository _Repository;
    public NavigationMenuViewComponent(INoteRepository repository)
    {
        _Repository = repository;
    }
    public IViewComponentResult Invoke()
    {
        ViewBag.SelectedCategory = RouteData?.Values["category"];
        return View(_Repository.Categories
            .OrderBy(x => x.Name));
    }
}
Run Code Online (Sandbox Code Playgroud)

实际上我想,Authorize如果没有实际登录,该属性将拒绝来自视图组件的调用。我怎样才能实现这种行为?

c# asp.net-core asp.net-core-viewcomponent

3
推荐指数
1
解决办法
2323
查看次数

ASP.NET 视图组件:删除默认视图路径

我想返回一个具有特定视图路径的视图,如下所示return View(~/Views/Home)。要返回的类型是IViewComponentResult.

但是,当站点被渲染时,它会尝试查找以下视图:Components/{controller-name}/~/Views/Home

所以我想问你们是否知道Components/{controller-name}/从路径中删除的聪明方法。我的视图组件类是从该类派生的ViewComponent

与此相关的问题是,现在您必须有一个“Components”文件夹,其中包含控制器名称作为子文件夹,其中包含 Default.cshtml 文件。我不喜欢将所有组件都放在一个文件夹中。我希望你有一个解决方案。

razor asp.net-core-mvc asp.net-core-viewcomponent

3
推荐指数
1
解决办法
1912
查看次数

ASP.NET Core ViewComponents在不同程序集中找不到

我正在尝试从不同的程序集加载 ViewComponent 但在主项目中我收到以下错误

InvalidOperationException:找不到名为“Pro.ItemViewComponent”的视图组件。视图组件必须是公共非抽象类,不包含任何泛型参数,并且用“ViewComponentAttribute”修饰或具有以“ViewComponent”后缀结尾的类名。视图组件不得用“NonViewComponentAttribute”修饰。

库.csproj

<Project Sdk="Microsoft.NET.Sdk">

<PropertyGroup>
<TargetFramework>netcoreapp2.1</TargetFramework>
</PropertyGroup>
<ItemGroup>
<None 
Remove="Views\Shared\Components\ContainerViewComponent\Default.cshtml"/>
<None Remove="Views\Shared\Components\ItemViewComponent\Default.cshtml" />
<None Remove="Views\Shared\_ViewImports.cshtml" />
</ItemGroup>

<ItemGroup>
<Content 
Include="Views\Shared\Components\ContainerViewComponent\Default.cshtml">
  <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
  <Pack>$(IncludeRazorContentInPack)</Pack>
</Content>
<Content Include="Views\Shared\Components\ItemViewComponent\Default.cshtml">
  <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
  <Pack>$(IncludeRazorContentInPack)</Pack>
</Content>
<Content Include="Views\Shared\_ViewImports.cshtml">
  <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
  <Pack>$(IncludeRazorContentInPack)</Pack>
</Content>
</ItemGroup>
<ItemGroup>
    <EmbeddedResource Include="Views/**/*.cshtml" />
</ItemGroup>
<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.App" Version="2.1.1" />
</ItemGroup>
Run Code Online (Sandbox Code Playgroud)

主项目中的Startup.cs。

var assembly = typeof(Pro.ItemViewComponent).Assembly;
var embeddedFileProvider = new EmbeddedFileProvider(
    assembly,
    "Pro"
);

services.Configure<RazorViewEngineOptions>(options =>
{
    options.FileProviders.Add(embeddedFileProvider);
});
Run Code Online (Sandbox Code Playgroud)

我在 StackOverflow 中关注了许多文章和一些问题和答案,但没有找到任何解决方案,我应该怎么做才能从不同的程序集中共享 ViewComponent?

c# assembly-references asp.net-core-mvc asp.net-core-viewcomponent view-components

3
推荐指数
1
解决办法
2529
查看次数

跨多个项目共享视图组件

我有一个相当大的视图组件,我想在两个不同的 ASP.NET Core MVC 项目中使用它。到目前为止,我找到了两种实现此目的的方法:

  1. 将其封装成DLL
  2. 制作共享(虚拟)网络项目

这两种方法之间的权衡是什么?我的视图组件有嵌套的视图组件,它需要 java 脚本来实现一些动态功能。

asp.net-core-mvc asp.net-core asp.net-core-viewcomponent asp.net-core-2.1

3
推荐指数
1
解决办法
2113
查看次数

C# 使用 TagHelper 将对象传递到 ViewComponent

我正在尝试创建一个ViewComponent可以与 TagHelpers 一起使用的对象,其中我传入一个对象作为参数。

\n\n

例如,我有这个ViewComponent\xe2\x80\x94 最终可能会有更多参数:

\n\n
public IViewComponentResult Invoke(string? pageTitle, string? description, string? headerView)\n
Run Code Online (Sandbox Code Playgroud)\n\n

我想做一些类似的事情:

\n\n
public class PageHeaderViewComponentOptions \n{\n    public string pageTitle2;\n    public string Description;\n}\n\npublic IViewComponentResult Invoke(PageHeaderViewComponentOptions phvc)\n
Run Code Online (Sandbox Code Playgroud)\n\n

并像这样使用它:

\n\n
<vc:page-header phvc:page-title2="Test Title"></vc:page-header>\n
Run Code Online (Sandbox Code Playgroud)\n\n

但是,这不起作用。

\n\n

我还尝试显式设置参数类的属性信息,如下所示:

\n\n
[HtmlTargetElement("PageHeaderViewController")]\npublic class PageHeaderViewComponentOptions\n{\n    [HtmlAttributeName("page-title")]\n    public string pageTitle2 { get; set; }\n    public string Description;\n}\n
Run Code Online (Sandbox Code Playgroud)\n\n

也没有运气。

\n\n

我的想法是我可以将该对象直接传递给视图。键入此内容,我想知道单独传递参数然后将每个参数分配给特定视图模型的成员是否是一个更好的主意。

\n\n

任何帮助将不胜感激。

\n

asp.net-core asp.net-core-tag-helpers c#-8.0 asp.net-core-viewcomponent asp.net-core-3.0

3
推荐指数
1
解决办法
2376
查看次数