Share via

MVCCORE HTMLHELPERS RADIO BUTTON AND DROPDOWNLIST

Anonymous
2023-08-28T08:41:33.3133333+00:00

Here is my website

https://whereami.azurewebsites.net/

Here is the source code

https://github.com/KalyanAllam/LatLongAddress

I need help with htmlhelpers like Radio button and dropdownlist

On this page I want to add radio button if Celsius is selected then display temperature in Celsius if Fahrenheit is selected display temperature Fahrenheit.

Capturetemp1

On this page I want to add a dropdown if Miles is selected display distance in Miles if Kilometers is selected display distance in Kilometers

Capturedis1

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,618 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,510 questions
0 comments
Accepted answer
  1. Xinran Shen - MSFT 2,091 Reputation points
    2023-08-29T03:56:31.1233333+00:00

    Hi @Dotnet Engineer, I changed your code based on the requirement in your question, I hope it is what you want.

    Home/Index

    $.ajax({
                url: "/Home/ReverseGeocode",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                success: function (response) {
                    console.log(response);
                      $('#latitude').text(response.latitude)
                    $('#longitude').text(response.longitude)
                    $('#address').text(response.address)
                    $('#weather').text(response.weather)
                    $('#temperature').text(response.temperature + " °C")
                }
            })
//..........other code..............

  <body>
    <button onclick="getLocation()">GetLocation</button> <br>

  Latitude :  <h4 id="latitude">      @ViewData["latitude"]</h4>
  Longitude:  <h4 id="longitude">   @ViewData["longitude"]</h4>
  Address  :  <h4 id="address"> @ViewData["address"]</h4>
  weather  :    <h4 id="weather"> @ViewData["weather"]</h4>
    temperature  :     
    <br />
        <label><input type="radio" name="temperature" value="C" checked />Celsius</label>
        <label><input type="radio" name="temperature" value="F" />Fahrenheit</label>
        <h4 id="temperature"> </h4>
  <br>
  <h4> Latitude and Longtitude from browser , address from Bing Maps
</h4>

<script>
        const temperatureElement = document.getElementById("temperature");

        document.querySelectorAll('input[name="temperature"]').forEach((radio) => {
            radio.addEventListener("change", () => {
                updateTemperature(temperatureElement.textContent, radio.value);
            });
        });

        function updateTemperature(value, unit) {
            const newValue = convertTemperature(value, unit);
            temperatureElement.textContent = newValue;
        }

        function convertTemperature(value, unit) {
            const numericValue = parseFloat(value);

            if (isNaN(numericValue)) {
                return "Invalid input";
            }

            if (unit === "C") {
                return ((numericValue - 32) * (5 / 9)).toFixed(1) + " °C";
            } else if (unit === "F") {
                return ((numericValue * 9 / 5) + 32).toFixed(1) + " °F";
            } else {
                return "Invalid unit";
            }
        }

</script>
</body>
//..........other code..............

    Gif Demo

    enter image description here

    Distance/index

    @if (ViewData["CalculatedDistance"] != null)
            {
                <label class="control-label">choose your unit</label>
                <br />
                <select id="distance" onchange="change()">
                    <option value="K">Kilometers</option>
                    <option value="M">Miles</option>
                </select>
                <div >
                    Distance = <div id="unit">@ViewData["CalculatedDistance"] km</div>
                </div>

               

            }

//.......other code

@section Scripts{
    <script>
        function change(){
            const value = document.getElementById("distance").value
            const result = parseFloat(document.getElementById("unit").textContent);
            if (value === 'K'){
                const km = (result * 1.609344).toFixed(1)
                document.getElementById("unit").innerHTML = km + ' km'
            }else if(value === 'M'){
                const m = (result * 0.6213711922).toFixed(1)
                document.getElementById("unit").innerHTML = m + ' miles'
            }
        }
    </script>
}

    Gif Demo

    enter image description here

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,

    Xinran Shen

    0 comments

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 66,866 Reputation points
    2023-08-28T19:52:55.4866667+00:00

    its pretty simple. a <select> posts the selected value with name. with a radio list, use the same name, and the selected (checked) radio button value will be posted.

    <label><input type="radio" asp-for="Scale" value="C"/>Celsius</label>
<label><input type="radio" asp-for="Scale" value="F"/>Fahrenheit</label>

    will post scale="C" or scale="F" depending on selection and bind to Model.Scale

    <select asp-for="Scale">
   <option value="K">Kilometers</option>
   <option value="M">Miles</option>
</select>

    will post scale="K" or scale="M" depending on selection and bind to Model.Scale

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.