使用 .Net Core MVC 中的下拉列表跳转到特定记录答案

【问题标题】：Jump to specific record using dropdown list in .Net Core MVC使用 .Net Core MVC 中的下拉列表跳转到特定记录
【发布时间】：2020-11-27 00:13:48
【问题描述】：

我尝试了各种 Google 搜索，但没有得到具体的结果。

问题很简单：我有一个表中记录的编辑表单。在同一个视图中，还有一个包含该表中所有记录的下拉列表。我想使用该下拉列表重新加载包含下拉列表中所选记录的表单。

这是编辑的“获取”操作：

public async Task<IActionResult> Edit(int? id)
{
        if (id == null)
        {
            return NotFound();
        }

        var myObj = await _context.MyObjs.FindAsync(id);
        if (myObj == null)
        {
            return NotFound();
        }

        VMEdit model = new VMEdit
        {
            // populate view model
        };

        var objList = _context.MyObjs.Select(c => new
        {
            Value = c.Id,
            Text = c.Tag,
        }).OrderBy(c => c.Text);
        ViewData["ObjList"] = new SelectList(objList, "Value", "Text", id);

        return View(model);
    }

这是视图：

@model Audit.Models.VMEdit

@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<form name="jumpForm" asp-action="Edit" asp-controller="MyObj" method="get">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group form-row">
        <label asp-for="Id" class="col-md-3">Jump to: </label>
        <div class="col-md-6">
            <select asp-for="Id" class="form-control" asp-items="ViewBag.ObjList"></select>
        </div>
        <div class="col-md-3">
            <input type="submit" value="Go" />
        </div>
    </div>
</form>


<form asp-action="Edit">
    // edit form controls here
</form>

这个表单的行为是这样的：

假设我在 /MyObj/Edit/3

假设我从下拉列表中选择 Id=5 的记录并按 Go

加载的页面是/MyObj/Edit/3?Id=5

我打算加载的页面是/MyObj/Edit/5

我猜测将选择字段命名为“Id”会导致它绑定到加载的 Id (3)。但是，我不知道该怎么办。我希望表单生成的 Get 请求具有值为 5 的 Id 参数。

任何帮助将不胜感激。不涉及 javascript 的特别简单的解决方案。谢谢。

【问题讨论】：

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

【解决方案1】：

我最终还是使用了这种方法，尽管它并不优雅。 https://stackoverflow.com/a/2000689

我本可以使用带有下拉菜单的导航，但我想在我的下拉菜单中使用 Select2.js，因为记录列表很长，我想让它可搜索。

【讨论】：

【解决方案2】：

加载的页面是 /MyObj/Edit/3?Id=5

我打算加载的页面是 /MyObj/Edit/5

我觉得用js来重定向url会更简单直接：

与select2.js配合使用，只需用js和css引用链接，然后在js中添加select2方法即可实现select控件内部的搜索功能。

详情请参考以下代码。

 @section Scripts{
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
    <script>
        $(document).ready(function () {
            $("select").select2();
            $("form[name=jumpForm]").submit(function () {
                event.preventDefault();
                location.href = "/MyObj/Edit/" + $("select").val();
            })
        });
        
    </script>
}

这是测试结果：

【讨论】：