获取下拉选择值并发送到asp.net核心web应用程序中同一页面的OnGet方法

Question

I am not from a developer background and I am trying to develop some utility which helps in automating some of our manual process and as part of that, I have designed a web application(simple web page). I am able to populate the values in a dropdown using following code in.cshtml

<select asp-for="SelectDD" asp-items=@Model.pvalues>
    <option value="" selected>Select a value..</option>
</select>

I thought of using a form in.cshtml which helps in reading the values easily but I am getting an error if I include html elements under a form.

Once I select a dropdown and clicking on a button calls the OnGet() method with the selected dropdown value using below code

<a id="pc" asp-page="Comparison" asp-route-ID="dropdownselectedvalue"><button type="button" class="btn btn-primary">Compare</button></a>

but the issue is I am not able to extract the selected dropdown value and not able to pass it through asp-route-ID attribute. Able to get the selected dropdown value using jquery in Console (Chrome developer tools) but couldn't find anything that helps me in sending the value with button click

Answer 1

but I am getting an error if I include html elements under a form.

• What is the error here?

• What is the property name you want to submit? is it SelectDD or ID ?

---

Wrap the elements with a form tag and set the form method to get , and use a submit button:

<!-- use ID as the target property name in the select element -->
<form method="get">
    <select asp-for="ID" asp-items=@Model.pvalues>
        <option value="" selected>Select a value..</option>
    </select>
    <input type="submit" value="Compare" />
</form>

On the backend you can catch the value of the select either by using the parameter in get method:

public void OnGet(int ID)
{
    // ....
}

Or using a property name and adding binding attribute:

[BindProperty(SupportsGet = true)]
public int ID { get; set; };

public void OnGet()
{
    // ...
}

Answer 2

Following helped me in resolving the issue.

I have modified the anchor tag as below (I have removed asp-route-ID attribute)

<a id ="ps" asp-page="Comparison"><button type="button" class="btn btn-primary" onclick="getOption()">Compare</button></a>

I wrote the following javascript function to help me get the selected dropdown value and change the anchor tag href value

function getOption() {
    selectElement = document.querySelector('#SelectDD');
    output = selectElement.value;
    document.querySelector('#pc').setAttribute("href", "/Comparison?ID=" + output);
}

I spent 2-3 days on this but at last able to resolve. Hope this helps others