ASP.NET MVC - 输入值更改更新 URL 参数

Question

我有一个地图应用程序，我想将范围值放在 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 的做法是什么？

编辑/澄清

<inputs> 的值正在由 map.js 文件更新。它使用 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));

    }

Answer 1

假设您的每个属性都有一个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 收听此输入的更改（当失去对输入的关注时，更改 url）：

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
    });
});