如何在 razor 组件中使用 Html.EditorFor() ？

Question

我有基于 ASP.NET Core/.net 5 的项目。 我想创建某种可重用的视图/组件来创建日期时间范围选择器。 所以任何时候我想创建日期时间范围都可以调用视图/组件，它会相应地渲染视图。

我最初的想法是想为以下 model 创建一个编辑器模板

public class DateTimeRange
{
    public DateTime? From { get; set; }

    public DateTime? To { get; set; }
}

然后任何时候我想渲染一个日期时间范围，然后我会做这样的事情

public class MainViewModel
{
     public DateTimeRange Range { get; set; }
}

在Main.cshtml视图中我会做这样的事情

@model MainViewModel

@Html.EditorFor(x => x.Range)

但是在上面的用例中，没有办法告诉编辑器是否需要范围。

所以我考虑使用 razor 组件，因为组件允许我将参数传递给视图

DateTime.razor组件看起来像这样

@if (IsRequired)
{
    <div class="col p-1">
        <label class="sr-only" asp-for=""></label>
        <input type="text" class="form-control" asp-for="" required>
    </div>


    <div class="col p-1">
        <label class="sr-only" asp-for=""></label>
        <input type="text" class="form-control" asp-for="" required>
    </div>
}
else
{

    <div class="col p-1">
        <label class="sr-only" asp-for=""></label>
        <input type="text" class="form-control" asp-for="">
    </div>


    <div class="col p-1">
        <label class="sr-only" asp-for=""></label>
        <input type="text" class="form-control" asp-for="">
    </div>
}

@code {

    public bool IsRequired { get; set; }
}

然后在我的主要观点中，我会做这样的事情

@model MainViewModel

<component type="typeof(DateTime)" param-IsRequired="true" param-Model="Model.Range" />

但是，我将如何使用asp-for助手或任何其他方法从组件内部呈现From和To属性的输入，同时又不失去 HTML 前缀的完整性？

Answer 1

我写了一个简单的demo来展示如何在View Component中使用asp-for ：

型号/日期时间范围

public class DateTimeRange
    {
       //Add validation
        [Required]
        public DateTime? From { get; set; }
        [Required]
        public DateTime? To { get; set; }
    }

型号/日期时间范围

public class MainViewModel
    {
        public DateTimeRange Range { get; set; }
    }

组件/RangeViewConponent.cs

 public class RangeViewComponent : ViewComponent
        {            
            public async Task<IViewComponentResult> InvokeAsync()
            {          
                return View();
            }            
        }

视图/共享/组件/范围/default.cshtml

@model ComponentTest.Models.MainViewModel

<form method="post" asp-controller="Home" asp-action="privacy">
    <div class="col p-1">
        <label class="sr-only" asp-for="@Model.Range.From"></label>
        <input type="date" class="form-control" asp-for="@Model.Range.From" >
        <span asp-validation-for="@Model.Range.From" class="text-danger"></span>
    </div>

    <div class="col p-1">
        <label class="sr-only" asp-for="@Model.Range.To"></label>
        <input type="date" class="form-control" asp-for="@Model.Range.To" >
        <span asp-validation-for="@Model.Range.To" class="text-danger"></span>
    </div>
    <button type="submit">submit</button>
</form>

我在 HomeController/Privacy 中使用视图组件

@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

//use View Component
@await Component.InvokeAsync("Range")

//Add validation javascript
@section Scripts{
   <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
   <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
}

您可以查看我是否没有 select 任何日期并单击提交按钮，将显示错误消息并且我无法提交任何数据

然后我select日期点击提交按钮，View Component就可以提交MainViewModel成功了