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

Posted 2023-02-16

【中文标题】ASP.NET MVC - 输入值更改更新 URL 参数

【英文标题】：ASP.NET MVC - On Input Value Change Update URL Parmaeters

【发布时间】：2017-05-08 20:23:12

【问题描述】：

我有一个地图应用程序，我想将范围值放在 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));

    

【问题讨论】：

哪里失败了？并且您正在收听$("#av-map-div") 更改，它真的会触发更改事件吗？

javascript 文件设置了一个监听器，该监听器将更改发布到位于 #av-map-div 中的隐藏输入。

一个问题可能是加载的顺序脚本......进一步调查......

位于#av-map-div 中的隐藏输入无关紧要。不幸的是，change 无济于事，如果您尝试在另一个 div 中监听隐藏输入 xmin、xmax 等的更改，然后相应地更新查询参数。我鼓励您从 jQuery 文档中检查change 的工作方式..我将分享一个提议的选项..

要传递到 URL 的参数，当 URL 从 setUrl() 更改为 location.href = http://abcd.com?xmin=1&ymin=2&..... 时，您的位置将被更新并且浏览器将导航。如果每次地图范围更改时更新 URL，这将导航和更新，可能会导致无限循环。我希望你能关注。

【参考方案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
    );
);

【讨论】：

在这种情况下，输入对用户可见。我希望在幕后处理这个问题。

那么更新是如何发生的呢？或者为什么你需要实际的 change 事件来修改 url？

这些值由 map.js 文件更新。它使用 ESRI 的 api，因此必须与应用程序的其余部分分开处理。我有这个脚本创建隐藏的输入（已经尝试了一个段落），并在每次滚动地图时更新这些值。我希望将这些参数传递到 URL 中，以便当我们查询字符串的其他函数重新加载页面时，可以维护地图范围。 map.js有一个功能，可以从url中抓取XMIN，XMAXm YMIN，YMAX并适当调整地图。