如何在 ViewComponent 中重用联系表单？

Question

我想在我的项目的多个页面上使用相同的联系表单。

我在一个名为 FormInViewComponent 的示例项目上进行了尝试，如下所示：

Controllers > TestController.cs

using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
    
namespace FormInViewComponent.Controllers
{
    public class TestController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Views > Test > Index.cshtml（我在这个页面上调用了ViewComponent）

@model FormModel
<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Page content is here</h3>
        </div>
        <div class="col-4 bg-light p-3">
            @await Component.InvokeAsync("SampleForm")
        </div>
    </div>
</div>

Models > FormModel.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
    
namespace FormInViewComponent.Models
{
    public class FormModel
    {
        [Required]
        public string Name { get; set; }
    }
}

ViewComponents > SampleFormViewComponent.cs

using FormInViewComponent.Models;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
    
namespace FormInViewComponent.ViewComponents
{
    public class SampleFormViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(FormModel formModel)
        {
            return await Task.FromResult(View(formModel));
        }
    }
}

Views > Shared > Components > SampleForm > Default.cshtml

@model FormModel
    
<h4>ViewComponent is here</h4>
<b class="text-info">Sample Form</b>
<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="col-12">
        <div class="form-group">
            <label asp-for="Name"></label><br />
            <input type="text" asp-for="Name" class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
        <p class="text-center">
            <input class="btn btn-success" type="submit" value="Send" />
        </p>
    </div>
</form>

Answer 1

最直接的问题是您尝试在没有任何参数的情况下调用 SampleFormViewComponent，但您的 InvokeAsync() 方法需要 FormModel 参数。因此，虽然它可能能够找到您的SampleFormViewComponent，但它无法执行InvokeAsync()。

将FormModel 作为参数传递

要解决这个问题，您必须使用以下语法将FormModel 的实例传递给您的Component.InvokeAsync() 调用：

@await Component.InvokeAsync("SampleForm", new { formModel = new FormModel() })

内联构造FormModel

根据您的确切要求，替代方法是删除 formModel 参数，而是在您的 InvokeAsync() 方法中构建您的视图组件：

namespace FormInViewComponent.ViewComponents
{
    public class SampleFormViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {
            var formModel = new FormModel();
            return await Task.FromResult(View(formModel));
        }
    }
}

显然，视图模型通常会有与之关联的数据。您可以从当前上下文（例如，从路由参数或查询字符串）中提取该数据，或使用该信息从另一个位置（例如数据库）查找数据。

处理您的表单

然而，这引发了另一个问题：您希望如何处理您的表单？如果您将其发布到单独的控制器操作或例如网络服务，没问题。如果您希望视图组件也处理结果，就像在控制器中一样，那么您将遇到困难。值得注意的是，视图组件不提供任何类型的路由或复杂的模型绑定。因此，虽然您可以使用视图组件呈现表单，但您应该使用控制器或 Web 服务处理表单。