Get SelectedItem in Dropdownlist without FormMethod.Post

Question

I have a dropdownlist that is bound to a list in my model. Model.list_IDs

The current page is an "editing" page where a user would inherently change a property of the model by using the dropdownlist.

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

The items within the dropdownlist are not intuitive, so I would like to provide a button, that when clicked, retrieves additional information via a stored procedure (called from the controller via a method called GetDetails)

The button is created through an action link, and I plan to display a partial view (like a focused pop up window) that shows the additional information once the button is clicked.

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

Obviously Model.ID.ToString() is incorrect, because it will only send the model's current ID, rather than the ID currently selected in the dropdownlist.

How can I change Model.ID.ToString() to represent the dropdownlist's current selected item?

I know there is a way to do this using FormMethod.Post (Get selected item in DropDownList ASP.NET MVC) but I do not want to reload the page with a submit button. I'd also like to avoid "third party" approaches like JavaScript if possible.

Answer 1

JavaScript is not a "third party" approach, and it's also the only way to accomplish what you want here. Whether by a standard form post or via AJAX (JavaScript), you must make a new request to the server to get the new information you want.

Now, since all you're specifically after is a way to dynamically update the the Model.ID value in the link, you can do that without AJAX or a form post, but you still must use JavaScript, since all dynamic behavior client-side originates from JavaScript. Basically, you'd need to bind to the change event of the dropdown and alter the href property of your link.

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

However, that link is still going to change the whole view if the user clicks it. If you truly want the user to stay on the page, then you'll need to fetch the response of that link using AJAX and then either add it to the page somehow, whether that be directly or via a modal popup (which will required yet even further JavaScript to achieve). Also, it's not clear how the Model.ID value ends up in the URL, i.e. whether it's part of the path (/some/url/{id}/) or as a query string param (/some/url/?id={id}). If it's the former, I'd recommend switching to the latter, as it will make it much easier to build your URL client-side.

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