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

Posted 2023-04-12

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

【英文标题】：How to use select tag to edit database table dynamically in ASP.NET Core MVC?

【发布时间】：2021-07-30 07:49:08

【问题描述】：

我的数据库中有一个名为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 列；即用户可以使用下拉菜单更改资产的状态。我该怎么办？

【参考方案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());