如何从查询参数中填充 observable？

Posted 2023-05-08

【中文标题】如何从查询参数中填充 observable？

【英文标题】：How to fill observable from query parameter?

【发布时间】：2018-03-03 04:06:09

【问题描述】：

我正在编写 ASP.NET/MVC 应用程序。我需要用通过 URL 传递的值填充可观察到的淘汰赛。例如，假设我要打开以下页面：

http://example.com/Controller/Action?param=test

我想把通过URL参数传递的值输入：

<input data-bind="value: field, <?>"></input> <!-- Either set value to "test" here -->

this.field = ko.observable(<?>) <!-- or here -->

解决方案 1

由于我可以完全控制生成 html，我可以创建隐藏字段，用值填充它，然后使用 jQuery 获取 observable，但这对我来说似乎有点过头了。

<input type="hidden" id="temp" value="@Model.Param"></input>

field($("#temp").val());

解决方案 2

另一种选择是使用 Razor 生成一些 javascript：

<script type="text/javascript" src="pageViewModel.js"></script>
<script type="text/javascript">
    pageViewModel.setValue(@Model.Param); // Dangerous
</script>

但这很危险 - 我会采取一些安全措施来避免人们在这里注入 Javascript。

有没有更好的方法？

【参考方案1】：

您可以通过检查 window.location.search How to obtaining the querystring from the current URL with JavaScript? 直接在淘汰视图模型中通过 javascript 访问查询字符串

var searchParams = new URLSearchParams(window.location.search);
this.field = ko.observable(searchParams.get("param"));

（如果 URLSearchParams 不支持，链接的 SO 答案也有旧版浏览器支持的解决方案）

【参考方案2】：

我更喜欢 Jason Spake 的回答，但在我工作的地方，我们就是这样做的……

我们有一个效用函数

// this is a utility function that returns query string values. Pass in the
// name of the query string and the value is returned
function getUrlVars() 
    var vars = ;
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) 
        vars[key] = value;
    );
    return vars;

那我们就这样称呼它

this.HazInd = ko.observable(getUrlVars()["HazInd"]);