首页 > 解决方案 > 查看组件数据输入验证

问题描述

我一直在尝试使用 ASP.NET Core 中的视图组件来创建一个更基于“小部件”的系统。我目前拥有的是一个联系表单,它打开一个模式对话框并根据他们所做的选择显示一个视图组件。为简单起见,我在布局页面中按如下方式调用视图组件(是的,我没有使用 vc: 约定 atm):

@await Component.InvokeAsync("Inquiry")

然后它将通过这里调用查询表:

public class InquiryViewComponent : ViewComponent
{
    private readonly ILogger<InquiryViewComponent> _logger;
    private readonly IServiceRepository _serviceRepository;

    public InquiryViewComponent(ILogger<InquiryViewComponent> logger, IServiceRepository serviceRepository)
    {
        _logger = logger;
        _serviceRepository = serviceRepository;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        // do stuff here like create a backing model and then return the view
        return await Task.FromResult(View("~/Views/Inquiry/Inquiry.cshtml", _viewModel));
    }
}

一切都正确加载并打开模态对话框(有一个脚本可以在打开时调用模态),其中包含以下内容:

@model InquiryViewModel

 //modal initialization here
 //modal header here

@using (Html.BeginForm("Inquiry", "Inquiry"))
{
<div class="modal-body">        
    <div class="container">
        <div class="row mb-2">
            <div class="col-md-6">
                @Html.LabelFor(m => m.Inquire.FirstName, new { @class = "required" })
                @Html.TextBoxFor(m => m.Inquire.FirstName, new { @class="form-control", autocomplete="given-name", required="required" })
            </div>
            <div class="col-md-6">
                @Html.LabelFor(m => m.Inquire.LastName, new { @class = "required" })
                @Html.TextBoxFor(m => m.Inquire.LastName, new { @class = "form-control", autocomplete = "family-name", required = "required" })
            </div>
        </div>
        //OTHER FIELDS HERE
</div>
//FOOTER
}

一旦用户提交,如果模型无效,它会发回我不想要的视图查询。我确实了解它正在尝试返回表单上的页面(我可以看到发生这种情况的位置)。我也知道我可以使用客户端验证,但我的目标是构建更复杂的小部件并且不想要一堆 JavaScript 代码。我想知道:如果我有一个基于表单的视图组件并且它需要来自服务器的模型验证,我可以让它返回结果而不呈现页面吗?这种实现对于视图组件是否完全不正确,还有哪些其他方式更合适?

标签: c#asp.net-corerazorbootstrap-4

解决方案


推荐阅读