如何在c#代码中使用javaScript库
How to use javaScript library in c# code
本文关键字:javaScript 代码 更新时间:2023-09-26
我正在使用MVC 4
进行我的web项目
我正在尝试访问我的供应商数据,以便在谷歌地图中标记位置。
public ActionResult GoogleMaps()
{
var dbContext = new VicoProject___NewVersion.DAL.MakeUpContext();
ViewBag.supliersContext = dbContext.Supplier.ToArray();
eturn View();
}
上面的代码在我的HomeController
中
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-key">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: 32.071953, lng: 34.787868 },
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
@Html.Raw(ViewBag.HTTML)
@foreach (var c in ViewBag.supliersContext)
{
var supplierAddress = c.SupplierAddress;
var suplierName = c.SupplierName;
var supplierLat = c.SupplierLatitude;
var supplierLng = c.SupplierLongitude;
// cant use the google.maps :(:(
var marker = new google.maps.Marker({
position: google.maps.LatLng(supplierLat,supplierLng);
map: map,
title: suplierName
});
}
}
window.onload = initialize;
google.maps.event.addDomListener(window, 'load', initialize);
</script>
上面的代码在我的谷歌地图视图中
我需要一些我的循环如何识别谷歌。maps
感谢
编辑
好的,所以我已经将我的循环更改为JavaScript
循环
for (var i = 0 ; i < ViewBag.supliersContext.length ; i++) {
var supplierAddress = c.SupplierAddress;
var suplierName = c.SupplierName;
var supplierLat = c.SupplierLatitude;
var supplierLng = c.SupplierLongitude;
var marker = new google.maps.Marker({
position: google.maps.LatLng(supplierLat, supplierLng),
map: map,
title: suplierName,
})
}
但仍然没有标记:(
JavaScript不是服务器端语言,因此您不能在C#上下文中使用它的对象。
根据你的代码,你可以用JavaScript生成字符串,并用从控制器中检索到的值来填充它,就像在@foreach循环中一样:
@(String.Format("new google.maps.Marker({{position: new google.maps.LatLng({0},{1}), map: map, title: {2} }});", supplierLat, supplierLng, suplierName))
因此,基本上,它将在每次迭代中输出google.maps.Marker
个实例,您可以根据使用方式对其进行格式化。
更新:
这是一个有效的例子。
服务器端:
public class Supplier
{
public string SupplierName { get; set; }
public decimal SupplierLatitude { get; set; }
public decimal SupplierLongitude { get; set; }
}
[HttpGet]
public ActionResult Index()
{
ViewBag.supliersContext = new List<Supplier>()
{
new Supplier() { SupplierName = "Test1", SupplierLatitude = 32.071953M, SupplierLongitude = 34.787868M },
new Supplier() { SupplierName = "Test2", SupplierLatitude = 31.571953M, SupplierLongitude = 34.787868M },
new Supplier() { SupplierName = "Test3", SupplierLatitude = 31.071953M, SupplierLongitude = 34.787868M },
};
return View();
}
客户端:
<html lang="en">
<body>
<div id="map-canvas" style="height: 400px;"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: 32.071953, lng: 34.787868 },
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
@foreach (var c in ViewBag.supliersContext)
{
var suplierName = c.SupplierName;
var supplierLat = c.SupplierLatitude;
var supplierLng = c.SupplierLongitude;
@Html.Raw(String.Format("new google.maps.Marker({{position: new google.maps.LatLng({0},{1}), map: map, title: '{2}'}});", supplierLat, supplierLng, suplierName))
}
}
window.onload = initialize;
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
这只是一个测试示例,您不应该立即使用它,因为@Html.Raw在该上下文中揭示了XSS漏洞。
相关文章:
- 如何在读取XLS/XLSX本地文件时,使用IE的javascript代码启用未标记为安全的ActiveX控件
- 面向对象的Javascript代码在IE7中不起作用
- 通过命令行/批处理文件打开页面时,将javascript代码注入Google Chrome
- JavaScript代码问题:我正在将对象转换为数组
- Javascript阻止其他Javascript代码
- JavaScript代码未正确检查ajax请求
- 如何调试Javascript代码或函数
- 为什么我在这个javaScript代码中使用NaN
- 将javascript代码转换为jquery代码时出错
- 如何从Objective-C代码中调用javascript代码
- 有什么工具可以轻松读取javascript代码吗
- 这个javascript代码是如何编写的
- 如何解密此javascript代码
- SIMPLE Javascript代码,用于显示谷歌电子表格中单个字段的数据
- HTML标记,包含带引号的JavaScript代码中的引号
- 如何在Win8Metro应用程序的Javascript代码中捕获自己的C#事件
- addEventListener的Javascript代码不工作!?(单击时打开放大的img)
- JavaScript代码无法在表单上呈现部分
- 以下 JavaScript 代码与 Facebook 相关
- 使用解析为javascript源的.php,如何使用条件语句将javascript代码封装在php括号之间