我有一个映射应用程序，我想将范围值放在URL中。 （XMIN，YMIN，XMAX，YMAX）。我目前有一个javascript文件，可以处理所有与映射相关的功能。此脚本还会在更改范围时创建并使用适当的值更新隐藏的输入。我希望有一个JQUERY事件监听器，然后从视图内部处理相应的url操作。
我正在使用dojo来创建隐藏的输入。这样可以正常工作并更新值。
domConstruct.place("<input type='hidden' id='xmin-h'/>", "av-map-div");
domConstruct.place("<input type='hidden' id='ymin-h'/>", "av-map-div");
domConstruct.place("<input type='hidden' id='xmax-h'/>", "av-map-div");
domConstruct.place("<input type='hidden' id='ymax-h'/>", "av-map-div");
domConstruct.place("<input type='hidden' id='wkid-h'/>", "av-map-div");
然后在范围变化......
map.on("extent-change", function () {
var jextent = getExtentParm();
console.log(jextent);
});
调用...
var getExtentParm = function getExtentParm() {
console.log("get extent");
var XMIN;
var YMIN;
var XMAX;
var YMAX;
var WKID;
XMIN = map.extent.xmin;
YMIN = map.extent.ymin;
XMAX = map.extent.xmax;
YMAX = map.extent.ymax;
WKID = map.extent.spatialReference.latestWkid;
var hXmin = document.getElementById("xmin-h");
domAttr.set(hXmin, "value", XMIN);
var hYmin = document.getElementById("ymin-h");
domAttr.set(hYmin, "value", YMIN);
var hXmax = document.getElementById("xmax-h");
domAttr.set(hXmax, "value", XMAX);
var hYmax = document.getElementById("ymax-h");
domAttr.set(hYmax, "value", YMAX);
var hWkid = document.getElementById("wkid-h");
domAttr.set(hWkis, "value", WKID);
}
在我的视图中，我想操纵URL查询字符串。贝娄是我最近的尝试。它失败。
@section scripts {
<script src="https://js.arcgis.com/3.20/"></script>
<script src="~/Scripts/av-map.js"></script>
<script>
$(document).ready(function () {
var currentUrl = window.location.href;
var parsedUrl = $.url(currentUrl);
var params = parsedUrl.param();
$("#av-map-div").on("change","xmin-h", function () {
params["XMIN"] = $("xmin-h").val();
setURL();
});
$("#av-map-div").on("change", "ymin-h", function () {
params["YMIN"] = $("ymin-h").val();
setURL();
});
$("#av-map-div").on("change", "xmax-h", function () {
params["XMAX"] = $("xmax-h").val();
setURL();
});
$("#av-map-div").on("change", "ymax-h", function () {
params["YMAX"] = $("ymax-h").val();
setURL();
});
function setURL() {
var newURL = "?" + $.param(params);
console.log(newURL);
};
});
</script>
最好的方法是如何做到的？奖励积分，mvc这样做的方式是什么？
编辑/澄清
map.js文件正在更新<inputs>的值。它正在使用ESRI的api，因此我将其与应用程序的其余部分分开处理。此脚本既可以创建隐藏的输入（已尝试过段落），也可以在每次滚动，平移或缩放地图时更新这些值。我希望将这些参数传递到URL中，以便当我们使用查询字符串的其他函数（从而重新加载页面）时，可以维护映射范围。 map.js有一个函数可以从url中获取XMIN，XMAXm YMIN，YMAX并适当调整地图。否则它将重置为其初始范围。
它使用下面的JS ..
设置URL的范围var setExtent = function setExtent() {
console.log("set map extent");
var xmin = getUrlParameter('XMIN');
var ymin = getUrlParameter('YMIN');
var xmax = getUrlParameter('XMAX');
var ymax = getUrlParameter('YMAX');
var sr = getUrlParameter('WKID');
if (typeof xmin == 'undefined' || typeof ymin == 'undefined' || typeof xmax == 'undefined' || typeof ymax == 'undefined' || typeof sr == 'undefined') {
console.log('null or invalid extent');
}
else {
var ext = new Extent(xmin, ymin, xmax, ymax, new SpatialReference({ wkid: sr }));
map.setExtent(ext);
}
}
var getUrlParameter = function getUrlParameter(sParam) {
console.log('get url param');
var sPageURL = decodeURIComponent(window.location.search.substring(1)), sURLVariables = sPageURL.split('&'), sParameterName, i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
console.log(sParameterName[1] === undefined ? true : sParameterName[1]);
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
我的控制器如下：
public ViewResult Index(string sortOrder, string currentFilter, string searchString, int? page, double? XMIN, double? YMIN, double? XMAX, double? YMAX, int? WKID)
{
ViewBag.XMIN = XMIN;
ViewBag.YMIN = YMIN;
ViewBag.XMAX = XMAX;
ViewBag.YMAX = YMAX;
ViewBag.CurrentSort = sortOrder;
ViewBag.AGMT_NUM_PARM = String.IsNullOrEmpty(sortOrder) ? "AGMT_NUM_DESC" : "";
ViewBag.EXP_DATE_SORT_PARM = sortOrder == "EXP_DATE" ? "EXP_DATE_DESC" : "EXP_DATE";
if (searchString != null)
{
page = 1;
}
else
{
searchString = currentFilter;
}
ViewBag.CurrentFilter = searchString;
var agreements = from a in db.LANDDATA_MORNINGSTAR_AGREEMENTS select a;
if (!String.IsNullOrEmpty(searchString))
{
agreements = agreements.Where(a => a.AGMT_NUM.Contains(searchString)
|| a.AGMT_NAME.Contains(searchString));
}
switch (sortOrder)
{
case "AGMT_NUM_DESC":
agreements = agreements.OrderByDescending(a => a.AGMT_NUM);
break;
case "EXP_DATE":
agreements = agreements.OrderBy(a => a.EXPR_DATE);
break;
case "EXP_DATE_DESC":
agreements = agreements.OrderByDescending(a => a.EXPR_DATE);
break;
default:
agreements = agreements.OrderBy(a => a.AGMT_NUM);
break;
}
int pageSize = 10;
int pageNumber = (page ?? 1);
return View(agreements.ToPagedList(pageNumber, pageSize));
}
答案 0 :(得分：0)
假设您的每个属性都有input，例如：
<div id="myProps">
<input type="number" data-propname="xmin-h" value="yourvalue" class="propclass" />
<input type="number" data-propname="xmax-h" value="yourvalue" class="propclass" />
<!-- all the rest here -->
</div>
然后您可以使用blur收听此输入的更改（当失去对输入的关注时，更改网址）：
var config = {
mypropscontainer: '#myProps',
myprop: '.propclass'
};
$(document).ready(function () {
$(config.mypropscontainer).on('blur', config.myprop, function () {
// This will find all the properties and put them in a list
var allProps = $(config.mypropscontainer).find(myprop);
// Iterate the list and create the new url
var _url = '/controller/action?';
$.each(allProps, function (index, item) {
var _propname = $(item).data('propname'); // Will return xmin-h, xmax-h, etc...
var _propvalue = $(item).val();
_url = _url + _propname + "=" + _propvalue;
// If is not the last element append also an '&'
if (index !== allProps.Count - 1) {
_url = _url + '&';
}
});
// Do something with your _url here
});
});