如何根据 ASP.NET Core 中的先前选择更改选择选项

Question

我正在使用 ASP.NET Core 3.1 MVC 来绑定工作流状态的下拉/选择。

工作流状态示例 - Open、Scheduled、Closed 等。所有这些都在 UI 中正确显示。

现在我必须添加一些不同的逻辑，以便这些状态选项是基于当前存储状态的动态。

例如，如果当前存储的工作流状态为已安排，则用户无法看到/选择打开，而只能看到/选择已关闭。

同样，如果当前工作流状态为已关闭，那么用户不应看到/选择已安排，而只能看到/选择打开。

因此，每个状态都有某种链接状态，用户可以在其中进入下一步。

请建议我如何做到这一点。

谢谢。

Answer 1

例如，如果存储的当前工作流状态是计划的，那么用户 看不到/选择打开，只是关闭。

同样，如果当前工作流状态为 Closed，则用户不应 查看/选择计划但只是打开。

因此，每个状态都有某种链接状态，用户可以在其中进入下一步。

如果你只显示一条记录的工作流状态，在控制器中，你可以使用switch语句根据当前状态过滤工作流状态，然后使用ViewBag或ViewData将过滤状态转移到视图页面，绑定选择元素。

如果您要显示具有工作流状态的多条记录，您可以使用下拉列表选择选项创建视图模型。

请参考以下示例，在此示例中，页面加载时，会根据当前状态过滤状态，更改状态后，将使用 JQuery Ajax 更新 DropDownList 选项：

public class WorkFlowState
{
    public int ID { get; set; }
    public string State { get; set; }
}

public class Article
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string SelectedState { get; set; } 
}
public class ArticleViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string SelectedState { get; set; }
    public List<WorkFlowState> States { get; set; }
}

控制器：

    private readonly IDataRepository _repository;
    public ArticleController(IDataRepository dataRepository)
    {
        _repository = dataRepository;
    }

    public IActionResult Index()
    {
        //query database to get all article with state.
        var articles = new List<Article>(){
            new Article() { Id = 1, Name = "A", SelectedState = "Open" },
            new Article() { Id = 2, Name = "B", SelectedState = "Scheduled" },
             new Article() { Id = 3, Name = "C", SelectedState = "Closed" },
        };

        //get all states: Open, Scheduled, Closed.
        var allstate = _repository.GetWorkFlowStates();

        //based on the article current state to set the Dropdownlist select items:
        var articlelist = articles.Select(c => new ArticleViewModel()
        {
            Id = c.Id,
            Name = c.Name,
            SelectedState = c.SelectedState,
            States =
               c.SelectedState == "Scheduled" ? allstate.Where(d=>d.State != "Open").ToList():
               c.SelectedState == "Closed" ? allstate.Where(d=>d.State !="Scheduled").ToList():
               allstate.ToList()
        }); 
          
        return View(articlelist);
    }
    [HttpPost]
    public IActionResult GetStates(string selectedState)
    {
        //get all states
        var allstate = _repository.GetWorkFlowStates();
        //filter states
        switch (selectedState)
        {
            case "Scheduled":
                allstate = allstate.Where(d => d.State != "Open").ToList();
                break;
            case "Closed":
                allstate = allstate.Where(d => d.State != "Scheduled").ToList();
                break;
        }

        return Json(allstate);
    }

查看页面：

@model IEnumerable<Core3_1MVC.Models.ArticleViewModel>

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

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SelectedState)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                <select asp-for="@item.SelectedState" asp-items="@(new SelectList(item.States, "State", "State"))"> 
                </select>
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
}
    </tbody>
</table>

@section Scripts{ 

<script>  
    $(function () {
        $("select").each(function (index, item) {
            $(item).change(function () {
                var selectedstate = $(this).val();
                var ddl = $(this);
                $.ajax({
                    url: "/Article/GetStates",
                    method: "Post",
                    data: { "selectedState": selectedstate },
                    success: function (result) {
                        ddl.empty(); //clear the options:
                        var s = "";
                        for (var i = 0; i < result.length; i++) {
                            s += '<option value="' + result[i].state + '">' + result[i].state + '</option>';
                        }
                        ddl.html(s);
                    }
                });
            });
        });
    });
</script>
}

结果如下：