在没有 FormMethod.Post 的情况下获取下拉列表中的 SelectedItem

Question

我有一个下拉列表绑定到我的模型中的列表。 Model.list_IDs

当前页面是一个 "editing" 页面，用户会在其中使用下拉列表固有地更改模型的属性。

@Html.DropDownListFor(model => Model.ID, Model.list_IDs, new { style = "width:250px" })

下拉列表中的项目不直观，所以我想提供一个按钮，单击该按钮时，会通过存储过程检索附加信息（通过名为 GetDetails 的方法从控制器调用）

按钮是通过操作 link 创建的，我计划显示局部视图（如聚焦弹出窗口 window），在单击按钮后显示附加信息。

@Html.ActionLink(" ", "GetDetails", new { id = Model.ID.ToString() }, new { @class = "lnkMagnify16", title = "View Details" })

显然Model.ID.ToString()是不正确的，因为它只会发送模型的当前ID，而不是当前在下拉列表中选择的ID。

如何更改 Model.ID.ToString() 以代表下拉列表的当前选定项？

我知道可以使用 FormMethod.Post (Get selected item in DropDownList ASP.NET MVC) 来完成此操作，但我不想使用提交按钮重新加载页面。如果可能的话，我也想避免 "third party" 方法，例如 JavaScript。

Answer 1

JavaScript 不是 "third party" 方法，它也是唯一方法来完成您在这里想要的。无论是通过标准格式 post 还是通过 AJAX (JavaScript)，您必须向服务器发出新请求以获取您的新信息想要。

现在，由于您特别想要的是一种动态更新 link 中的 Model.ID 值的方法，您无需 AJAX 或表单 post，但您仍然必须使用 JavaScript，因为客户端的所有动态行为都源自 JavaScript。基本上，您需要绑定到下拉列表的更改事件并更改 link.

的 href 属性

document.getElementById('ID').addEventListener('change', function () {
    var selectedId = this.options[this.selectedIndex].value;
    document.getElementById('AwesomeLink').href = // alter `href` with `selectedId`
});

但是，如果用户单击它，link 仍会更改整个视图。如果您真的希望用户留在页面上，那么您需要使用 AJAX 获取 link 的响应，然后以某种方式将其添加到页面，无论是直接还是通过模态弹出窗口（这将需要进一步 JavaScript 才能实现）。此外，尚不清楚 Model.ID 值如何在 URL 中结束，即它是路径的一部分 (/some/url/{id}/) 还是作为查询字符串参数 (/some/url/?id={id}) .如果是前者，我建议切换到后者，因为这样可以更轻松地构建 URL 客户端。

var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function (response) {
    // add response.responseText to the DOM
});
xhr.open("GET", "/some/url/?id=" + selectedId);
xhr.send();

在没有 FormMethod.Post 的情况下获取下拉列表中的 SelectedItem

Get SelectedItem in Dropdownlist without FormMethod.Post

html.actionlink

html.dropdownlistfor

asp.net-mvc-4