如果 ViewModel 中只有一个属性，它真的有必要吗？

问题描述

我的 MVC (.NET 5) 应用程序中有一个名为“资产/索引”的视图，我在其中显示资产表中的资产列表。该页面以 IList<Asset> 为模型，即 @model IList<Asset>。我的同行建议我为该视图制作一个 viewmodel，但在这种情况下真的需要一个 viewmodel 吗？我的意思是我看到的唯一优势是，向页面添加另一个属性（如果将来需要）很容易，因为在这种情况下我肯定需要一个 viewmodel。但是，由于该页面的唯一目的是显示资产列表（我很确定将来不需要向该假设的 viewmodel 添加属性），我很困惑是遵循我的直觉还是同行的建议。

---

视图：

@using AdminPortal.Models;
@model IReadOnlyList<Asset>
@{ 
    ViewData["Title"] = "List";

}

@{ await Html.RenderPartialAsync("../Partials/SearchPartial","AssetsController"); }

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    document.getElementById('list-btn').hidden = true;
</script>

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

<table class="table">
    <thead class="thead-light">
        <tr>
            <th>@Html.displayNameFor(model => model.First().Id)</th>
            <th>@Html.displayNameFor(model => model.First().Address)</th>
            <th>@Html.displayNameFor(model => model.First().State)</th>
            <th>@Html.displayNameFor(model => model.First().Temperature)</th>
            <th>@Html.displayNameFor(model => model.First().Moisture)</th>
            <th>@Html.displayNameFor(model => model.First().Alerts)</th>
            <th>@Html.displayNameFor(model => model.First().LastServiced)</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var asset in Model)
        {
            <tr>
                @if (asset.State != AssetState.deleted)
                {
                    <td>
                        <a asp-action="Index" asp-controller="Home"
                           asp-route-id="@asset.Id">@Html.displayFor(item => asset.Id)</a>
                    </td>
                }
                else
                {
                    <td>
                        <a>@Html.displayFor(item => asset.Id)</a>
                    </td>
                }
                <td>@Html.displayFor(item => asset.Address)</td>
                <td>
                    @if (asset.State != AssetState.deleted)
                    {
                        var IdName = "assetStateDropdown" + asset.Id;
                        <select class="dropdown" id="@IdName">
                            <option class="dropdown-item dropdown-item-text"
                                    value="@AssetState.functional">
                                functional
                            </option>
                            <option class="dropdown-item dropdown-item-text"
                                    value="@AssetState.non_functional">
                                non-functional
                            </option>
                            <option class="dropdown-item dropdown-item-text"
                                    value="@AssetState.under_maintenance">
                                under-maintenance
                            </option>
                        </select>
                        <script type="text/javascript">
                            //change the state of the asset from the dropdown
                            $(function () {
                                $("#@IdName").change(function () {
                                    $.ajax({
                                        type: "POST",url: "/Assets/UpdateState",data: {
                                            "state": $("#@IdName").val(),"id": '@asset.Id'
                                        },success: function (response) {
                                            alert("State Changed");
                                        },failure: function (response) {
                                            alert("Could not Change state");
                                        },error: function (response) {
                                            alert("Some error occurred. Try again later");
                                        }
                                    });
                                });
                            });
                        </script>
                        <script type="text/javascript">
                            //set the value of the asset state drop down to the current state
                            document.getElementById('@IdName').value = '@asset.State';
                        </script>
                    }
                    else
                    {
                        <p>deleted</p>
                    }
                </td>
                <td>@Html.displayFor(item => asset.Temperature)</td>
                <td>@Html.displayFor(item => asset.Moisture)</td>
                <td>
                    <a asp-action="Index" asp-controller="Alerts"
                       asp-route-id="@asset.Id">@Html.displayFor(item => asset.Alerts.Count)</a>
                </td>
                <td>@Html.displayFor(item => asset.LastServiced)</td>
                @if (asset.State != AssetState.deleted)
                {
                    <td>
                        <a asp-action="Delete" asp-route-id="@asset.Id" class="btn-link" style="color: darkred">Decommission</a>
                    </td>
                }
            </tr>
        }
    </tbody>
</table>

---

建议的视图模型：

public class Indexviewmodel
{
    public IReadOnlyList<Asset> Assets { get; set; }
}

解决方法

简洁和更少的文件，相对于更容易扩展的冗长。

我见过有大量不必要的 ViewModel 使空间变得混乱的项目，但也有一些项目因为缺少 ViewModel 而很难添加额外的布尔标志或标题元素。

案例可以采用任何一种方式，最终取决于您的团队决定的偏好或编码风格，并与项目其余部分的一致性相匹配。如果人们期望模型在某个地方，当他们不在那里时可能会很刺耳，但如果 ViewModel 在该代码库中是可选的，那么它会更容易接受。

您永远不知道未来的需求，也许可能需要一些相关的用户信息、功能或扩展。即使没有可扩展性，如果代码库的其余部分都为每个页面设置了视图模型，那么阅读代码库的开发人员将会期望这种布局，因此对于您的一个页面，因为它非常简单而省略 ViewModel 实际上可能会结束由于不一致导致可读性降低。