Передача свойств модели в качестве параметров View Controller

Question

Я стажер в.NET, и я все еще учусь. Я пришел к перекрестку в связи с вопросом о свойствах ViewComponent и Model

У меня есть следующая модель

namespace MVCHotel.Models
{
   public class Guest
   {
    public int ID { get; set; }

    [DisplayName("First Name")]
    [Required(ErrorMessage = "First name required")]
    public string FirstName { get; set; }

    [DisplayName("Last Name")]
    [Required(ErrorMessage = "Last name required")]
    public string LastName { get; set; }

    [DisplayName("Arrival Date")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    [DataType(DataType.Date)]
    public DateTime ArrivalDate { get; set; }

    [DisplayName("Departure Date")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    [DataType(DataType.Date)]
    public DateTime DepartureDate { get; set; }
   }
}

и следующий View, содержащий ViewComponent ReservationsList, который отображает данные в строках (Имя, Фамилия, Дата прибытия, Дата отъезда)

@model IEnumerable<MVCHotel.Models.Guest>

@{
    ViewData["Title"] = "Reservations";
}

<h2>@ViewData["Title"]</h2>

<div class="btn btn-default">
    <a asp-action="Create">Create new reservation</a>
</div>

<br />
<br />

<form asp-controller="Guests" asp-action="Reservations">
    <div>
        First Name: <input type="text" name="firstName" required>
        Last Name: <input type="text" name="lastName" required>
        <input id="submit" type="submit" value="Search" />
    </div>
</form>

<hr />

<div>
    @await Component.InvokeAsync("ReservationsList")
</div>

То, что я пытаюсь сделать, это передать свойства firstName и lastName (которые я установил во входных данных из формы ((у меня есть два входа и кнопка, которая фильтрует мои данные на основе входных данных))) в ViewComponent, но, похоже, что @model.FirstName или @model.LastName внутри метода Component.InvokeAsync не работает.

Есть ли у вас какие-либо идеи, как я могу это сделать или какой подход я должен искать? Большое спасибо за уделенное время!

PS Да, я могу сделать это через ViewData внутри контроллера, но мой наставник сказал, что есть лучший способ передачи параметров из модели, но я не нашел конкретных ответов по этому поводу.

РЕДАКТИРОВАТЬ С РЕШЕНИЕМ

В конце концов это решение реализовано в View. Я использовал библиотеку JQuery Unobtrusive AJAX с помощниками data-ajax для изменения формы.

<form asp-controller="Guests" asp-action="SearchReservations" data-ajax="true" data-ajax-method="POST" data-ajax-update="#reservationsList" data-ajax-mode="replace" data-ajax-success="resultEmpty()">
    <div>
        First Name: <input type="text" name="firstName" required>
        Last Name: <input type="text" name="lastName" required>
        <input id="submit" type="submit" value="Search" />
    </div>
</form>

Другой вещью, которая требовала изменений, был класс ViewComponent, где я должен был передать объект модели Гостя как параметр (я передавал Имя и Фамилию ранее).

namespace MVCHotel.ViewComponents
{
    [ViewComponent(Name = "ReservationsList")]
    public class ReservationsListViewComponent : ViewComponent
    {
        private readonly MVCHotelContext _context;

        public ReservationsListViewComponent(MVCHotelContext context)
        {
            _context = context;
        }

        private Task<List<Guest>> GetReservationsAsync(Guest guest)
        {
            var reservations = from r in _context.Guest
                               select r;

            if (!String.IsNullOrEmpty(guest.FirstName) && !String.IsNullOrEmpty(guest.LastName))
            {
                reservations = reservations.Where(x => x.FirstName.Contains(guest.FirstName) && x.LastName.Contains(guest.LastName));
            }

            return reservations.ToListAsync();
        }

        public async Task<IViewComponentResult> InvokeAsync(Guest guest)
        {
            var items = await GetReservationsAsync(guest);
            return View(items);
        }
    }
}

Я надеюсь, что это поможет и другим людям в будущем.

Answer 1

Component.InvokeAsync может быть передан анонимный объект, который в конечном итоге будет в качестве параметров вашего компонента представления InvokeAsync метод. Другими словами:

@await Component.InvokeAsync("ReservationList", new { ... params here ... })

Однако то, что вы пытаетесь сделать здесь, на самом деле невозможно. Ваша модель, компонент представления и т. Д. Все существуют на стороне сервера, и все обрабатывается перед отправкой ответа клиенту. Клиент (в данном случае веб-браузер) получает ответ, отображает весь HTML-код и отображает его пользователю. Только в этот момент пользователь вводит что-то в поля формы. Сервер на этом этапе вообще не задействован, то есть вы ничего не можете передать компоненту представления. Если вам нужно снова подключить сервер, вы должны использовать AJAX для отправки нового запроса на сервер, потенциально делая что-то вроде публикации пользовательского ввода для этих полей формы и заставить сервер возвращать частичный HTML-документ. Затем вы можете с помощью JavaScript заменить некоторый элемент в вашей DOM этим новым HTML.