Get selected value from HTML control

Question

I am new to the web side of things and I am currently struggling with Razor Pages. Can someone explain the ways I can get a value from control in this case.

How can I extract the content of the selected and pass it to a variable to the code behind;

@page
@model ViewToVM.Pages.IndexModel
@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>
<section id="cityList">
 <select id="selectedCity">
  @using Model;
  @foreach(City city in Model.Cities)
  {
   <option>@city.SelectedCity</option>
  }
 </select>
</section>

with this code behind

using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
using ViewToVM.Model;

namespace ViewToVM.Pages
{
    public class IndexModel : PageModel
    {
        public List<City> Cities = new List<City>()
        {
            new City("Sofia"),
            new City("Plovdiv"),
            new City("Velingrad")
        };
        public string selectedCities = string.Empty;

        public void OnGet()
        {

        }
    }
}

The City class just contains a single string for demo purposes. I know this is probably a pretty bad way to do the code behind but It help me illustrate the problem better.

I am pretty new to the whole ASP.NET thing. the project is made from the Web Application template — EnvelopedDevil, Mar 14 '18 at 21:55
Where is your razor page c# code? are your rendering the view? — Hussein Salman, Mar 14 '18 at 21:57
the file is a .cshtml file so it the HTML file is backed by a .cs file. The view is rendered and it gets the values from the collection properly — EnvelopedDevil, Mar 14 '18 at 21:59
@Coding I added the whole cshtml file as is in VS if it helps — EnvelopedDevil, Mar 14 '18 at 22:01
please paste you code behind for the view, since you should create you actions there — Hussein Salman, Mar 14 '18 at 22:03
Well there are lot of things. You need to add a form to your view and submit button. Then, create an action in your code behind that expects the parameter you want to pass. you need to ask more specific things, so people can help you — Hussein Salman, Mar 14 '18 at 22:35
well my idea was to just get it on selection change if possible — EnvelopedDevil, Mar 14 '18 at 22:39

score 1 · Accepted Answer · answered Mar 15 '18 at 01:37

you can use Javascript/Jquery and add an onchange event listener that can make a Ajax call and pass it's value to the controller. similar to the code below:

<script type="text/javascript">
// assuming you're using jQuery
$("#selectedCity").change( function (event) {
    $.ajax({
        url: "Controller/PostDropdown/",
        data: { id = $(this).val() },
        type: "POST",
        dataType: "html",
        success: function (data, textStatus, XMLHttpRequest) {
             // do something 
        }
    });
});

score 1 · Answer 2 · answered Mar 15 '18 at 02:36

1

You should wrap select with form. When form was submitted, it will call your controller.

see this： Submitting form and pass data to controller method of type FileStreamResult

answered Mar 15 '18 at 02:36

Steven Chou

1,504
2
21
43

Get selected value from HTML control

2 Answers2