Trying to dynamically insert javascript values into asp tag helper element

Question

@page
@model Vescoverer.Pages.Registration.LocationModel

@{
    ViewData["Title"] = "Location";
}

<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div id="long" class="form-group">
                <label asp-for="User.Longitude" class="control-label"></label>
                <input id="long" asp-for="User.Longitude" class="form-control" />
                <span asp-validation-for="User.Longitude" class="text-danger"></span>
            </div>

            <div id="lat"class="form-group">
                <label asp-for="User.Latitude" class="control-label"></label>
                <input asp-for="User.Latitude" class="form-control" v />
                <span asp-validation-for="User.Latitude" class="text-danger"></span>
            </div>

<div class="form-group">
    <input asp-for="User.Longitude" type="submit" value="Next" class="btn btn-primary" />
            </div>
        </form>
        <button onclick="getLocation()">Get Location</button>
    </div>
</div>
<script>

    var lat = document.getElementById("lat");
    var long = document.getElementById("long");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            lat.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        lat.innerHTML = position.coords.latitude;
        long.innerHTML = position.coords.longitude;

        $.ajax(
            {
                type: "POST", //HTTP POST Method
                url: "Location", 
                data: { //Passing data
                    Longitude: //insert data value, //Reading text box values using Jquery
                    Latitude: //insert data value
                }
            });
    }
</script>

I want the longitude and latitude results to go into the appropriate form input values to be passed into the backend when the user clicks Get Location, instead the result replaces the form values with the innerHTML string. i know the asp-for tag heper handles the server side aspect but i'm not sure how to get the javascript results to be displayed in the form value. So when the user presses next, the data is passed into the database, as you can see i'm also trying to use Ajax but i'm not too sure.

Answer 1

You can use the ".val(value)" method to set the value of each element in the set of matched elements.

$("input[name*='Latitud']").val(position.coords.latitude);
$("input[name*='Longitude']").val(position.coords.longitude);

Result

The following is the complete demo, you can refer to it.

Model

public class User
{
    public string Longitude { get; set; }
    public string Latitude { get; set; }
}

xxx.cshtml.cs

public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }
    [BindProperty]
    public new User User { get; set; }
    public void OnGet()
    {
    }
    public void OnPost()
    {
    }
}

xxx.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="row">
 <div class="col-md-4">
  <form method="post">
   <div asp-validation-summary="ModelOnly" class="text-danger"></div>
   <div id="long" class="form-group">
    <label asp-for="User.Longitude" class="control-label"></label>
    <input id="long" asp-for="User.Longitude" class="form-control" />
    <span asp-validation-for="User.Longitude" class="text-danger"></span>
   </div>
   <div id="lat" class="form-group">
    <label asp-for="User.Latitude" class="control-label"></label>
    <input asp-for="User.Latitude" class="form-control" v />
    <span asp-validation-for="User.Latitude" class="text-danger"></span>
   </div>
   <div class="form-group">
    <input type="submit" value="Next" class="btn btn-primary" />
   </div>
   <button type="button" onclick="getLocation()">Get Location</button>
  </form>
 </div>
</div>
@section scripts{
<script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            lat.innerHTML = "Geolocation is not supported by this browser.";
        }
    }
    function showPosition(position) {
        $("input[name*='Latitud']").val(position.coords.latitude);
        $("input[name*='Longitude']").val(position.coords.longitude);
    }
</script>
}