试图让视图在 MVC 中使用视图模型答案

【问题标题】：Trying to have a view use a viewmodel in MVC试图让视图在 MVC 中使用视图模型
【发布时间】：2020-01-05 11:55:23
【问题描述】：

我有一个从数据类中检索数据的 ViewModel。

然后我更改了控制器的 Index 方法，以便能够使用类似于此示例的 ViewModel：

namespace WebSite.Models.PassengerViewModels
{
    public class PassengerViewModel
    {
        [Display(Name = "Passenger ID ")]
        public int Id { get; set; }

        [Display(Name = "Surname ")]
        [Required]
        public string Surname { get; set; }

        [Display(Name = "First Name ")]
        [Required]
        public string FirstName { get; set; }

        [Display(Name = "E-mail Address ")]
        [Required]
        [DataType(DataType.EmailAddress)]
        public string Email { get; set; }
    }
}

然后在乘客控制器中，我将索引更改为这个。我尝试为姓氏和名字添加过滤系统：

public async Task<IActionResult> Index(string filter)
        {
            var passengerContext = from e in _context.Passengers
                .Select(a => new PassengerViewModel
                {
                    Id = a.Id,
                    FirstName = a.FirstName,
                    Surname = a.Surname,
                    Email = a.Email,
                })
                                  select e;


            if (!String.IsNullOrEmpty(filter))
            {
                passengerContext = passengerContext.Where(e => e.FirstName.Contains(filter)).Where(e => e.Surname.Contains(filter));
            }

            return View(await _context.Passengers.ToListAsync());
        }

然后在查看索引页面中代码如下所示：

@model IEnumerable<WebSite.Models.PassengerViewModels.PassengerViewModel>

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

<h2>Index</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>

<form asp-controller="PassengersController" asp-action="Index">
    <p>
        Event: <input type="search" name="filter">
        <input type="submit" value="Filter" />
    </p>
</form>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Surname)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FirstName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Surname)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FirstName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.Id">Edit</a>   |
                    <a asp-action="Detail" asp-route-id="@item.Id">Detail</a>
                </td>
            </tr>
        }
    </tbody>
</table>

然后，当我尝试进入该页面时，我得到了这个错误，我不确定它到底告诉了我什么：

InvalidOperationException：传递到 ViewDataDictionary 的模型项的类型为“System.Collections.Generic.List1[WebSite.Data.Passenger]', but this ViewDataDictionary instance requires a model item of type System.Collections.Generic.IEnumerable1[Website.Models.PassengerViewModels.PassengerViewModel]”。

【问题讨论】：

标签： c# asp.net-core razor asp.net-core-mvc viewmodel

【解决方案1】：

您在return 中遇到的问题，您应该将您的return 更新为此

return View(await _context.Passengers.ToListAsync());

to

return View(passengerContext.ToList());

【讨论】：

【解决方案2】：

这一行是直接从原始上下文传递数据

return View(await _context.Passengers.ToListAsync());

当你真正想要的是

return View(await passengerContext.ToListAsync());

动作应该相应地重构

public async Task<IActionResult> Index(string filter) {
    var passengers = _context.Passengers
        .Select(a => new PassengerViewModel {
            Id = a.Id,
            FirstName = a.FirstName,
            Surname = a.Surname,
            Email = a.Email,
        });

    if (!String.IsNullOrEmpty(filter)) {
        passengers = passengers.Where(e => 
            e.FirstName.Contains(filter) || 
            e.Surname.Contains(filter)
        );
    }

    return View(await passengers.ToListAsync());
}

【讨论】：