如何在 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成功了