将模型的属性作为参数传递给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; }
   }
}

以及下面的包含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，但似乎Component.InvokeAsync方法中的@ model.FirstName或@ model.LastName不起作用。

您是否有任何想法我该怎么做？或者我应该寻找什么方法？ 非常感谢您的宝贵时间！

PS是的，我可以通过Controller内的ViewData来实现，但是我的导师说通过传递模型中的参数有更好的方法，但是我没有找到任何具体的答案。

解决方案编辑

最终，这是在视图中实现的解决方案。 我使用了带有数据Ajax帮助器的JQuery Unobtrusive 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类，在该类中我必须将Guest模型对象作为参数传递（我之前传递的是名字和姓氏）。

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 ... })

但是，您实际上无法在此处尝试执行此操作。 您的模型，视图组件等都存在于服务器端，并且在将响应发送到客户端之前已对所有内容进行了处理。 客户端（在这种情况下为Web浏览器）接收响应并呈现所有HTML并将其显示给用户。 只是在这一点上，用户在您的表单字段中输入了一些内容。 在此阶段，服务器完全没有涉及，这意味着您无法将任何东西传递给视图组件。 如果您需要再次参与服务器，则必须使用AJAX向服务器提交新请求，这可能会执行一些操作，例如为这些表单字段发布用户输入，并使服务器返回部分HTML文档。 然后，您可以通过JavaScript将DOM中的某些元素替换为新的HTML。