如何在 ASP.NET Core MVC 中使用 select 标签动态编辑数据库表？

Question

我的数据库中有一个名为dbo.Assets 的表。表中的一列是一个名为state 的整数类型列，对应于enum：

public enum AssetState
{
    [Display(Name = "Non-functional")]
    non_functional,
    [Display(Name = "Under-Maintenance")]
    under_maintenance,
    [Display(Name = "Functional")]
    functional,
    [Display(Name = "Deleted")]
    deleted,
}

页面是这样的：

页面的标记：

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

}

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

<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().Location.LocationName)</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 != Models.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.Location.LocationName) (@Html.DisplayFor(item => asset.Location.City))</td>
                <td>
                    @if (asset.State != Models.AssetState.deleted) { 
                        <select class="dropdown" id="assetStateDropdown">
                            <option class="dropdown-item dropdown-item-text" 
                                    value="@Models.AssetState.functional">functional</option>
                            <option class="dropdown-item dropdown-item-text"
                                    value="@Models.AssetState.non_functional">non-functional</option>
                            <option class="dropdown-item dropdown-item-text"
                                    value="@Models.AssetState.under_maintenance">under-maintenance</option>
                        </select>
                        <script type="text/javascript">
                            //set the value of the asset state drop down to the current state
                            let curState = '@asset.State';
                            document.getElementById('assetStateDropdown').value = curState;
                        </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 != Models.AssetState.deleted)
                {
                    <td>
                        <a asp-action="Delete" asp-route-id="@asset.Id" class="btn-link" style="color: darkred">Delete</a> | 
                        <a asp-action="Index" asp-controller="Maintenance" asp-route-id="@asset.Id" class="btn-link">Maintenance Overview</a>
                    </td>
                }
            </tr>
        }
    </tbody>
</table>

现在在这个页面上，我希望下拉菜单能够更改dbo.Assets 中的State 列；即用户可以使用下拉菜单更改资产的状态。我该怎么办？

Answer 1

我根据@meysamasadi 的答案的早期版本构建了自己的 AJAX 脚本。
这是新代码：

@model IEnumerable<Models.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>


<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().Location.LocationName)</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 != Models.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.Location.LocationName) (@Html.DisplayFor(item => asset.Location.City))</td>
                <td>
                    @if (asset.State != Models.AssetState.deleted)
                    {
                        var IdName = "assetStateDropdown" + asset.Id;
                        <select class="dropdown" id="@IdName">
                            <option class="dropdown-item dropdown-item-text"
                                    value="@Models.AssetState.functional">
                                functional
                            </option>
                            <option class="dropdown-item dropdown-item-text"
                                    value="@Models.AssetState.non_functional">
                                non-functional
                            </option>
                            <option class="dropdown-item dropdown-item-text"
                                    value="@Models.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 != Models.AssetState.deleted)
                {
                    <td>
                        <a asp-action="Delete" asp-route-id="@asset.Id" class="btn-link" style="color: darkred">Delete</a> |
                        <a asp-action="Index" asp-controller="Maintenance" asp-route-id="@asset.Id" class="btn-link">Maintenance Overview</a>
                    </td>
                }
            </tr>
        }
    </tbody>
</table>

控制器：

[HttpPost]
[Route("/Assets/UpdateState")]
public async Task<JsonResult> UpdateState(int id, AssetState state)
{
    if (id > 0)
    {
        Asset editAsset = await databaseContext.Assets.Where(asset => asset.Id.Equals(id)).
            FirstOrDefaultAsync();
        editAsset.State = state;
        databaseContext.Alerts.Add(new Alert
        {
            AssetID = editAsset.Id,
            Text = "Asset State changed",
        });
        await databaseContext.SaveChangesAsync();
        return Json("success");
    }
    else
        return Json("fail id is " + id.ToString());
}