javascript - 尝试将 javascript 值动态插入到 asp 标签助手元素中
问题描述
@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>
当用户单击“获取位置”时,我希望经度和纬度结果进入适当的表单输入值以传递到后端,而不是结果用 innerHTML 字符串替换表单值。我知道 asp-for 标记 heper 处理服务器端方面,但我不确定如何让 javascript 结果显示在表单值中。因此,当用户按下下一步时,数据将传递到数据库中,正如您所看到的,我也在尝试使用 Ajax,但我不太确定。
解决方案
您可以使用“ .val(value) ”方法来设置匹配元素集中每个元素的值。
$("input[name*='Latitud']").val(position.coords.latitude);
$("input[name*='Longitude']").val(position.coords.longitude);
结果
下面是完整的demo,大家可以参考。
模型
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>
}
推荐阅读
- skia - 如何在 Mac OS 中构建 Skia
- include-path - eiffel:类型基于未知类(即使在库中可见)
- c# - .NET Framework 和 .NET Core 中的进程地址不同
- sql - SQL 将两张表合并为一张表中的行
- mysql - 如何在 symfony 学说中使用 group by 在多个实例中恢复单个实例?
- javascript - IMPORTXML Google 表格查询 HTML
- php - 如何使用 PHP 和 MySQL 计算正在运行的函数的并发实例?
- java - 向 TableView 添加新列 - JAVA FX
- vb.net - 如何从 TextBox 的表单值设置 Crystal Report 的 FormulaFiled 值
- html - 单击Angular 9中的按钮后如何显示表单?