Input group icon changed depending to dropdown select

Question

I have a Bootstrap dropdown select for weather in Razor Pages, but I want the input group icon will change depending on what I choose to represent the weather better, like a cloudy icon for cloudy weather.

<div class="input-group">
        <span class="input-group-text" for="weather">
            Icon_Here           
        </span>
        <select id="weather" class="form-control">
            <option selected disabled>Current Weather</option>
            <option value="Sunny">Sunny</option>
            <option value="Partially Cloudy">Partially Cloudy</option>
            <option value="Windy">Windy</option>
            <option value="Cloudy">Cloudy</option>
            <option value="Drizzle">Drizzle</option>
            <option value="Rainy">Rainy</option>
            <option value="Stormy">Stormy</option>          
        </select>
    </div>

This is what it looks like

I know it will be gonna using an If or Switch statement, but I don't know how to call the selected value in C#.

Answer 1

Here is a simple demo about how to achieve it, Hope it can help you solve this issue.

First I save some icons into wwwroot folder.

Weather.cshtml

<form>
    <div class="input-group">
        <span class="input-group-text" for="weather" id="icone">
           
        </span>
        <select id="weather" class="form-control" onchange="Test()">
            <option selected disabled>Current Weather</option>
            <option value="Sunny">Sunny</option>
            <option value="Partially Cloudy">Partially Cloudy</option>
            <option value="Windy">Windy</option>
            <option value="Cloudy">Cloudy</option>
            <option value="Drizzle">Drizzle</option>
            <option value="Rainy">Rainy</option>
            <option value="Stormy">Stormy</option>
        </select>
    </div>
</form>

@section Scripts{
    <script>
        function Test(){
            var result = $("#weather option:selected").val();
            var data = {
                "weather" : result
            };
            $.ajax({
                type: 'Get',
                url: '@Url.Page("Weather","Ajax")',
                data: data,
                contentType: "application/json",
                success: function (result) {
                    var html = "<img src = 'data:image/svg+xml;base64,"+result +"'/>"

                        
                    $("#icone").html(html)
                }
            })
        }
    </script>
}

Weather.cshtml.cs

public class WeatherModel : PageModel
    {
        private readonly IWebHostEnvironment webHostEnvironment;
        public WeatherModel(IWebHostEnvironment webHostEnvironment)
        {
            this.webHostEnvironment = webHostEnvironment;
        }
        public void OnGet()
        {
        }

        public IActionResult OnGetAjax(string weather)
        {
            var htmlFilePath = "";
            string fileToSend = "";
            switch (weather)
            {
                case "Sunny":
                    htmlFilePath = Path.Combine(webHostEnvironment.WebRootPath, "SVG", "Sunny.svg");
                    fileToSend = Convert.ToBase64String(System.IO.File.ReadAllBytes(htmlFilePath));
                    return Content(fileToSend);
                    
                case "Windy":
                    htmlFilePath = Path.Combine(webHostEnvironment.WebRootPath, "SVG", "Windy.svg");
                    fileToSend = Convert.ToBase64String(System.IO.File.ReadAllBytes(htmlFilePath));
                    return Content(fileToSend);

                case "Cloudy":
                    htmlFilePath = Path.Combine(webHostEnvironment.WebRootPath, "SVG", "Cloudy.svg");
                    fileToSend = Convert.ToBase64String(System.IO.File.ReadAllBytes(htmlFilePath));
                    return Content(fileToSend);


                //..........
                
            }

            return Content("");
            

        }
    }

Demo