Как я могу использовать контактную форму в ViewComponent?

Question

Я хочу использовать одну и ту же контактную форму на нескольких страницах своего проекта.

Я попробовал это на примере проекта с именем FormInViewComponent, как показано ниже;

Контроллеры> 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();
        }
    }
}

Представления> Тест> 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>

Модели> 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; }
    }
}

Компоненты просмотра> 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));
        }
    }
}

Представления> Общие> Компоненты> 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

Самая непосредственная проблема заключается в том, что вы пытаетесь вызвать без каких-либо параметров, но вашему методу требуется параметр. Таким образом, хотя он может найти ваш , он не может быть выполнен.

Передача в качестве параметра

Чтобы исправить это, вы должны передать экземпляр a своему вызовите, используя следующий синтаксис:

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

Строительство в соответствии

Альтернативой, в зависимости от ваших конкретных требований, является удаление параметр, и вместо этого создайте компонент представления внутри вашего метод:

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

Очевидно, что с моделью представления обычно связаны данные. Вы можете извлечь эти данные из текущего контекста (например, из параметров маршрута или строки запроса) или использовать эту информацию для поиска данных из другого места (например, из базы данных).

Обработка вашей формы

Однако возникает другой вопрос: как вы собираетесь обрабатывать свою форму? Если вы отправляете его в отдельное действие контроллера или, например, в веб-службу, это не проблема. Если вы ожидаете, что ваш компонент представления также будет обрабатывать результаты, как в контроллере, вы столкнетесь с трудностями. Примечательно, что компоненты представления не обеспечивают какой-либо маршрутизации или сложной привязки модели. Таким образом, хотя вы можете визуализировать форму с помощью компонента представления, вы должны обрабатывать форму с помощью контроллера или веб-службы.