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似乎无效。

您有任何想法如何执行此操作，或者应该寻找哪种方法？非常感谢您的宝贵时间！

P.S。是的，我可以通过Controller内的ViewData做到这一点，但是我的导师说通过传递模型中的参数还有更好的方法，但是我没有找到任何具体的答案。

使用解决方案进行编辑

最终，这是在View中实现的解决方案。我使用了带有数据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。

将模型的属性作为参数传递给View Controller

1 个答案: