Как передать переменные из функции JavaScript в представлении в действие в контроллере в ASP.NET Core

Question

Я установил действие Create в своем классе контроллера -

public async Task<IActionResult> Create([Bind("Id,Title,Post,YoutubeURL")] Announcement announcement)
    {
        if (ModelState.IsValid)
        {
            string currentUserId = _userManager.GetUserId(User);
            ApplicationUser currentUser = _context.Users.FirstOrDefault
                (x => x.Id == currentUserId);
            announcement.User = currentUser;

            //UserName is also set to allow for easier access of username from the index view
            string currentUserName = _userManager.GetUserName(User);
            announcement.UserName = currentUserName;

            DateTime date = DateTime.Now;
            announcement.Date = date;

            announcement.Views = 0;

            _context.Add(announcement);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(announcement);
    }

Затем я получаю необходимые данные от пользователя в представлении, используя эту форму

<form asp-action="Create" id="createForm">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Title" class="control-label"></label>
            <input asp-for="Title" class="form-control" id="titleText" />
            <span asp-validation-for="Title" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Post" class="control-label"></label>
            <input asp-for="Post" class="form-control input-lg" id="postText" />
            <span asp-validation-for="Post" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="YoutubeURL" class="control-label"></label>
            <input asp-for="YoutubeURL" class="form-control input-lg" id="youtubeText" />
            <span asp-validation-for="Post" class="text-danger"></span>
        </div>
        <div class="form-group">
            <a asp-action="Index" class="btn btn-default">Cancel</a>
            <button type="button" id="submitBtn" class="btn btn-primary">Create</button>
        </div>
    </form>

IТеперь я хочу получить географическое местоположение пользователей, используя эту функцию javascript, а также отправить его в «Создать» -

<script type="text/javascript">
window.onload = geoFindMe();

function geoFindMe() {
    var output = document.getElementById("coords");

    if (!navigator.geolocation) {
        output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
        return;
    }

    function success(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;

        output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
    }

    function error() {
        output.innerHTML = "Unable to retrieve your location";
    }

    output.innerHTML = "<p>Locating…</p>";

    navigator.geolocation.getCurrentPosition(success, error);
}

Все работает нормально, но я не могу выполнить последний шагКак отправить переменные широты и долготы в действие «Создать» в контроллере, чтобы я мог создать модель с этими переменными?

Answer 1

Для тех, кто хочет сделать что-то подобное, мое решение было следующим:

Я создал два новых скрытых ввода формы для долготы и широты -

            <input asp-for="longitude" type="hidden" class="form-control input-lg" id="longID" />
            <input asp-for="latitude" type="hidden" class="form-control input-lg" id="latID" />

Затем я создал следующую функцию javascript для заполнения значений этих двух входных данных при загрузке страницы -

window.onload = getGeoLocation();
function getGeoLocation() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(useLocation);
    }
};

function useLocation(position) {
    document.getElementById('longID').value = position.coords.longitude;
    document.getElementById('latID').value = position.coords.latitude;
};